Image Optimisation: The Fastest Speed Win
By CodexierPublished 4 min read
When a website feels slow, the cause is very often the images: photos uploaded straight from a camera or phone, served at full size to a small screen, all loading at once. Fixing images rarely needs a rebuild, and the result shows up directly in Google's Core Web Vitals. This guide explains the four levers, formats, sizes, loading and the hero image, in plain language.
Why images dominate page weight
A modern phone photo can be several megabytes. The text, code and styles of a typical company page together are often smaller than one such photo. So when a page has a hero image, a few service photos and a team section, the images are the bulk of what the visitor downloads. On mobile data, every extra megabyte is time the visitor spends looking at an empty screen, and Google's Largest Contentful Paint measure is very often timing exactly that hero image.
Formats: WebP and AVIF
| Format | Best for | Notes |
|---|---|---|
| JPEG | Photos, as a fallback | Universal support, but larger files |
| PNG | Graphics that need transparency | Very heavy for photos, avoid for them |
| WebP | Photos and graphics | Much smaller than JPEG at the same quality, supported by all current browsers |
| AVIF | Photos | Often smaller still, slower to encode, supported by current browsers |
| SVG | Logos, icons, simple illustrations | Scales without blur, tiny files |
You do not have to choose one. A well-built site serves AVIF or WebP to browsers that accept it and falls back to JPEG for the rest. Most platforms, image CDNs and frameworks can do this automatically; on WordPress it is usually a plugin or a hosting feature.
Right size for each screen
An image displayed 400 pixels wide on a phone does not need to be 4,000 pixels wide. Responsive images let the browser choose from several prepared sizes. In practice that means:
- Keep the original, but never serve it directly.
- Generate a handful of widths per image, for example for small phones, large phones, tablets and desktop.
- Use the srcset and sizes attributes, or the platform's image component, so the browser picks the smallest adequate file.
- Crop differently for mobile when a wide image becomes a thin strip on a phone.
- Set width and height on every image to prevent layout shift.
Lazy loading and the hero image
Lazy loading tells the browser to wait with images until the visitor scrolls near them. It is one attribute and saves a lot on long pages. The common mistake is applying it to everything, including the large image at the top. That delays the very image Google measures.
Hero image
Load immediately, mark it high priority, keep it as light as possible and consider preloading it.
Images in the first screen
Load normally. Logos and small icons are best as SVG.
Everything below
Lazy-load. Galleries, team photos and footers do not need to arrive before the visitor gets there.
Background images in CSS
Often invisible to optimisation tools. Move important ones into the page as real images.
Checking the result
You do not need to read code to check the work. Run the page through Google PageSpeed Insights on mobile before and after. Look at Largest Contentful Paint and the opportunities list, which names images that are too large or in old formats. In Chrome, right-click an image, open it in a new tab and check its size and file type. Our guide to Core Web Vitals explains the numbers.
- Hero image appears quickly on a phone over mobile data.
- No image file above a few hundred kilobytes on a normal page.
- Images are WebP or AVIF in the browser.
- Nothing jumps as the page loads.
When you do not need help: on Shopify, Squarespace and many modern platforms most of this happens automatically, and the fix is simply uploading sensibly sized originals. If your site still struggles, our performance and SEO work covers images first. Prices are on the pricing page, or book a short call.
Frequently asked questions
Will compressing images make them look worse?
Not visibly, if done right. Modern formats at sensible quality settings are hard to tell from the original on screen. Over-compression shows as blur or blocky edges, which is why the settings should be checked on real pages.
Is a plugin enough on WordPress?
Often it covers formats and compression. Check that it also produces multiple sizes, does not lazy-load the hero image and handles images added by your theme or page builder.
Do image file names and alt text affect speed?
No, but they affect accessibility and image search. Write alt text that describes the image for someone who cannot see it, and use descriptive file names.
How much faster will my site be?
It depends on how heavy the images are today. A page built on raw camera files can change dramatically; a page that is already optimised will change little. PageSpeed Insights before and after gives you the honest answer.
Find out what slows your pages
Share your site address. In 15 minutes we will tell you whether images are the problem and what fixing them involves.
Book a free 15-minute call