Build a dynamic, high-traffic site by ensuring images are optimized.
When you build a high-traffic site in Sitecore (and really, aren’t all of our sites so awesome that they’ll become high-traffic?), you should optimize processing and bandwidth as much as possible. Tools like Google’s PageSpeed are great for telling us what to fix, but not how to fix them. In this case, we want to focus on image size.
One approach is to optimize the images at request time, using Sitecore’s getMediaStream pipeline – Kam Figy does this with his Dianoga Sitecore module. Another approach is to optimize the images in the master DB via a Content Editor tool, as Mikael Högberg shows with his Image Optimizer module. In this third approach, we will optimize the images as they are published from the master database to the web database. We only have to optimize it once, and the content editors don’t need to do anything special.
We’ll leave the actual compression algorithms to specialized third-party tools. We can optimize the three most common web image formats using jpegtran, pngcrush, and gifsicle.
Since we’re talking about taking action at publish time, we need a new processor in the publishItem pipeline. Create a config patch file in your app_config/include folder:
Now let’s take a look at the processor itself. Not much going on, just some error handling, logging, and calling a helper class. Note that when we grab the Item to optimize, we’re pulling from the target database. This is because the processor runs after the normal Sitecore “MoveItems” processor in the publishItem pipeline.
Finally, here’s the ImageOptimizer helper class. The main function, Optimize(), first checks that the item is a PNG or JPEG or GIF image, and that it hasn’t been previously optimized (remember, we’re checking the fields on the publishing target database when we check the “optimized” field). Then it grabs the image data, saves it to a temp file, executes the appropriate 3rd party optimizer, and if any space was saved, puts the image back into Sitecore.
So, we’re saving runtime performance on the delivery server by shifting it to a performance hit during publish time. Experimentation has shown it can take up to a second or two to compress large PNG images – so if you’re publishing a lot of images at once be prepared to add quite a bit of time to the process. This is where the “Optimized” field comes in to play. You can add this field to the media item template, leave it unchecked in the master database, and then when you publish, the unchecked value will get copied to the target database. When the optimizer runs, it will flip that value, and not need to re-run the 3rd-party tool until you republish that item (clearing the checkbox). Alternately, the content author could use the “Optimized” field in the master database to indicate the image was properly formatted for web before it was uploaded to the media library.
This gives you another option for automatically optimizing images in your Sitecore solution. Depending on your needs, you could evaluate this method side-by-side with the modules mentioned above.