Patch Up Those Image Tags
By Randal L. Schwartz
Well, last month's column was a pretty heavy piece of work, clocking in at 312 lines of code, and a correspondingly large amount of descriptive text. This month, I decided to get back to basics and tackle a simple but annoying problem of your typical Web page: making it load faster.
One of the things you can do to make a Web page appear to load faster is to give the browser hints about the ultimate dimensions (width and height) of its images. In modern HTML, the IMG tag accepts width and height attributes that give the pixel dimensions of the image. The browser can use this to leave a hole of the appropriate size while the rest of the HTML is still loading, and even while the image data is being fetched in a separate HTTP transaction. While this doesn't actually make the page load any faster, it seems to reassure users a bit more, since things aren't jumping around for as long.
But to make this work, you've got to insert the actual dimensions into the HTML code. Doing this by hand means downloading the image into your favorite image manipulation tool, checking the information for the picture, noting the dimensions, and then invoking your favorite text editor to hack the HTML. Bleh. No wonder it doesn't get done as often as it should.
However, thanks to the nice Image::Size module (available from the CPAN at www.cpan.org/CPAN.html and other places), I was able to write a program to automatically fetch the image, compute its dimensions, and then edit that data right into the HTML.
