Image optimisation is the work of making each image on a website as small and quick to load as possible without visible loss of quality, and making sure the browser loads it at the right size and at the right moment. It covers dimensions, file format, compression and the HTML that delivers the image.
How image optimisation works
There are four main levers, and most slow pages get at least one of them wrong.
Dimensions
A photo straight from a phone is often around 4,000 pixels wide and several megabytes. If the page shows it at 800 pixels wide, the visitor downloads far more than they can see. Resize images to the largest size the layout actually uses, then let the site offer smaller versions to smaller screens with responsive image markup (the srcset and sizes attributes), so a phone never downloads the desktop version.
Format
Modern formats produce much smaller files than JPEG and PNG at similar quality. WebP and AVIF are supported by all current major browsers, and WordPress, Shopify and most image CDNs can convert uploads automatically. SVG suits logos and icons, because it is drawn from code rather than pixels and stays sharp at any size.
Compression
Lossy compression discards detail the eye barely notices; lossless compression keeps every pixel but saves less. For photographs, a moderate lossy setting is usually indistinguishable from the original on screen. Judge by eye on a real screen rather than trusting the number on a slider.
Delivery
Images further down the page can use lazy loading, so they only download as the visitor scrolls towards them. The main image at the top should not be lazy loaded, because it is often the element measured by Largest Contentful Paint; it can be given loading priority instead. Every image should carry width and height attributes, so the browser reserves space and the layout does not jump as images arrive. A content delivery network serves files from servers close to the visitor.
Why it matters
Images are usually the heaviest part of a web page, so they are usually the first place to look when a page is slow. Speed matters to customers before it matters to rankings: someone on a train out of Paddington with a patchy signal will give up on a gallery page that shows nothing for several seconds. Google’s Core Web Vitals measure loading speed and layout stability, and badly handled images hurt both.
It matters most where there are many images at once: product listing pages on an online shop, portfolio galleries for builders and interior designers, property listings for estate agents, and menus with photographs for restaurants.
Common mistakes
- Uploading full-size camera images and letting the theme shrink them on screen.
- Lazy loading every image, including the hero, which delays the one that matters most.
- Leaving out width and height attributes, so the page shifts as images load.
- Saving photographs as PNG, which produces very large files.
- Installing two or three image plugins that each compress and convert, creating duplicate files and conflicts.
- Compressing so hard that product photos look blotchy, which costs sales on an online shop.
How to act on it
Test your main templates (the homepage, a service or product page, a blog post) in PageSpeed Insights and note the image-related suggestions and which element is the Largest Contentful Paint. Then fix things at the source: set a sensible maximum upload size, switch on automatic WebP or AVIF conversion, make sure responsive sizes are generated, and keep lazy loading off the first image. Batch-compress the existing media library rather than editing images one at a time, then re-test and compare.
If the problem lies in the theme, the page builder or the hosting rather than the images themselves, it becomes technical SEO work on the site’s templates and set-up.