Most small business sites serve images at camera resolution, compressed lightly, in an outdated format. Fixing those three things typically removes most of the page weight without any visible difference.

Why this is the first thing to fix

On a typical small business page, images account for the large majority of the bytes transferred.

Which means image work returns more than anything else, and it changes no content, no design, and no functionality. The page looks identical and arrives considerably faster.

It is also the failure most likely to be present, because photographs are uploaded straight from a phone or a camera by somebody who reasonably assumed the system would handle it.

The three problems

Wrong dimensions

A photograph from a modern phone is several thousand pixels wide. Displayed in a column eight hundred pixels wide, the browser downloads all of it and discards most of it.

This is the largest single waste and the easiest to fix. Resize before uploading to roughly twice the largest display size, which covers high-resolution screens.

Insufficient compression

Photographs saved at maximum quality carry detail nobody can perceive on a screen. Substantial compression is typically invisible in a photograph while removing a large share of the file.

The exception is images with flat colour or text, such as logos and diagrams, which degrade visibly and belong in a different format entirely.

Outdated formats

Modern image formats produce substantially smaller files at equivalent quality than the older ones most sites still use, and browser support is now broad.

Serving a modern format with a fallback is a settings change on most platforms rather than a project.

Choosing a format

The short version, since the choice is usually obvious.

Photographs belong in a compressed photographic format, modern where possible.

Logos, icons, and diagrams belong in a vector format, which scales to any size without degrading and is frequently smaller than any raster version.

Anything needing transparency works in either a modern format or the older lossless one, and the modern option is usually much smaller.

The common error is a logo saved as a photograph format, which looks slightly soft and is larger than the vector original would have been.

Serving different sizes to different devices

The refinement that matters most for mobile visitors.

A phone does not need the same image a desktop does. Responsive image markup lets the browser choose an appropriate size from several, which avoids sending a large file to a small screen on mobile data.

Most content systems generate these sizes automatically and many themes do not use them properly, which is worth checking rather than assuming.

The related point is specifying dimensions so the space is reserved before the image loads, which prevents the layout shifting under somebody who has started reading.

Lazy loading, done correctly

Deferring images below the fold until they are approached, which is now a built-in browser feature rather than something requiring a script.

The error to avoid is applying it to everything including the image at the top of the page, which delays the first thing a visitor sees and makes the initial impression worse.

The image in the first screen should load immediately and everything below it can wait.

The practical workflow

  1. Resize to roughly twice the display width.
  2. Compress, checking the result at actual size rather than zoomed in.
  3. Rename descriptively before uploading.
  4. Upload, and let the system generate its sizes.
  5. Keep the original somewhere else, backed up.

That last step matters. Compressing is destructive, and a business that compressed its only copy cannot produce a print version or recrop it later.

Originals belong in backed-up storage rather than on the site, which is both a performance and a preservation point.

Fixing what is already there

For a site with hundreds of images already uploaded.

Optimisation plugins exist for most platforms and will compress and convert existing images in bulk. That is the practical answer rather than reprocessing manually.

Before running one: take a backup, and check whether it keeps originals or replaces them, since some do not.

The other bulk win is finding the worst offenders rather than treating everything equally. A page speed test lists the largest files, and typically a small number account for most of the weight.

How much this is worth

Measured honestly rather than assumed.

Record the page weight and load time before, make the changes, and measure again under the same conditions.

For a site serving unoptimised photographs, the difference is usually large enough to be obvious on a phone rather than only in a tool, which is the measurement discipline described in measuring speed in a way that means something.

Frequently asked questions

Why fix images first?

They account for the large majority of bytes on a typical small business page, and reducing them changes no content, design, or functionality.

What are the three problems?

Images at camera resolution rather than display size, insufficient compression, and outdated formats that are larger than modern equivalents at the same quality.

What size should images be?

Roughly twice the largest display width, which covers high-resolution screens without sending several thousand pixels for an eight hundred pixel column.

Which format for what?

Photographs in a compressed photographic format, logos and diagrams in vector, and anything needing transparency in a modern format rather than the older lossless one.

What is the lazy loading mistake?

Applying it to the image at the top of the page, which delays the first thing a visitor sees and makes the initial impression worse.

What should I keep?

The originals, backed up elsewhere. Compression is destructive, and a business that compressed its only copy cannot produce a print version later.

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.

Photographs uploaded straight from a phone?

We resize, compress, and convert what is already there, which is usually the largest single speed improvement available.

Start a Conversation