imageIn 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

Image workflow in Web Essentials and Visual Studio 2013

    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.


    Hisham Bin Ateya

    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 Ateya
    Mads Kristensen

    It 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 Kristensen

    Hi 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?


    Comments are closed