Images Uploaded at Camera Resolution

The most common performance problem there is

Not hosting, not code, not the number of add-ons.

Photographs, uploaded exactly as they came off a phone or a camera, displayed at a fraction of their actual size, and downloaded in full by every visitor.

It accounts for more slow small business websites than every other cause combined, and it is the only major performance problem that a non-technical person can fix completely in an afternoon.

What a phone photograph actually weighs

A modern phone produces images around four thousand pixels wide, at file sizes commonly between three and eight megabytes.

The space it occupies on your website is typically eight hundred pixels wide, and often much less on a phone screen.

So you are sending five times more image than can possibly be displayed, and the visitor's device throws away the surplus after downloading all of it.

A gallery of twelve such photographs is a page weighing perhaps fifty megabytes, which is not a website, it is a download.

Why the page still looks fine to you

This is the reason the problem persists in businesses that genuinely care about their site.

You are testing on a desktop machine, on a fast connection, in the same city as your server, with the images already cached from the last time you looked.

Under those conditions a fifty megabyte page loads acceptably and everything seems in order.

The customer is on a phone, on mobile data, possibly with two bars, and is having a completely different experience that you have no way of observing from your desk.

What it costs

Visitors leave. Not dramatically and not in a way you can attribute, but steadily, and the ones you lose are disproportionately the mobile ones who were out and looking for a supplier now.

It also costs the visitor money directly, since a page that pulls fifty megabytes is consuming a measurable share of a monthly data allowance to show somebody a photograph of a completed driveway.

And it wastes your hosting capacity, which matters on shared plans where a busy day of heavy pages affects everything else you run.

The sizes that are actually right

• Full-width banner images: around 2000 pixels wide, no more.
• Content and gallery photographs: 1200 to 1600 pixels wide.
• Thumbnails and small illustrations: 400 to 800 pixels.
• Logos and simple graphics: a vector file where possible.
• Target file size: under 200 kilobytes for most photographs.

The two-thousand pixel ceiling covers high-resolution screens with room to spare and is far below what a camera produces.

Compression, and how far to take it

Saving a photograph for the web involves a quality setting, and the useful range is narrower than people expect.

Somewhere around seventy to eighty percent quality is where most photographs sit: substantially smaller, with no difference a visitor would ever notice.

Below about sixty the damage becomes visible, particularly in skies, skin tones, and flat areas of colour.

Newer image formats can do noticeably better again for the same visual quality, and browser support for them is now broad enough to be practical, though it is worth keeping a standard version available as a fallback.

A worked example

A landscaping company had a portfolio page with twenty-two photographs of finished projects.

Every one had been uploaded straight from a phone. The page weighed ninety-four megabytes and took over forty seconds to become usable on a mobile connection.

The owner had never seen this, because on the office machine the page had been cached since the day it was built.

Resizing all twenty-two to 1400 pixels wide and saving at seventy-five percent quality took about ninety minutes including re-uploading.

The page came down to just under four megabytes, a reduction of roughly ninety-six percent, and loaded in about four seconds on the same mobile connection.

Printed side by side, the before and after images were indistinguishable.

Fixing a library you already have

For a site with hundreds of existing images, doing them by hand is not realistic.

Bulk resizing tools will process an entire folder to a maximum width and quality setting in one pass, and most photo software on a normal computer will do this without anything extra installed.

There are also add-ons that compress what is already on a site in place, which are convenient and worth checking carefully, since some replace originals irreversibly.

Whichever route you take, keep the untouched originals somewhere off the website. You will eventually want a full-size version of something for print, and a compressed web copy cannot be turned back into one.

Preventing it from happening again

The fix is a rule rather than a tool, because the problem is a habit.

Nothing goes onto the site straight from a camera. Every image passes through a resize step first, whatever software you find convenient.

If several people upload content, write the rule down: maximum width, maximum file size, and where the originals are kept.

It takes about thirty seconds per image and it prevents the problem returning over the following three years.

The counter-case

Some sites genuinely need large images, and the rule should bend for them.

A photographer's portfolio, a gallery selling prints, a manufacturer whose customers zoom in on component detail, or anything where the image is the product rather than an illustration of it.

Even then the answer is rarely a raw camera file. It is a deliberately larger web version, served only where the detail is needed, with a smaller version used everywhere else on the site.

The principle holds: send the size that will be looked at, not the size that came out of the camera.

The procedure

1. Test your own site on a phone, on mobile data, with the cache cleared.
2. Find the heaviest pages, usually galleries and the homepage.
3. Copy the originals somewhere safe first.
4. Bulk resize to a maximum of 2000 pixels wide.
5. Save at around 75 percent quality and check the result.
6. Re-upload and re-test the same page.
7. Write the rule down for whoever uploads next.

An afternoon, once, for a change most visitors will feel immediately even though none of them will mention it.

What you call the files matters too, covered in naming image files before you upload.

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.