Why do some website pictures display so slowly?

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:

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:

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:

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.