Picture Resizing

Long Page Loading Times?

One of my biggest gripes with the "what you see is what you get" (WYSIWYG) web page editors is that they encourage a practice of using an original image without regard to size and corrupting the purpose of the height and width attributes of the image tag.

Have you ever noticed that a web page full of pictures, logos, and advertising takes longer to fully display than a page with mostly words or text? This is because the files that store pictures are much larger than the files used to generate a plain webpage.

So what does image size have to do with page loading times? Web pages are comprised of text and images. The file sizes of the two will vary greatly. On average the code that generates the text for the pages of this site are around 10kb. The banner at the top of this page is over 400kb. You don't have to understand the different measurements used in computing file sizes to realize that something 400kb is 40 times larger than something that is 10kb.

The Image Tag

The image tag has the attributes width and height. The intent of those attributes is to set aside enough space for the image to display properly on the page. The WYSISWYG editors and newbie webmasters often misuse these attributes to resize their images.

Why this matters.

Let's suppose we have a fairly large picture with a file size of 600kb and the picture is 500 pixels wide by 400 pixels tall. But, we will be using the picture on our webpage so we want it to actually display at a much smaller size like 100 pixels by 80 pixels.

The new webmaster and the WYSIWYG editors will simply use HTML to resize the picture with the following code:

<img src="myimage.jpg" width="100" height="80">

There is absolutely nothing wrong with that line of code from a programming point of view. Where the code goes wrong is when the webpage is loaded.

The problem is that when this page is displayed, the full-sized picture is downloaded and then resized. So, instead of waiting for the significantly smaller image to load, the site visitor actually waits for the full-size image to download and be resized.

So what, you ask. Consider a site I recently visited. The site's owner was an artist who was displaying her latest works. After several minutes of waiting, none of her pictures had finished loading. Remember, you have around 10 seconds or less to get a website visitor to stay on your website. Several minutes? You are inviting people to leave your site.

The Good News

The good news here is that you can control page load times by controlling your image file sizes. The smaller the file, the faster the entire page loads.

Take the time to create a smaller image rather than rely on the code to do it for you.

Beyond taking that 500x400 image and making it 100x80, experiment with the image quality settings on your graphics program. Many images can be saved at lower resolutions without degrading the image quality. The lower the resolution, the smaller the file size.

If my artist friend would create smaller images of her artwork she will see much more success with her website. She could always offer the site visitor the option to view the 'full-sized' image. Someone who knows they are going to view a full-sized and higher quality image is going to be more willing to wait for it to load. Someone visiting your website for the first time is probably not going to be willing to wait 4 or 5 minutes for a whole series of full-sized images to load and be resized to much smaller versions.

The Bottom Line on Image Size

Resize your pictures yourself. Do not let the HTML code do it for you, otherwise you will dramatically add to the time your webpage takes to load. The longer the page takes to load, the quicker you will turn away people who visit your website. You work hard to get people to visit your website. Why risk them leaving simply because your images take too long to load?

Be sure to check out Help For Web Beginners other HTML & CSS Tutorials.