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.

    What's the address of your website? www.domain.com or domain.com?

    There are two camps on the subject of the www subdomain. One believe it should be enforced (www.yes-www.org) and the other (no-www.org) that it should be removed. They are both right.

    What's important is that there is only a single canonical address to your website – with or without www.

    The web.config makes it easy for us to either enforce or remove the www subdomain using URL rewrites. There are many examples online on how to do this, but they all share 2 fundamental flaws. The rules have a direct dependency to the domain name and they don't work with both HTTP and HTTPS.

    So let's see if we can create generic URL rewrite rules that can be used on any website without modifications.

    Your server needs to have the URL Rewrite module installed. Chances are that it does already. Azure Websites does and so does all of my other hosting providers.

    Rewrite rules need to be placed inside the <rewrite> element in web.config:

    <system.webServer>
      <rewrite>
        <rules>
          <!-- My rules -->
        </rules>
      </rewrite>
    </system.webServer>
    

    So here are 2 rules that works on all domains and on both HTTP and HTTPS.

    Remove WWW

    This rule redirects any incoming request to www.domain.com to domain.com while preserving the HTTP(S) protocol:

    <rule name="Remove WWW" patternSyntax="Wildcard" stopProcessing="true">
      <match url="*" />
      <conditions>
        <add input="{CACHE_URL}" pattern="*://www.*" />
      </conditions>
      <action type="Redirect" url="{C:1}://{C:2}" redirectType="Permanent" />
    </rule>
    

    Enforce WWW

    This rule redirects any incoming request to domain.com to www.domain.com while preserving the HTTP(S) protocol:

    <rule name="Enforce WWW" stopProcessing="true">
      <match url=".*" />
      <conditions>
        <add input="{CACHE_URL}" pattern="^(.+)://(?!www)(.*)" />
      </conditions>
      <action type="Redirect" url="{C:1}://www.{C:2}" redirectType="Permanent" />
    </rule>
    

    So there you have it. It's easy once you now how.

    For more info on the URL Rewrite Module, see the Configuration Reference.