Performance Optimization: Part 1 (Images)

Part 1 of the performance optimization initiative was to reduce the overall size of the transfer.

A big chunk of what we are sending over HTTP were images (and still is). A big issue was our Slider banners. Those are big images (1020x287) and we have around 10 of them on our home page. Optimized versions have approximately 30kb while non-optimized were showing sizes of about 300Kb. Huge difference!

So what we’ve done?

First of all we exported all images from sitecore into the disk.

Then, we processed them through two different applications. For gifs and pngs we opted to use a unique format (PNG) and processed them through an amazing application called PNGOUT (http://advsys.net/ken/utils.htm). 

For JPGs we processed them through a similar lossless tool called purejpeg.

This was not enough. We had some banners that were saved as PNGs and were still too big. We then decided to go with JPG for all banners and larger images so part of the project was to convert certain images from PNG to JPG.

Another piece of it was to identifying images that were unnecessarily huge. A couple head-shots that were uploaded to our system had a full resolution so they had more than 1000px of width! All of them show in a control with 150px width only. So we re-sized and optimized those for web distribution.

To export the images we used a code that looks like this:

 var items =
 Database.GetDatabase("master").SelectItems(
 string.Format("fast://sitecore/media library/Images//*"));

 Parallel.ForEach(items, item => {
 try {
 var filename = string.Format(@"C:\SITECORE_ALL_IMAGES\{0}.{1}",
 item.ID.ToShortID(),
 ((MediaItem) item).Extension);
 var stream = ((MediaItem) item).GetMediaStream();

 using (Stream file = File.OpenWrite(filename)) {
 CopyStream(stream, file);
 }
 }
 catch (Exception) {

 }

 }
 );

Then, to re-import the images after processing, we used a code that looks like this:

 var pngs = Directory.GetFiles(@"C:\SITECORE_ALL_IMAGES\PNG");
 foreach (var png in pngs) {
 try {
 var mediaItem =
 Database.GetDatabase("master").GetItem(new ID(Path.GetFileNameWithoutExtension(png)));
 var m = MediaManager.GetMedia(mediaItem);
 using (var stream = new FileStream(png, FileMode.Open)) {
 m.SetStream(stream, "png");
 }
 } catch (Exception e) {
 context.Response.Write(string.Format("error in {0} : {1}", png, e.Message));
 }
 }