Another must-read is the image optimization series from Stoyan Stefanov and Yahoo. Before reading those articles, I used PNG fixes indiscriminately, employed GIFs way too much, didn’t spend a whole lot of time thinking about the optimum image type when slicing a mockup, and certainly never thought of compressing images beyond Photoshop’s “save for web” feature. The first article in the series, The Importance of Images, along with the prevalence of Yahoo’s YSlow, and more recently Google’s Page Speed, made me realize just how much image optimization actually matters to page performance. I figured I would give you my take on the tips in the series, and thoughts on just how to handle difficult, common, transparency cases.
The Right Image Format
The image optimization series does an excellent job detailing which file format to use, and I suggest reading it (especially for the lossy, non-lossy comments), but here’s their summary:
- JPEG is the format for photos.
- GIF is the format for animations.
- PNG8 is the format for everything else — icons, buttons, backgrounds, graphs…you name it.
After implementing these strategies for a bunch of builds, here’s my take:
- JPEGs for photos or images with tons of colors
- PNG24 when you really need consistent alpha transparency
- PNG8 for everything else
The only difference here is that PNG24 definitely still has a place (oh, and really how often do you use animated GIFs?). The case they mention in which you have to use PNG24 (“When most of the image is semi-transparent”) is actually more common than they would leave you to believe. So how do you handle those cases?
Transparency and PNG Fixes
To handle transparent PNGs, do not use a JavaScript PNG fix. Instead, realize what those fixes do, and then actually apply the fix when and where you need it. The problem with PNG fixes in general is that they typically offer a blanket solution that affects every PNG on the site. You don’t want to be applying a alpha filter to a PNG8 that doesn’t have transparency, so there’s a lot of wasted effort. Not to mention the fact that these filters can be extremely taxing on the browser. There’s a simple CSS solution that can be added to an IE6-only stylesheet (assume #some-element already has a background applied):
#some-element {
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='crop');
}
That’s it! There’s also a VML fix, although the extra markup typically isn’t worth the better performance. Either way, the take-away is to apply the fix on a case by case basis, not with a blanket JavaScript add-on.
Compression
There’s a number of add-ons and/or tools online that will reduce the size of your images quickly and efficiently. The aforementioned YSlow and Google Page Speed are extremely easy to use if you have those add-ons. A new entrant is punypng, which touts its better performance over the Yahoo and Google offerings. Regardless, all tools offer bulk uploads, so after a site build, there’s no reason not to run your pages through these tools and update images that can be compressed.
If nothing else, I hope developers everywhere can remember a couple of things:
- Think about the optimal file format when saving an image
- Don’t use GIFs (unless they are animated… but c’mon)
- Don’t use a blanket PNG fix
