BLOG_MAG

Optimising Magento Image Cache with Progressive JPEGs

Since June 2013 Webpagetest.org have been checking every JPEG loaded from your to see if it is progressive and it will be exposing an overall grade for progressive JPEGs:

You can read the full article here:

As you can see from the original analysis its a good user-experience enhancement and if you are obsessed with high performance score on your benchmarks (like we are at Push Entertainment) it clears a red light!

The reality is the Magento image cache doesn’t provide for progressive scan for JPEGs created on the fly. I thought i’d have a look for the quickest way to get all my JPEG cache images switched to progressive scan.

 

The image processing functions that the cached images are made with, are based on the PHP GD2 library. In Magento this is accessed via the

/var/lib/Varien/Image/Adapter

package.

The first thing to do is protect the Magento core! – so I copied the file

/var/lib/Varien/Image/Adapter/Gd2.php

to

/app/code/local/Varien/Image/Adapter/Gd2.php.

This means that at runtime my version will be picked up in favour of the distribution version.

The changes are minimal (there are a lot of things you could do at this point like applying interlace only to images of certain size etc ; but remember i wanted quickest route to progressive JPEGs…)

In the source code around 143 insert the following code:

} // make jpegs progressive
$interlaceIt = 0;
if ($this->_fileType == IMAGETYPE_JPEG)
{
$interlaceIt = imageinterlace($this->_imageHandler ,1);
}
That’s it!
Now clear your existing image cache either from the cache management screen in Magento’s admin console:

BLOGimg2

Or do it from a shell

rm -rf /media/catalog/product/cache/*
Now you should be good to go and get that green scorecard (assuming you’ve got all your other stuff optimised!