Helping people with computers... one answer at a time.

There's a mistake that website designers sometimes make that can seriously impact the amount of information downloaded to display even a small photo.

On some websites, even small pictures seem to take forever to download. They're slowly showing up - I can actually see them being drawn from top to bottom. Yet on other sites, pictures that look about the same size show up almost instantly.

Do I have something set wrong? Why so slow?

It's not your problem. This is actually the result of how the website with the slow picture is designed.

In a word: poorly.

I'll explain what's happening, and I'll explain what website authors need to do differently to make your experience as fast as possible.

The fundamental problem

There are two ways that a website can have a small picture - perhaps a thumbnail - displayed:

  • Have a small picture which is downloaded and shown.

  • Have a large picture which is downloaded, resized small by the web browser, and shown.

That's it in a nutshell: downloading a large picture only to show it as a small one takes more time than downloading a pre-sized small version of the same photo.

Depending on the pictures and the speed of your internet connection, that speed difference can be very noticeable.

The wrong way

Here's a thumbnail of a photo that I took and displayed using the "wrong" technique:

Sunset, full image

Refresh (you may need to clear your browser cache if the photo is already visible) and on most internet connections, that photo will take a few seconds to display, filling in slowly from the top to the bottom.

The problem is that it's downloading the full 4288x2848 resolution eight megabyte photo just to display that little 250x166 pixel thumbnail.

That's just wrong. It's a bad experience for website visitors and can even impact your search engine positioning, if that's important to you.

The right way

Here's that thumbnail again, displayed using the right technique:

Sunset, pre-sized thumbnail

That should show up almost instantly. It's only 43 kilobytes in size; that's one-half of one percent the size of original. It may also be a better quality image than the previous example where the browser did the resizing on-the-fly.

Web authors: how to do it right

In short, never use the height and width attributes on images in HTML to resize a picture for display. Use them for other reasons if you like, just never to resize a picture.

Instead, create a separate resized version of the image using almost any image editor. For the example above, I took my sunset_full.jpg and resized the original 4288x2848 pixel image down to 250x166 and saved it as a separate file: sunset_thumb.jpg. I then displayed that thumbnail photo instead of the original.

Using an image editor to create your own thumbnail will also often result in a better quality thumbnail. The browser's resize algorithm may be good, but it's optimized for resizing as quickly as possible. Results may also be different, depending on which browser is being used to view your web page. Photo editing software is optimized to produce quality results.

A great rule of thumb: if you can remove the height and width attributes of your image in the HTML and it still displays correctly, then you're doing it right.

A fringe case where doing it wrong could be right

Here's the image again, doing it the "wrong" way:

Sunset, full image linking to full image

Note that this time it's a clickable image.

Because the browser has already (sloooowly) loaded the full-size image to display the thumbnail, it's already in your browser's cache. The link is coded to display the full-sized image - click it and your browser should show that almost instantly, rather than needing to download all eight megabytes again.

If (and only if) you are certain that people visiting your site will click through to see the full-sized image, then an argument can be made that pre-loading it for the thumbnail might make a little sense.

But just a little.

If there's ever any question, the right thing to do is to display the thumbnail and have it link to the full-sized image, so that the full-sized image is only downloaded if and when someone requests it.

Sunset, thumbnail linking to full image

Article C5045 - January 17, 2012 « »

Share this article with your friends:

Share this article on Facebook Tweet this article Email a link to this article
Leo Leo A. Notenboom has been playing with computers since he was required to take a programming class in 1976. An 18 year career as a programmer at Microsoft soon followed. After "retiring" in 2001, Leo started Ask Leo! in 2003 as a place for answers to common computer and technical questions. More about Leo.

Not what you needed?

7 Comments
Phillip
January 20, 2012 10:47 AM

There is another consideration here. What you say is correct - large pictures take longer to download - but I think you're assuming all web page content is coming from the same server. Many websites rely on multiple servers (ads almost always come from elsewhere), and it's quite possible to use an image warehouse - and if that gets overloaded (far from rare with a free service) even small pics can take a relatively long time to download.

Mary Ann
January 20, 2012 11:21 AM

Thanks for explaining this. This happens on some websites and not others.
I thought it was my DSL connection or Firefox's problem.

SamG
January 20, 2012 2:04 PM

What about the processing speed of the servers? Some have to be older, slower.

It certainly can happen, but for most people the speed of their internet connection is the choke point for speed, and thus the size of the images really impacts most often.
Leo
21-Jan-2012
Jen
January 20, 2012 5:26 PM

It may also be that the top-to-bottom rendering is due to the jpeg file being a baseline type, vs the progressive type, which renders in layers.

That's true, but in general you shouldn't see it. Pictures should download and render quickly.
Leo
21-Jan-2012
Ken
January 21, 2012 8:11 AM

A method I use is to preload the large image, or images, is to load them at the bottom of the home page as 1 pixel x 1 pixel. When done this way the home page will fully load visibly while the status bar may still show the page is loading. This is simply the larger images loading. When the thumbnail that is linked to display the larger photo is clicked the photo is already in the browser cache. The code looks like this: IMG SRC="images/myimage.jpg" WIDTH="1" HEIGHT="1" BORDER="0". (Add the opening and closing brackets which were eliminated here for display purposes.) At worst this will display as a dot at the bottom of the page.

If you use small display photos on each page it is a good idea to preload them from the home page. That way when the page is clicked the photo will instantly appear. There are numerous JavaScript preload scripts available on the Internet that will preload several images.

If search engine results are important to you then I advise against this approach. Search engines take page load speed into account, and pre-loading all those pictures makes the page take FOREVER to load. From an SEO point of view that's a bad thing.
Leo
21-Jan-2012

Jason
January 23, 2012 5:10 PM

Great advice ..thanks

James
February 18, 2012 2:40 AM

I wonder whether you've seen the article about bufferbloat in February CommsACM? I found it interesting, but one can't do much about it; so sadly it's not of much practical help.

Comments on this entry are closed.

If you have a question, start by using the search box up at the top of the page - there's a very good chance that your question has already been answered on Ask Leo!.

If you don't find your answer, head out to http://askleo.com/ask to ask your question.