How to Optimise Images for SEO and Page Speed

Images are one of the most common causes of slow-loading websites, and a slow website is bad for both user experience and search engine rankings. Google’s Core Web Vitals use real-world loading performance as a ranking signal, and oversized images are among the most frequent culprits when pages fail those assessments.

Image optimisation covers several distinct areas: file format, compression, dimensions, delivery, and metadata. Getting all of these right gives you a site that loads fast, ranks well in image search, and provides context to search engines about your visual content.

File Format and Compression

The choice of file format has a significant impact on file size. JPEG is suitable for photographs and complex images with many colours. PNG is better for logos, icons, and images with transparency. WebP is a modern format supported by all major browsers that achieves smaller file sizes than both JPEG and PNG at equivalent quality — it should be your default for web use.

AVIF is an even newer format that achieves better compression than WebP but has slightly lower browser support. For maximum compatibility with meaningful compression gains, WebP is the pragmatic choice in 2025.

Compression removes data that isn’t necessary to reproduce the image accurately. Tools like Squoosh, TinyPNG, and Imagify allow you to compress images before upload. A well-compressed JPEG might drop from 800KB to 80KB with no perceptible quality loss — a 90 per cent reduction that dramatically speeds up page loading.

Scale images to the dimensions at which they will be displayed. Uploading a 4,000-pixel-wide photograph to display it at 800 pixels wastes bandwidth and processing time. Your images should never be significantly larger than the space they fill on screen.

Lazy Loading and Modern Delivery

Lazy loading defers the loading of images that are not visible in the browser’s current viewport. Instead of loading every image on the page when a user first lands, only the images visible above the fold are loaded immediately. Images further down the page load as the user scrolls toward them.

Adding the loading="lazy" attribute to img tags is supported natively in all modern browsers and requires no JavaScript. For the most important above-the-fold image (typically a hero image), use loading="eager" or omit the attribute — you want that image to load as fast as possible.

Content delivery networks (CDNs) serve your images from servers geographically close to the user, reducing the time data has to travel. Many modern hosting providers and image optimisation services (such as Cloudflare or imgix) include CDN delivery as standard.

Alt Text and SEO Metadata

Alt text (alternative text) is the written description of an image that appears if the image fails to load and is read aloud by screen readers for visually impaired users. For SEO, alt text is also the primary way search engines understand what an image depicts.

Write alt text that accurately describes the image content. Include relevant keywords naturally — not as a keyword-stuffing exercise, but because a description of a relevant image will naturally contain the terms you care about. "Web designer in Norwich reviewing a client’s website on a laptop" is good alt text. "web design Norwich SEO Norwich web development" is not.

File names matter too. An image saved as IMG_4892.jpg tells Google nothing. web-design-norwich-team.jpg provides useful contextual information. Rename your images before uploading them. At Xpose in Norwich, we review image metadata and alt text as part of every site build and SEO audit, because these details are consistently overlooked and consistently make a difference.