Gadgetopia

If you’ve ever tried to make an image resize using stylesheets, you’ll know that you wind up with lousy results. The browser uses the same routines to resize the image that it does when you hard-set a smaller height and with on an IMG tag (a tactic that’s bad on a lot of levels).

Sometimes, though, it would make sense to have the browser resize the image. Michel Fortin (who also maintains the excellent PHP Markdown plugin) came up with a handy technique for getting nice-looking browser-resized images:

The picture shrunk on Windows is rougher. You may or may not like the effect, however if the picture had small-size details on it — like eyes on a face or the small branches of a tree — the result would not have been good at all. This is what we call aliasing.

[…]

Another problem is the one of the file size. In fact, base image’s dimensions in pixel have doubled from the first one, which means that we now have four times the pixels we had in the first image. Here, we the file size goes from 100 KB to 140 KB.

[…]

How to solve these two problems in one shot? We will make the image blurry. This way we solve the aliasing problem on Windows: it’s just like if we had merged pixels in advance just like the Mac would have done it.

And a blurry image can be compressed more with less quality lost. We can thus use a stronger JPEG compression for our image without really loosing quality.

If it’s at all possible, I’d advise avoiding having the browser resize images at all, but Michel’s trick is a good one to add to the tool drawer. Sort of like a garlic press or an apple corer: I have them, I don’t use them much, but they’re handy when the right situation arises.