Working with images in Web Essentials 2013

Download this episode

Download Video

Download captions

Download Captions


This is a demo of a typical workflow for working with image files in Visual Studio. Web Essentials adds a lot of tools that makes this workflow easier than ever.

Features demoed:

  • Paste image from clipboard
  • Lossless image optimization
  • Create image sprites
  • Sprites are better with LESS/SCSS
  • Base64 encode images
  • Optimize base64 encoded images

Existing features NOT demoed in this video:

  • Paste image from clipboard onto CSS, LESS, SCSS, JavaScript, TypeScript, Markdown
  • Save base64 encoded image back to disk
  • Re-embed existing image as base64 encoded dataURI
  • Adding more images to a sprite
  • Changing an existing sprite without breaking your site
  • Optimize image from the HTML editor (Smart Tag on <img> element)

Let me know what you think.



Available formats for this video:

Actual format may change based on video formats available and browser capability.

    The Discussion

    Comments closed

    Comments have been closed since this content was published more than 30 days ago, but if you'd like to send us feedback you can Contact Us.