Product Pages That Load Every Colour's Photos

A jacket in eight colours, on a phone

A clothing shop's product page offers a rain jacket in eight colours, shown as small swatches under the main photograph. On the office computer it looks quick, and switching colours is instant.

On a phone over a cellular connection, the page sits nearly empty for a long time. The first photograph appears only after the shop has sent the photographs of every colour.

The theme was built that way on purpose, and the purpose was reasonable. The cost falls on every visitor, including all those who never touch a swatch.

Why the theme loads everything at once

A colour change that waits for a new photograph feels slow, so many themes load every colour's photographs with the page. When a shopper taps a swatch, the picture is already there.

The theme does this by writing all the images into the page's code and hiding all but one. Browsers download images written into the code even when they are hidden.

Many themes also load a large zoom version of each photograph in advance, so the magnified view appears the moment a pointer rests on the product.

What one product page can carry

Count what a page like that asks a phone to download:

• Main photographs for each colour, often three or four angles apiece.
• Zoom images for each of those, several times larger again.
• Thumbnails for the strip of views under the main photograph.
• Swatches for the colour choices themselves.
• Images for related products further down the page.

Eight colours with four views each, plus a zoom image for every view, comes to dozens of large files before the shopper sees the one they came for.

Seeing what the page really downloads

Open the product page on a computer, open the browser's developer tools, choose the network panel, and reload the page with the cache switched off.

The panel lists every file the page requested, with its type and size. Filter it to images and add up what it shows.

Then load the page on a real phone, with Wi-Fi switched off, somewhere with ordinary reception, and note how long the first photograph takes to appear.

If the image list holds colours nobody chose and zoom images nobody asked for, the page is paying in advance for things most visits never use.

Load a colour when it is chosen

The page should arrive with the default colour's main photograph, its thumbnails and the swatches. Nothing else from the gallery needs to load yet.

When a shopper taps another swatch, a short script fetches that colour's photographs and swaps them in, with a small loading sign for the moment it takes.

On larger screens, the script can fetch the other colours' main photographs once the page has finished loading, so switching still feels quick there. Phones should wait for the tap.

Zoom only when someone asks

A zoom image is often the largest file on a product page, and on a phone there is no pointer to rest on anything.

Load it when a shopper taps the photograph or a magnifying glass, or on a computer when the pointer first rests on the image. Show the ordinary photograph enlarged while the sharp one arrives.

Shoppers who want the detail wait a moment for it. Shoppers who do not want it never pay for it.

A worked example

A patio furniture store sells outdoor sofas, dining sets and loungers online, each offered in several frame finishes and a range of cushion fabrics.

Its product pages had grown with each season's fabrics. One sectional came in nine cushion colours, each photographed from four angles, with a zoom image for every photograph.

The theme wrote all of them into the page and hid all but one. Customers sometimes called to ask about a sofa because the page had stalled on their phones.

The developer changed the product template to load the default fabric's photographs and the swatches only, fetch a fabric's photographs when it is tapped, and load zoom images on request.

Each photograph was also saved at a size suited to the product column, with the full-size version kept for zooming. The first photograph now arrives without waiting for the rest of the gallery.

Images sized for each use

A photograph saved 2,000 pixels wide for zooming is far more than a phone screen can show. Sending it as the main image wastes most of the download.

Keep separate versions: a main image sized for the product column, a smaller one for phones where the theme allows it, and the large one for zooming alone.

Most shop platforms can produce these sizes from one upload. The theme simply has to ask for the right one in each place.

Swatches that cost almost nothing

Swatches are sometimes full photographs scaled down by the browser, so each tiny square costs as much as a picture.

Save each swatch as a tiny image of its own, or draw plain colours with the stylesheet. Give each a name in text too, so a shopper who cannot tell navy from black can still choose.

The counter-case

A product in two colours, photographed once each at a sensible size, gains little from any of this. Loading both with the page is a fair trade.

A shop whose visitors mostly use office computers on fast connections may also prefer instant switching, and loading the other colours after the page finishes keeps most of it.

But the decision should come from what the page actually downloads, measured on a phone. The change belongs in the theme's templates, where a developer makes it once for every product.

Lightening a product page

1. Open a busy product page with the network panel showing.
2. Add up the images it downloads.
3. Time the first photograph on a phone.
4. Load the default colour and swatches only.
5. Fetch other colours when they are chosen.
6. Load zoom images only on request.
7. Save each image at a size suited to its use.

Step five removes most of the weight. It turns dozens of downloads into a handful, and the shopper who wants the green jacket still sees it a moment after asking.

Video players weigh a page down in the same way; a January post, six embedded videos on one testimonials page, shows how to hold each one behind a still image until it is tapped.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.