Once you sprite your images, the next step is to compress them as much as possible. PNG is a great format for this, but…

Does PNG work everywhere?

Yes, it does! No, it doesn’t! Which PNG ?

PNG supports various combinations of color depth, transparency and color correction. Some combinations work perfectly with every piece of software produced in the last decade, and some more esoteric features are practically useless.

Palette with 1-bit transparency (like GIF ) IE 6 IE 7-8 Your browser GIF -like PNG images with simple transparency are supported in all browsers (even as old as IE 4) without any hacks, so whenever you can use GIF — don’t. Use PNG instead. You’ll get the same quality and compatibility as GIF , but a smaller file size.

24-bit without alpha channel IE 6 IE 7-8 Your browser 24-bit PNG files have perfect quality, but perfection costs a lot of bandwidth. Even though they work in all browsers, don’t use them. When you need full color, but don’t need transparency, use JPEG instead.

24-bit with 8-bit alpha channel IE 6 IE 7-8 Your browser This type is often mistaken for one and only true PNG , and infamously fails in IE 6. There are hacks that make it work, but they’re slow and don’t mix well with other CSS properties. Aside from the IE 6 problem, this type creates pretty large files. Avoid it. The silver bullet is below:

Palette with 8-bit alpha channel Photoshop IE 6 IE7-8 Your browser If you’ve only ever used Photoshop, you may believe that this type of PNG cannot exist. In reality it’s just Photoshop’s PNG support lacking. With this type of PNG you get file sizes smaller than GIF , but retain ability to use several levels of transparency. In paletted PNG s alpha is not a mask, but only an extra component in each palette entry. Thanks to this it gracefully degrades in IE 6 — fully opaque pixels are displayed correctly and other pixels are completely transparent. Usually this means that IE 6 will drop smooth edges and shadows, but the image will be good enough: IE 6 Your browser Use this type of PNG whenever you want semi-transparency. You can create these files with (ex-Macromedia) Fireworks. If you’re stuck with Photoshop, you can convert 24-bit PNG s to 8-bit.

24-bit with 8-bit alpha channel and CSS opacity ( filter:alpha in IE ) IE 6 IE 7-8 Your browser There’s a combination of transparencies that doesn’t work even in IE 8. If you apply filter:alpha(opacity= α ) to an image that is transparent already, IE 7-8 will revert to 1-bit transparency and apply alpha channel as a black mask. If possible, instead of relying on CSS , just create an image that is bit more transparent itself. If you’re only using opacity for fade-in/fade-out, you can probably ignore this problem. If you need a workaround, it’s the same as for IE 6.

PNG with ICC color profile IE 8, Chrome, Opera, Mobile Safari Firefox, Desktop Safari Your browser How red is #FF0000 ? Answer to this nearly-philosophical question depends on the monitor you have, its settings, and even lighting conditions around you. But what if you wanted colors in PNG to exactly match the color of your shoes? Color profiles are supposed to solve this oh-so-important problem. In practice they’re not useful on the Web (even when they work right, and they rarely do.) If anyone asks, images for the Web are expected to be in the sRGB color space with gamma 2.2. Don’t enable color management in your software, don’t embed ICC profiles when saving for the Web, and use a PNG optimizer to get rid of any profiles that were embedded.

PNG with gamma correction Matching Mismatched Color intensity goes from 0 to 255. What’s the value of color that looks half as bright as 255? When PNG was young, different systems agreed only on one thing: it was not between 127 and 128. I’m serious. For monitors half of 255 is not 127.5. It’s 186! (or 173 if you have a previous version of Mac OS X.)

If the color 186 doesn’t look almost like the 0/255 pattern, your monitor is miscalibrated or your browser’s scaling algorithm is buggy. That crazy thing is called gamma correction and the formula for it is: ( color_sane_person_expects ÷ 255)1⁄ gamma × 255 = color_that’s_actually_used It’s not a PNG quirk. The problem dates back to CRT monitors which didn’t display brightness evenly — applying ¾ of maximum voltage gave only ½ of maximum brightness. Some operating systems tried to compensate for this effect, others didn’t. PNG had good intentions to fix this mess by encoding gamma value of system/monitor that was used to create the image, allowing other systems to adjust brightness accordigly. This caused a silly problem: most browsers correct colors in PNG s, but nothing else. All colors in GIF s, JPEG s and CSS may be “incorrect”. To get colors in PNG exactly as “incorrect” as all other colors in the system, you have to remove gamma information from the files, which prevents browsers from making PNG s holier than the pope.

Troubleshooting Problem Solution File is huge Use 256-color PNG instead of 24-bit (remember: 256-color type also supports full alpha channel) File is larger than GIF Use a PNG optimizer Colors in PNG have diff­erent bright­ness than same colors in CSS or HTML Remove gamma information. PNG optimizers usually do it, e.g., pngcrush -rem alla input.png output.png Colors in PNG are still odd Make sure you use the sRGB color space (experiment with the Convert to the sRGB option in Photoshop when saving for Web) Image has solid gray background in IE 6 Use PNG 8+alpha instead of 24-bit Image is invisible in IE 6 Make sure the image has some fully-opaque pixels. Use improved pngquant that supports the -iebug flag Photoshop displays transparency wrong You’ve got PNG 8 with alpha not supported by Photoshop. For editing, keep PNG in 24-bit, and convert to PNG 8+alpha only when done. You can convert PNG 8 to 24-bit by resaving it in Preview.app, Fireworks or with: pngout -s1 -c6 -force file.png