Why asking the browser to resize your images might not be a good idea

If you've played around with web design, you're probably aware that the "img" tag includes an attribute that can tell the browser to resize the image that you send it:

"If the values specified in the width and height attributes are different than the actual dimensions of the graphic, the browser will resize the graphic to match the specified dimensions.  If you specify a percentage value for width and height, the browser will resize the image to the desired proportions."  --Jennifer Niederst, Web Design In a Nutshell, O'Reilly, 1999

Convenient, but not always a good idea.  Now read on...

There are a couple of reasons that you might want to think twice before doing this.

• Download time: You can tell the browser to shrink a big image, but the whole thing still has to be downloaded. (Some folks say that with high-speed connections that's no longer a problem, but a good designer always considers the time it takes to load and build his pages.)
• How it looks: Some browsers (mine! mine!) do a poor job of resizing. Sometimes the result gets ugly.
• Room on the server: Big images take up more space, which means you use up your allocation sooner. 'Nuf said!
  

Here's a screenshot (cropped only) from Boo's page as seen on my 0.9 browser.

What's that on the sofa?

If you go look at the page source, you find

<IMG [...snip...] src="http://tres.mee.nu/images/DSC00008.jpg" width=200>

That width value is telling the browser to render the image 200px wide. (Which is what it did.)

The problem is the original image isn't 200px wide. When I clicked "view image properties," I found out that the original is actually 640px wide by 480px wide. So the browser had to shrink it to about 31% of its original size. And it didn't do a very good job.

What to do? Fortunately there are a couple of solutions.

The easiest is to use the one our host has been kind enough to provide us. On the "File Info" page (the one with the thumbnail for the image) you'll find an "Image Operations" menu list. If you open it, you'll see that it offers all kinds of wondous things! [Link from Pixy's personal site. I know he duplicated it somewhere on mee.nu, but today I couldn't find it. Sometimes my search skills suck.]

What you want is the "Resize" option. Select it, then type in the size you want to end up with, and click the "Go" button. That's it! (Of course you've modified the original, so you wouldn't want to do this if it's the only copy of a Treasured Family Photo. But then you wouldn't store the only copy on someone else's server anyway, would you?)

The alternative is to Do It At Home, then upload the result. No problem if you own photo editing software. If you don't have anything beyond MS Paint, may I suggest trying out The Gimp, a free-as-in-beer image manipulation program (includes edit and paint functions, along with some really effective color-balance and image-enhancement tools) that will probably be overkill, but did I mention that it's free? It's what I've been using for all of the graphics around here, including creating the category icons. For a Windows version download, start here.

For demonstration, I stole Boo's image ;-) and used The Gimp to resize and tweak it a bit. Here's the result:

Tortoiseshell in the sunbeams. Ain't she a cutie!
-----
Update:  Probably should say that I didn't do this to pick on Boo.  I run into the image-resize problem all over the web, and I'm sure I'm not the only one who's affected.

Posted by: Old Grouch in Beta at 17:31:45 GMT | No Comments | Add Comment
Post contains 589 words, total size 5 kb.