|Ned Batchelder : Blog | Code | Text | Site|
I hate browser-scaled images
» Home : Blog : May 2008
When adding images to a web page, it's good practice to specify their height and width explicitly, like so:
Providing the height and width means that the img tag can be properly laid out before the image itself is loaded, so the page won't jump and wiggle as images are pulled in.
The problem is that you might have the width and height wrong. If you specify them different than the actual width and height of the image, the browser will stretch or squash the image to fit the specified size, but it may not do it well:
Browser check: In Firefox 2 this looks pixellated, in Safari it looks nice. IE 6 and 7 are bad. Firefox 3 is still pixellated, but less so than FF2. For those with superior browsers, here's what that image looks like to the majority:
Sometimes, changing the shape is what you want — this is often done with 1-pixel transparent gifs, or abstract textures. But for genuine images, browser scaling is always bad. It gives the images a noisy scrunched-up look. There's a few reasons the size could be wrong:
Whatever the reason, it can be hard to see that these sorts of mistakes have crept into your site, especially if you are using a newer browser that does a good job scaling images.
If you run this function on page load, bad images will pop out with a red and yellow dotted border. Alternately, you can run it as a Greasemonkey script: scaled_images.user.js. If you have Greasemonkey installed, clicking the link will install it, then you can use the Show Scaled Images menu pick to reveal the bad images.
Chris Pederick's Web Developer Firefox extension also provides an option to outline images with adjusted dimensions, though I find his 1-pixel red border to be too subtle.
However you find the bad ones, do yourself and your visitors a favor and be sure not to browser-scale your images.
tagged: web» 2 reactions