The web is a fickle mistress

So I've been doing some extracurricular web development work lately, and I figured I'd share what I learned:

1) The internets are filled with lies!

I'd mocked up a site using Ruby on Rails as the backend, and I'd gotten some new assets from our graphic designer to use as menu rollovers. I decided to do a little research to see if there was anything built in to Rails or Scriptaculous to help automate this task, when I came across a "usability" message forum, containing gems like "Don't use images in place of text!" (sure, maybe when the Browser Gods give me more than 3 fonts to work with).

Anyhow, one of the posts on there said something along the lines of "I can't stand it when I see noobs still using Javascript to do their menu rollovers instead of CSS", and I thought "Well, I certainly don't want some random stranger on the internet to think I'm a noob! I'd better check this out!"

Anyhow, the idea as outlined in the forum was to setup your links with a forced width/height in the CSS, and set a background image on them. You can then use the a:hover or a:active CSS elements to specify a different background image when they are rolled over or clicked on.

Brilliant! ...except it doesn't quite work, because some browsers don't gracefully cache background images, so they get loaded from scratch when you rollover them. And even the ones that do cache background images still result in flickering when you rollover the item.

Anyhow, it turns out that there's a workaround that my random forum friend didn't know about - you basically combine all your rollovers into a single image, then use CSS to change the image offset to swap images when you want to display the rollover. It's darned clever, although in the end I think it would've been faster for me to just roll my own Javascript preloader/rollover handler than muck around with all the images.

Of course, when editing the images, I couldn't help but notice that there was some significant artifacting on them, which leads me to:

2) JPEG is a piss-poor format for images with text in them!

Yeah, yeah, I knew this already (it's for photographic images, people!), but that's the format the graphic designer gave them to us in. At first glance they looked acceptable, but the more I looked at them, the more I couldn't stand it. So I had her regenerate the images as PNG, only to discover:

3) PNG has problems also!

So this is probably old news to anyone who has worked with the Macintosh, but the Mac uses a different gamma function than the PC. This means that if you have an RGB value, it'll look lighter on the Mac than it does on the PC - it's built right into the video drivers.

The creators of the PNG format, in their infinite wisdom, thought "hey, this is bad - our images might look different on different systems!" so they decided to put gamma information directly into the PNG file so when viewed with a well-behaved application, the image would look identical on different systems.

Sounds great, huh?

Except the rest of the world (like HTML) doesn't come with customizable gamma functions. So when your PNG file contains gamma information that doesn't match the built-in gamma function for your system, then the colors in the PNG won't match the other colors in your web page, even though they have identical RGB values. This is bad, if you want the background color of your image to match the background-color CSS setting on your page, for example.

Turns out that Photoshop inserts this gamma information automatically, and there's no good way to keep it from doing this. The Mac version of Photoshop inserts gamma information that matches the Mac's gamma function - this means that everything looks perfect on the Mac (which is what most graphics professionals are going to use) but then looks off when viewed on a PC (which is what most web developers and the rest of the world use).

4) The internets will save you!

So of course a few minutes of searching on the internet yielded dozens of solutions, ranging from the inane ("don't use PNG!") to the obscure ("Go into this random File Info dialog in the latest version of Photoshop and delete this random chunk of file information!") to the pragmatic ("Use one of these free utilities to strip out the gamma info!"). I went for the pragmatic option - Ken Silverman (creator of the PNGOUT utility), I owe you a beer, man.