Friday, September 19, 2008
Here I have for you a simple image trick to make your pages load faster. This might sound simple but it is something that i notice allot of web developers overlook when adding images to pages, whether it is because they are lazy or just didn't think about it, this is a fact. Every time you web page loads the browser looks for the width and height of an image. This is specified through the attributes width="236" & height="657" which allows your browser to instantly know, through your HTML / XHTML code, how big the image is and where to place it. What happens behind the scenes now is that you browser will load your page text before the graphics. If your graphics do not have width and height attributes set then as the browser reads the HTML / XHTML and gets to one of the images with no attributes, it causes the browser to have to perform a function to work out the actual size of the image, which hence slows down the load time a little bit. So the trick to making you pages load quicker is to make sure that all of your graphics, even the small transparent gifs and bullets have a width and height set. After some testing that I have done on a dial up connection you can really notice the difference. Give it a try.