Resolution Independent Website Graphics
All modern web browsers can now zoom a webpage. That is, you can scale it up or down and all the text, graphics, white space, movies and so on will scale with it. In an era where screen sizes range from 3.5 inches all the way up to 30 - with stops at 10", 15" and the low twenties - being able to adjust the size of an entire webpage is important. It's also wonderfully liberating for a webpage designer to know that they can design a site for the low end - say, a 1024x768 resolution screen - and still have it large and readable on big 24" desktop screens.
There is a problem, though. Although the text fattens up smoothly and crisply as you zoom the webpage, the graphics get all blocky and slightly blurry as the browser tries to fill in gaps between pixels with information it doesn't have. You can always make the website huge and trust people to zoom out rather than in but... Haha, no. No one would do that. Having a website that goes off the edge of the screen is just slipshod. Unattractive, unappealing and likely your undoing. No chance.
There is a trick, though, that allows resolution independent graphics which scale smoothly. Actually, I copied it from Apple. They make resolution independent icons for MacOS X simply by making them really, really big and then shrinking them to fit later. The same idea works in webpages. You can double the size of an image and halve it again in the HTML code. Here's an example using a picture...
Zoom in on the webage and the picture should stay crisp, clear and smooth. This is because the image is actually a reasonably massive 569x861 (click the picture to see it full size) but the HTML code which displays it sets the size to half that, like so...
<img src="article_images/cher-desilva.png" width="284" height="430">
The browser shrinks the image down smoothly and then, if you zoom the webpage, it can scale up to twice the size without any blockiness or pixel guesswork.
There's an obvious downside: file size. The larger version of the image is a bigger file and slower download. In the case of the picture, about three times the size (15KB for small vs 45KB for large). However, I also used it on the logo for this website and, being monochrome, even the double sized version, even saved as a 24-bit PNG, it still barely scrapes 10 KB. A logo which appears on every page is worth the extra care, I think. Glad as I am that it's a svelte 10KB, I'd still accept the tradeoff at 20KB and probably still be tempted at 30.
It's worth trying, at any rate, but check the numbers before you commit.
I haven't found any problems in any modern browsers but if you do come across some visual glitch, I'd very much like to know.