This post is meant for webmasters, and it addresses a startlingly common problem: images included on pages and “resized” only in HTML.

The basic tag to include an image, of course, is <img src="something.jpg">. That will include something.jpg on the page.

But say that the image is 1600×1200 pixels (2.1 megapixels: big enough to fill your screen and then some, at least for most people). This is way too big to put on your webpage. So what do people do? They do something like <img src="something.jpg" height="480" width="640"> to resize it. This is a very, very bad way of doing it.

The problem is that this shows a fundamental misunderstanding of what the height and width attributes do. They’re essentially ‘hints’ for the browser. The web browser, when it sees an image in your HTML, will download the whole image. In this case, it’ll download your 1600×1200 image, which is probably about 500kB in size. (God help us if you have a whole series of these photographs on your page.) When it sees a mismatch between the specified height and width attributes, the browser will do a very rudimentary (read: very crappy) resize. So not only are you wasting a ton of bandwidth unnecessarily (which also makes your page load very slowly), but the end product is images that look horrible.

Instead, open the image up in your editor of choice. Photoshop CS3 is wonderful, but those of us who can’t justify spending more than $500 on image editing software may prefer a free tool like Paint.NET. Resize the image to the size you desire, and include that image, newly resized, on your page.

You’ll see multiple improvements: your site will use less bandwidth, your pages will load much faster, and your images will look much better. (Also: I’d encourage you to simply omit the height and width attributes if you’re not sure what you’re doing. Writing perfect HTML, you’d set them to the image’s native dimensions, but so many people screw it up that it’s probably safest to just omit them. Every browser I’ve ever used has handled this seamlessly.)