In a series of articles I’ll share what’s my experience with image optimization. Of course the most images you have the most page weight you have. That’s why optimizing your images should be your primary task.
First, I’m gonna mention several formats, which everyone of the webdevs are using widely. There are GIF, JPEG and PNG, where PNG can be either PNG8 and PNG24 (PNG32 is also available as name of that format).
What are the differences between them and when to use one or another?
Well some of us just use one or another even without knowing the difference or without thinking about the optimization. I remember when I just put the images in JPEG with no idea what are the other formats before.
In fact all the formats has pros and cons.
The JPEG format can be either progressive or baseline. The difference is that the progressive JPEG can be loaded directly in the browser with very low quality and then to load with better quality. Some experts insist that this is old school, but I don’t think so. When the image is not the required one (think of a wallpaper preview) the user can skip and go to another without waiting the hole image. The baseline JPEG is loading the good quality image but starting from top to bottom. With portions of the image.
IE and progressive JPEGs
Of course the Internet Explorer 6 don’t support the progressive downloading of an JPEG even if it’s progressive. Well this is no issue till the IE loads the image like a baseline JPEG.
Which JPEG is progressive and which is baseline
You can certainly make some test to determine which JPEG is progressive and which is baseline, from the loading behaviour in your browser. If you’d like to convert an image to a progressive JPEG or baseline you can use a free open source programs out there in the wild online space. Once they are converted to one or another format you can use them widely. Because most of the tools are comand line open source tools you can automate them on the server where the user uploads it’s images. Now every big image can be converted to be progressive.
When to use progressive and baseline JPEGs?
Well the tests show that for images small than 10 K best compression you get with baseline, and for bigger images the small size you get is with progressive JPEGs. There’s the rule use the baseline for thumbs and progressive for any other big image.
This format is well known from the early ages of the web. It allows transparency and animation. Actually the problem with the GIF images is that they don’t support semi-transparency which is a problem nowadays. Today the web users are used to good quality images and somehow the GIF is not suitable. But it’s still the most used format for icons and of course animations.
When should I use GIF?
Well as I’ll mention in a while the PNG8 is a better format than GIF for transparent small icons. But if you should use some kind of an animation like ajax loading circle (or bar) the GIF format is suitable for you. Than you must use a GIF.
As I said PNG can be either PNG8 or PNG24 (which is also called PNG32). Actually PNG8 acts just like GIF, with the important exception that it supports semi-transparency, but yet again on every browser except IE6. In IE6 the PNG8 is just the same like GIF which is not so bad. If you’d like to use GIF for an icon, you should make it PNG8. There are semi-transparent pixels (except IE6 and above) and you get better experience on other browsers than GIF.
In fact PNG32 is not transparent on IE6 (on transparent pixels IE puts some kind of gray pixels). There you can use AlphaImageLoader filter, but that can dramaticaly slow down your browser, so it’s not a good idea.
You should avoid the PNG32 transparent images and the usage of AlphaImageLoader filter.
For every of these formats there lots of tools that remove system information from the image crash and crunch the files so that they become smaller. They can be automated and used on the server.
Now when you use different formats you can be aware of the differences between them and to use the appropriate ones.