I’m gonna rant about lazy web designers for a moment.

First, I hate hate hate it when designers take a photo-quality image, add some text, then crunch (“optimize”, ha!) the image down for size and save it as a JPEG. Artifact haloing around text in web images drives me up the wall. There may have been a reason for it 5 years ago, but these days there’s just no excuse.

It comes down to lazy web designers.

Many, many web sites are guilty of it. Microsoft is one of the worst offenders, while Adobe is smart enough to Flash-ify an image when they want to add text, thus avoiding the problem completely. SciFi is a cross between the two, as they Flash-ify most of their content but not all of it, and I’m going to use them as an example.

Take this, for example:

Here, let me zoom in for those in the cheap seats:

JPEG compression is not meant to handle line art or text! Duh!

In under 15 minutes, I was able to fix this:



plus



equals

Thank you, CSS layering. How hard was that? No nasty artifacts. You can reuse the corner image in other places. The more you reuse it, the lower your bandwidth costs because you’re not embedding it everywhere. It provides for better incremental loading. In many cases, you’ll actually end up with two files whose combined size is less than the single crappy “optimized” one. You can also hyperlink the individual images to different places instead of having to use a map.

If you’re truly worried about that fraction of the population that can’t handle 32-bit PNGs with alpha channels then you can either use Fireworks to remove the grey box in IE or get really down and dirty and just use a GIF. But seriously folks, at what point do you draw a line in the sand and leave the grey box as a reminder to people that they are now using vastly ancient technology?

What makes me mad is that I’m not a graphic designer! I have the graphical abilities of a monkey in heat! And yet, even I know how to do this stuff the right way instead of the lazy way.