Working with images in Web Essentials 2013

Sign in to queue

Description

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.

Embed

Download

The Discussion

Add Your 2 Cents