Image workflow using Web Essentials 2013
In Web Essentials 1.7 for Visual Studio 2013 it is now easier than ever to work with images. In this video I'm demoing a lot of new features including:
- Paste image from clipboard onto VS editor
- Lossless image optimization
- Create image sprites
- Sprites are better with LESS/SCSS
- Base64 encode images
- Optimize base64 encoded images
More features were added to Web Essentials than what I'm showing in the demo video. These features include:
- 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)
- Base64 encode images from a Smart Tag in the HTML editor
- Save base64 encoded image to disk from HTML editor
- Drag 'n drop existing image onto Markdown editor
Please let me know what you think about these new image workflow features.
Comments
Cool features Mads, specially the sprite once .. nothing but if I changed the format of the image in the xml file does this recreate the image with the proper format and delete the previous one? does it update the .less, .css files too?
Hisham Bin AteyaIt doesn't delete the previous one, you have to do that yourself. Also, to regenerate the sprite after making changes, you need to right-click the .sprite file and click "Update image sprite". The reason that this doesn't happen automatically is to avoid breaking your site's layout by accident.
Mads KristensenHi Mads, ZenCoding is not working for me in VS2013 as it used to work in VS2012. Example, div#myID.myClass does nothing when I press tab. Is it a bug or configuration issue?
AdamComments are closed