Image optimisation for page speed is the whole fix, usually

Aug 29
3 min read

Updated: 2 days ago

Introduction

A page takes eight seconds to appear on a phone. The owner is told to remove plugins, change hosts and rebuild the site, and quietly decides the whole subject is too complicated to act on.

On most small business websites the actual problem is four photographs straight out of a camera, each several megabytes, displayed in a space a few hundred pixels wide. Fixing that one thing frequently recovers more speed than every other recommendation put together, and it requires no developer.

1. Image optimisation for page speed starts with finding the heavy files

Measure before changing anything.

Open the page, look at the network view in a browser developer tool and sort by size. The list is usually short and unambiguous: a handful of images accounting for most of the page, and everything else rounding to nothing beside them.

2. Serve images at the size they are displayed

The single most common waste.

A photograph four thousand pixels wide shown in a six hundred pixel column forces the visitor to download several times the data they can see. Resizing before upload eliminates that, and costs nothing but a moment in any image editor.

3. Compress properly and stop worrying about quality

The fear that prevents the fix.

Photographs tolerate substantial compression before anybody can see a difference on a screen, and the file often shrinks by three quarters. Compare the two versions side by side once, and the anxiety generally disappears for good.

4. Use a modern format where your platform supports it

A further reduction for little effort.

Newer image formats produce noticeably smaller files at the same visual quality, and most hosted platforms now convert automatically. Check whether yours does before spending time converting files by hand, because you may already have it.

5. Choose the right format for the right image

A mismatch here costs more than compression saves.

Photographs belong in a photographic format; logos, diagrams and anything with flat colour and sharp edges belong in a graphic format or as vector artwork. A logo saved as a photograph is both larger and visibly worse.

6. Load below-the-fold images only when needed

Defer what nobody has scrolled to yet.

Images further down the page can wait until the visitor approaches them, which lets the top of the page appear sooner. Most platforms do this automatically now, but the top image should be excluded so it is not delayed.

7. Watch the background images and sliders

The heavy items people forget to check.

Full-width background photographs and rotating banners are usually the largest files on a site and frequently the least effective element on the page. Testing whether the slider earns its weight is often more valuable than optimising it.

8. Fix the upload process, not just the current files

Otherwise the problem returns.

Whoever adds products, posts or gallery images will upload straight from a phone or camera unless told otherwise. A one-page instruction with a maximum width and a target file size keeps the site fast a year from now.

9. Write alt text while you are in there

A second benefit from the same pass.

Every image needs a short description of what it shows, for people using screen readers and for search engines. Doing it during an optimisation pass is far easier than treating it as a separate project nobody schedules.

Re-check the pages that changed after the work, on a mobile connection rather than a desktop one. Improvements measured on office broadband tend to look impressive and tell you very little about what the visitor on a train experiences.

Conclusion

Find the heavy files first, because on most small sites a handful of images account for nearly all the page weight.

Resize images to the dimensions they are actually displayed at, compress them further than instinct suggests because photographs tolerate it, use a modern format where the platform supports one, match the format to the type of image, defer loading for anything below the fold while excluding the top image, examine whether background images and sliders earn their weight at all, fix the upload process so new files do not undo the work, and write alt text during the same pass.