Technology in terms you understand. Sign up for the Confident Computing newsletter for weekly solutions to make your life easier. Click here and get The Ask Leo! Guide to Staying Safe on the Internet — FREE Edition as my thank you for subscribing!

Why do some website pictures display so slowly?

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 4288×2848 resolution eight megabyte photo just to display that little 250×166 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 4288×2848 pixel image down to 250×166 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

Subscribe to Confident Computing! Tech problem solving & safety tips & a weekly confidence boost in your inbox every week.

I'll see you there!

10 Reasons Your Computer is Slow

Slow Computer?

Speed up with my special report: 10 Reasons Your Computer is Slow, now updated for Windows 10.

NOW: name your own price! You decide how much to pay -- and yes, that means you can get this report completely free if you so choose. Get your copy now!

7 comments on “Why do some website pictures display so slowly?”

  1. 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.

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

    Reply
  3. 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
    Reply
  4. 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
    Reply
  5. 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

    Reply
  6. 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.

    Reply

Leave a reply:

Before commenting please:

  • Read the article.
  • Comment on the article.
  • No personal information.
  • No spam.

Comments violating those rules will be removed. Comments that don't add value will be removed, including off-topic or content-free comments, or comments that look even a little bit like spam. All comments containing links and certain keywords will be moderated before publication.

I want comments to be valuable for everyone, including those who come later and take the time to read.