Resizeable Images (without losing quality!)

Most web browsers make resizing text an easy thing to do*, but not all web browsers will resize images along with that text**. Good web designers know this and go to great lengths to make sure their web layouts don't bork when text is resized. But did you know you can make images grow and shrink along with the text?

The trick is to give your images a unique class and set their widths with an em value.

HTML:

CSS:

img.expand { width: 10em; }

Now because you are forcing a specific width on this image, the web browser is in charge of doing the resizing, which is generally frowned upon. I tend to disagree though, I know that a web browser will never be as intelligent at retaining image quality as Photoshop, but the proof is in the pudding and I think generally web browsers do a fine job at it.

Here is the trick: make sure your starting image is larger than the default size. If the size your image is exactly the size as it is displayed on screen at the default text size, you are going to lose image quality as you size it up. But if your image is larger, it will be scaled down at the default size and have room to grow while maintaining resolution.

[VIEW EXAMPLE]

*Except, of course, IE <= v6 which will not resize font sizes set in pixels.
**Except, of course, really nice web browsers like the latest releases of Firefox and Opera.

Original article here.