When you look at an image on a web page, the viewable size and the actual size can be a confusing distinction. The actual size is the number of bytes in the image, or how much space the file would use on a hard drive. The viewable size is determined by HTML tags which allow you to alter the dimensions of an image without affecting the actual size, even though it looks smaller. If you use the <img> tag to reduce the dimensions of an image, you’re unnecessarily increasing the size of your page.
Unless you have a good reason (image spacers for example) you should use the actual dimensions of an image in the <img> tag. The purpose of the height and width attributes is to help browsers determine the layout the page. If you use larger dimensions than the image, it will look distorted and pixellated. If you use smaller dimensions it will appear smaller and show less detail. What you’re doing is using the web browser to modify the way the image appears. The file on the web server remains the same, no matter how it’s made to look.
The speed at which your page loads is determined by the actual size of the images. You could display a 1600×1200 image at 1600×1200 or 1×1 and it would take the same time to load. To determine if an image is being displayed at its actual size, most web browsers have the ability to view the actual dimensions (try right-clicking on the image). If that doesn’t work, you can load the URL of the image. Without the HTML modifying the dimensions you will be able to see the the actual image and its actual size.
I was reminded of this unfortunate blunder by an email from brndesigns.com, asking me to sell their products. I looked at their web site to see what they had to offer and it was soon apparent that the images were much larger than they appeared. The four images at the lower part of the page were each 1600×1200, but displayed at 300×250. Here is a modified version of the email I sent to them.
Assuming a normal dial-up user gets around 3k/s (which is generous in some cases), your page would take more than 20 minutes to load. Please, for the love of all that is holy, reduce the size of your images. I’m not talking about the dimensions, but the actual size of the file. If you make the size of the image the same as the size you’re displaying, it will vastly improve your site and appear the same.
For instance, the flag.jpg is 154k with dimensions of 540×360. You are displaying it at 162×108. I took the liberty of reducing it to the dimensions at which it is displayed, making it 4.5k. That is a mere 3% of the original size.
The other four images are a whopping 837k each. They should first be converted to the jpeg format and then have the size reduced. I did that on the first one and it was 14k, only 1.6% of the original size.
Before the changes
Four 837k images
One 154k image
Text 8k
Total: 3510k
After the changes
Four 14k images
One 4.5k image
Text 8k
Total: 68.5k
The changes reduce the size of your page by a full magnitude without any other optimizations. By following my suggestion, your page would look exactly the same as it does now, but load in seconds rather than minutes.
Let me know if you would like any assistance.
Web sites that suffer from this inexcusable affliction show no regard for dial-up users. I can’t imagine why people would do this on purpose, so I email them, assuming they don’t realize the grave error they have made. I sent the above email on November 8, 2002 and in keeping with the existing disregard for their customers, they have yet to fix the problem. This is one situation where ignorance is most definitely not bliss.