Faster EPiServer sites – image optimization

Posted on May 6, 2012 by Frederik Vig in ASP.NET, EPiServer

Continuing on our goal to get the fastest EPiServer site possible, let’s take on images, specifically images that editors upload. In my experience even after launching a site that scores almost a complete score with YSlow, Page Speed etc, after having editors work on the site for a couple of months the site usually slows down quite a bit. One of the main reasons I’ve found for this is that not all editors think about optimizing images for the web.

To make it easier for our editors Geta as developed a simple tool that runs as a scheduled job on your EPiServer site, it runs has often has you need it to and goes through all your sites images and compresses them as much as possible without loosing any quality.

The service that we’re using is Smush.it run by Yahoo! and the people behind YSlow. We’ve run this on various live sites and the result is quite good, in a case where the site had professional editors (they had their own production partner), we saved around 30% of each image, and I know for a fact that the editors always used Photoshop and save for web. Imagine how much this will save for editors that don’t think about this?

Installation

Install-Package Geta.ImageOptimization

You can get everything you need from NuGet. Note that you need to use a public URL and that there are some configuration settings, web.config:

<section name="ImageOptimizationSettings" type="Geta.ImageOptimization.Configuration.ImageOptimizationSettings, Geta.ImageOptimization"/>
 
<ImageOptimizationSettings siteUrl="http://abk.geta.no" virtualNames="Page Files,Global Files,Documents" />

If nothing is specified it will scan through all VPPs and use the siteUrl from episerver.config.

Source code

All code is available as open source in Geta’s open source repository up on Bitbucket.

Running it

After the installation you’ll have a new scheduled job called “Geta Image Optimization”, you can either run it manually or set it up to run once a week or similar. The first time you run it, depending in the size of the site, it can take quite a lot of time. The Smush.it service can be a little slow, but it shouldn’t matter because it will run in a different windows service than your site and use very little resources.

The next time you run the job it will only compress the new images and leave the images that it already has compressed. It should go quite a lot faster after a couple of runs.

(Note that this is for Alloy Tech demo, most live sites I know have quite a lot more images :))

What about local images?

For images in local folders (typical CSS background images), we usually use the Visual Studio Image Optimizer extension, after installing it you can right-click any folder or image in Visual Studio and optimize the images.

Related Posts: