Blog

Image Optimization and Compression in Microsoft WebMatrix 2
Jul 02, 2012
Author: David Hayden
Image Optimization and Compression in Microsoft WebMatrix 2

Here is another WebMatrix Tutorial showcasing a really cool feature in the new WebMatrix 2- Image Optimization. Again, this is another feature of the OrangeBits Compiler Extension that has really stolen the show in WebMatrix 2. I already discussed the CoffeeScript, Less, Sass, and Scss Compilation; iPhone and iPad Emulators; JavaScript and CSS Minification; NuGet Gallery Integration; and Publishing Websites to Windows Azure to name just a few of the cool features in WebMatrix 2.

OrangeBits Compiler and WebMatrix Extensions

I realize I am starting to sound like a broken record, but you want to install the OrangeBits Compiler WebMatrix Extension. It provides so many power features that you will want for developing websites, whether you use node.js, PHP, ASP Web Pages, Orchard CMS, etc.

OrangeBits Compiler in Microsoft WebMatrix

Image Optimization and Compression in Microsoft WebMatrix

It always nice to reduce the size of images and other website assets to improve the load times on web pages. With the OrangeBits Compiler installed in WebMatrix 2 you now have an option to Optimize Image when you right-click on an image.

Once again I am going to illustrate this in Orchard CMS and use the default Orchard Logo that is found in the Media Folder. When I right-click on the logo I get the option to Optimize Image.

Image Optimization and Compression in Microsoft WebMatrix

Now this isn't a large image. It's about 15.2 KB as reported by the file system. When I choose Optimize Image the image is compressed and I get a notification message that compression was successful as well as some information about just how much the image was compressed. In this case we get pretty good compression. The file system reports the image at 8.98 KB, which is basically the 41% reduction as reported by the OrangeBits Compiler. Nicely done!

Image Optimization and Compression in Microsoft WebMatrix

Conclusion

You can read other WebMatrix Tutorials. You can also find a few other WebMatrix tutorials on my Orchard CMS Blog. If you are a web developer looking for a well-rounded IDE for node.js, PHP, and general web development, you may want to take a look at the new WebMatrix 2.

Orchard CMS Developer

David Hayden is an Orchard CMS Developer and Microsoft MVP specializing in Orchard CMS Websites. For more information, check out the WebMatrix Tutorials as well as Orchard CMS Tutorials.

Written by David Hayden, Jul 02, 2012