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
Smashing Magazine had a great article the other day on Taming Advanced CSS Selectors. The article is comprehensive and well-worth a read, but it also contains a bunch of information about selectors you won’t realistically be able to use for quite some time (mostly due to poor browser support). However, there are a good number of selectors detailed that you can, and probably should be taking advantage of immediately. After the jump I listed some of the advanced selectors that I use, and how and where I use them. If all you want is a quick reference, don’t listen to me, bookmark the excellent QuirksMode CSS compatibility chart.
I haven’t used CSS Sprites a lot in the past, but when I finally started to, the benefits were immediately visible. I won’t go into detail about how to use this technique as it’s been covered in detail. I will, however, try to elaborate on just how much of a benefit CSS Sprites can offer.
Recently I was tasked with creating a form that allowed the user to specify a color selection from a limited number of options. There are numerous scripts that display a popup color selection on the web, but I needed one that was limited to just a few colors. So I wrote a script that makes all text inputs in a form with the class name of “color” display a simple color selection box. Here’s what it looks like in action:
The HTML specification suggests “a mechanism for inserting quotation marks before and after a quotation delimited by BLOCKQUOTE in a manner appropriate to the current language context and the degree of nesting of quotations.” From a usability standpoint, it makes sense to indicate as clearly as possible that everything within a <blockquote> element is a quotation. To do so, I wanted to add quotation marks, clear indentation, and even a slightly different color to differentiate. Here’s what the result looks like in Firefox: