When adding images to a web page, it's good practice to specify their height and width explicitly, like so:

<img src='pix/nedsimpson.png' width='372' height='375'/>

Me as a Simpson, natural size

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:

Me as a Simpson, reduced

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:

Screengrab of bad browser scaling

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:

  • They used to be right, but the artwork changed, and the tag wasn't updated
  • They are hand-coded, and the src attribute is programmatically generated
  • Simple error

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.

This JavaScript function will highlight images which have been scaled in the browser:

function checkImageSizes() {
    // Find images which have width or height different than their natural
    // width or height, and give them a stark and ugly marker, as well
    // as a useful title.
    var imgs = document.getElementsByTagName("img");
    for (i = 0; i < imgs.length; i++) {
        var img = imgs[i];
        if (img.naturalWidth) {
            if ((img.naturalWidth != 1) && (img.naturalHeight != 1)) {
                // For each image with a natural width which isn't
                // a 1x1 image, check its size.
                var wrongWidth = (img.width != img.naturalWidth);
                var wrongHeight = (img.height != img.naturalHeight);
                if (wrongWidth || wrongHeight) {
                    img.style.border = "3px red dotted";
                    img.style.margin = "-3px";
                    img.style.background = "yellow";
                    img.title = "Forced to wrong size: " +
                        img.width + "x" + img.height + ", natural is " +
                        img.naturalWidth + "x" + img.naturalHeight + "!";

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: » 2 reactions


Chris 10:00 AM on 31 May 2008

Problem with "superior" browsers like FF3 and Safari is that they blur deliberately pixelated images. And not just a bit but an awful lot! IMHO browsers should images as they are and if they are falsely scaled due to wrong width/height definition it does not matter if the browser enhances them a bit or they just look plain awful. (I do assume both behaviours related at least a bit so I "mixed them up", maybe they are not at all so just "mixed them up". Anyway annoying...

Jason DeFontes 10:27 AM on 31 May 2008

It would be nice if you could specify the scaling algorithm via CSS.

Add a comment:

Ignore this:
not displayed and no spam.
Leave this empty:
not searched.
Name and either email or www are required.
Don't put anything here:
Leave this empty:
URLs auto-link and some tags are allowed: <a><b><i><p><br><pre>.