Progressive JPEGS

I was learning about optimizing and profiling WebApps and Websites, scratched upon more about Progressive JPEGs and came up with this small chunk of information about progressive JPEGs.

“interesting aspect of performance is perceived performance; not necessarily what your numbers tell you, but how fast a site feels” Harry Roberts - CSS WIZARDRY

In terms of Bandwidth, images are elephants for websites. They are the largest average web site payload, about 62%, and they are most often the content gridlock. They are the main culprit for slow rendering.


Insights taken from here 
 
JPEGs are web-optimized photos and they come in two types Baseline JPEG and Progressive JPEG. When rendering large JPEG images we always feel two kind of encounters; either jerks experienced when the image loads. Say a 100px image first loads to 40px then line by line rendering is also experienced or we get empty space and boom out of nowhere the image loads. The result is poor response and most of the time layout breaks. What if the image is rendered to its blurred (pixelated) state then progressively it enhances its pixels? This results in something for the user to see rather than waiting for long blank webpage spaces to fill/render. Here comes the progressive JPEGs. They come in handy; the former is called a baseline JPEG. The Latter sounds worse and feels faster, the user has something to look at instantly and the quality of the image progressively improves.



The preceding image demonstrates how a baseline JPEG is rendered. A baseline JPEG is the full resolution top to bottom scan of the image.



The preceding image demonstrates how a progressive JPEG is rendered. A progressive JPEG is a series of scans of increasing quality.

Progressive JPEGs are relatevely faster hence better. As per Ann Robson "Appearing faster is being faster, and perceived speed is more important than  actual speed".

Reality check

We can check progressive JPEGs on a website in three ways:

1. ImageMagick: On the command line run:
   
   identify -verbose any-image.jpg | grep Interlace
   
   
2. The output will either be “Interlace: JPEG” or “Interlace: None.”  2. Photoshop - Open file. Select File -> Save for Web & Devices. If it’s a progressive JPEG, the Progressive checkbox will be selected.
3. Any browser: Baselines JPEGs will load top to bottom, and progressive JPEGs will do something else. If the file loads too fast you may need to add bandwidth throttling. I use ipfw on my Mac.

We can make a progressive JPEG, we have to consciously save our images into progressive JPEG format in any of the image editing tools like Photoshop, Fireworks, ImageMagick, jpegtran. We need to be aware of one thing; a progressive JPEG is not a new image format so it takes equal CPU rendering as is taken by a  baseline JPEG, it is not a problem for a desktop but can be for mobiles if we are handling a large image database and serving it on mobile.
 
We can use Smushit for translating baseline JPEGs to progressive JPEGs. It can be run from the command line and integrated into our image optimization process. Maybe some day I will write a blog post on it. :)

For Wordpress users: use a plugin known as WP Smushit, it automatically compresses the images using the Smushit API and also converts images into progressive JPEGs