How to Optimise Images for Web Performance (Without Losing Quality)

How to Optimise Images for Web Performance (Without Losing Quality)

6 May

Guides

Images are the biggest contributor to page weight on most websites - and one of the easiest ways to improve performance without sacrificing quality.

Images are, on average, the single heaviest component of any webpage. According to the HTTP Archive, images account for around 53% of a typical website’s total page weight. That makes them one of the greatest targets for optimisation you have when it comes to improving page load speed.

The good news is that reducing image file sizes doesn’t have to mean sacrificing visual quality. With the right formats, tools, and habits, you can dramatically cut load times without your visitors ever noticing the difference.

Why image optimisation matters for SEO and performance

Image optimisation isn’t a nice-to-have. It directly affects three things that determine how your website performs: page speed, search rankings, and user experience.

Google has made page speed an official ranking factor, and images sit at the heart of its Core Web Vitals framework. The metric most affected by images is Largest Contentful Paint (LCP), which measures how quickly the largest visible element on a page loads. For most pages, that element is an image. Google’s benchmark is 2.5 seconds or less, and oversized images are one of the most common reasons sites fail to hit it.

The impact on user behaviour is just as significant. Research from Google shows that 53% of mobile users will leave a site that takes longer than three seconds to load. A one-second delay in load time has been shown to reduce conversions by 7%. Slow-loading images don’t just frustrate visitors, they can even cost you business.

Well-optimised images also help in Google Image Search, which remains a meaningful source of organic traffic. This is particularly true for e-commerce, food, travel, and lifestyle sites. Images that are properly named, compressed, and tagged can appear in both web and image search results, doubling your visibility for a single asset.

If your site is struggling with slow load times or poor Core Web Vitals scores, image optimisation is often the fastest win available.

Choosing the right image format

The format you save an image in is the foundation of optimisation. Choosing the wrong one can mean carrying unnecessary file weight before you’ve even considered compression. Here’s how the main formats compare.

JPEG

JPEG is the traditional format for photographs and images with complex colour gradients. It uses lossy compression, which means some image data is discarded during saving, but at moderate compression levels, the loss is imperceptible to the human eye. JPEG remains a solid choice for photography-heavy pages when WebP isn’t an option, but it has largely been superseded by more efficient modern formats.

PNG

PNG uses lossless compression, preserving every pixel of data. This makes it the right choice for logos, icons, screenshots, and graphics with transparent backgrounds. The trade-off is file size. PNGs are considerably heavier than JPEGs or WebP for photographic content, so they should only be used where transparency or pixel-perfect accuracy is genuinely required.

WebP

WebP is Google’s open image format, and for most web images it is now the recommended default. Google’s own research shows that WebP achieves 25–34% smaller file sizes than JPEG at the same visual quality, and 26% smaller than PNG with lossless compression.

As of 2026, WebP has 97% browser support, making compatibility concerns largely a thing of the past. If your site is still serving JPEGs and PNGs by default, switching to WebP is one of the most straightforward performance improvements you can make.

AVIF

AVIF is the newest format in mainstream use and offers even better compression than WebP, typically 25–50% smaller file sizes at comparable quality. It’s based on the AV1 video codec and is increasingly supported across modern browsers. For teams focused on cutting-edge performance, AVIF is worth exploring, though browser support is still less universal than WebP. Google’s PageSpeed Insights already flags opportunities to serve images in next-generation formats including both WebP and AVIF.

SVG

SVG (Scalable Vector Graphics) is vector-based rather than pixel-based, which means it scales to any size without quality loss and typically produces very small file sizes. Use SVG for logos, icons, illustrations, and any graphic built from shapes rather than photography.

Quick Format Decision Guide

Photographs and complex images: WebP (or JPEG as fallback)
Logos, icons, graphics with transparency: SVG or PNG
Illustrations without transparency: WebP
Cutting-edge performance priority: AVIF with WebP fallback
Animations: WebP (replaces GIF with much smaller file sizes)

Understanding compression: Lossy vs lossless

Compression is the process of reducing an image’s file size. There are two types, and understanding the difference helps you make better decisions about how aggressively you can compress without visible degradation.

Lossy compression

Lossy compression permanently removes some image data to reduce file size. The key is that at moderate compression levels (typically 70–85% quality in most tools) the removed data corresponds to details the human eye struggles to perceive anyway. Used correctly, lossy compression can reduce file sizes by 60–80% with no perceptible quality difference to your visitors. JPEG and WebP (lossy mode) both use this approach.

Lossless compression

Lossless compression reduces file size without discarding any image data. The original image can be perfectly reconstructed. This approach achieves smaller gains than lossy (typically 10–30% reduction) but is appropriate when pixel-perfect accuracy is essential, such as for product images showing fine detail, or graphics where compression artefacts would be obvious. PNG and lossless WebP use this method.

What quality setting should you use?

For most web images, a quality setting of 75–85% in your export tool or compression plugin strikes the right balance. Below 70%, compression artefacts (blurriness, blockiness, colour banding) become increasingly visible. Above 85%, you’re carrying unnecessary file weight for diminishing visual returns. Always view images at 100% zoom after compression before publishing to make sure the result is acceptable.

Getting compression right takes some trial and error, and the right settings vary by image type and content.

Resizing: Serving the right dimensions

Compression reduces an image’s file size. Resizing reduces its dimensions. Both matter, and they work independently of each other. A common mistake is uploading a 4000px-wide photograph from a camera and relying on CSS to display it at 800px. The browser still downloads the full 4,000px image, you’re just making it appear smaller visually. This wastes bandwidth and slows page load with no visual benefit.

Resize before uploading

Before uploading any image, resize it to the maximum dimensions it will actually be displayed at on your site. If your blog post content column is 800px wide, there’s no reason to upload an image wider than 1600px (which accounts for high-density/Retina displays). For most body content images, 1200–1600px wide is a sensible maximum.

Use srcset for responsive images

The HTML srcset attribute allows you to provide multiple versions of an image at different sizes, letting the browser choose the most appropriate one for the user’s device and screen resolution. A mobile user on a 375px screen shouldn’t download the same image as a desktop user on a 1440px monitor. WordPress generates responsive image sets automatically when you upload images, though the quality of the output depends on your theme and plugin configuration.

Hero images need special attention

Full-width hero images are often the largest element on a page and therefore the most likely cause of a poor LCP score. Keep hero images under 200KB where possible, ideally under 100KB. This usually requires a combination of resizing to the correct dimensions, converting to WebP, and applying moderate lossy compression. For hero images with large areas of flat colour or gradient, consider whether a CSS or SVG solution could replace the image entirely.

File naming and alt text: The SEO side of image optimisation

Technical compression and format choices affect performance. File naming and alt text affect how search engines understand and rank your images. Both matter, and both are frequently overlooked.

File naming

Search engines read image filenames as a signal about what the image depicts. Uploading images with camera-assigned names like IMG_20240812.jpg tells Google nothing. Google’s image SEO guidance recommends using descriptive, keyword-relevant filenames that accurately reflect the image content.

For example, yellow-peach-wordpress-web-design-process.webp is considerably more useful than image3.jpg. Use hyphens to separate words, keep filenames concise, and include your primary keyword naturally where it fits.

Alt Text

Alt text serves two purposes: it describes images to screen readers for users who can’t see them (an accessibility requirement under WCAG), and it gives search engines textual context about an image’s content. Write alt text that is concise and descriptive, typically under 125 characters. Don’t begin with “image of” or “photo of”, as screen readers already announce the element type. For decorative images that add no informational value, use an empty alt attribute (alt=””) so assistive technologies skip them.

Captions

Studies consistently show that captions have extremely high readership compared to surrounding paragraphs. They also provide additional context for search engines. Use captions where they genuinely add value and naturally incorporate relevant terminology.

Getting file naming, alt text, and captions right across an entire site is part of a broader on-page SEO strategy.

Lazy loading: Only load what users actually see

Lazy loading is a technique that defers loading of off-screen images until the user scrolls close to them. Rather than loading every image on the page when it first renders, the browser loads only what’s visible in the viewport and fetches additional images on demand as the user scrolls.

This can dramatically reduce initial page load time and bandwidth usage on image-heavy pages. Native lazy loading is now supported across all major browsers and can be implemented simply by adding the loading=”lazy” attribute to your image tags.

However, be sure to avoid lazy-loading your above-the-fold hero image or any image that appears in the initial viewport without scrolling. Lazy loading of those images delays their rendering, which directly worsens your LCP score. Lazy loading is for images below the fold only.

For WordPress sites, lazy loading is often handled automatically by modern themes or performance plugins like WP Rocket or Perfmatters. Check that your setup is applying it correctly, and that it isn’t being applied to your hero or above-fold images.

Lazy loading is one of several performance techniques that need to be implemented carefully to avoid unintended side effects on Core Web Vitals. If you’re unsure how your site is handling this, our WordPress development team can review and correctly configure your image loading strategy as part of a broader performance optimisation

Tools for optimising images

Whether you prefer manual control or automated workflows, there are solid tools available at every level.

Tools for manual compression and conversion

Squoosh (by Google) is a free, browser-based tool that lets you compress, resize, and convert images to WebP or AVIF with a live before/after comparison. It’s the most useful tool available for understanding the trade-offs between quality and file size.

TinyPNG is another straightforward option for bulk compression of PNGs and JPEGs without needing to configure settings manually.

Tools for checking your current performance

Google PageSpeed Insights analyses any URL and flags specific image issues, including oversized images, opportunities to use next-gen formats, and images that should be lazy-loaded. It’s free and gives you actionable recommendations alongside your Core Web Vitals scores.

Tools for WordPress sites

Plugins like ShortPixel, Imagify, and Smush can automatically compress and convert images to WebP on upload, removing the need to manually optimise every file. They also handle bulk optimisation of existing image libraries, which is useful when migrating a site or cleaning up years of unoptimised uploads.

Tools for Content Delivery

A Content Delivery Network (CDN) stores copies of your images on servers located around the world, so visitors download images from a server geographically close to them rather than from your origin server.

For UK-based businesses with a primarily UK audience, this is less critical than for international sites. However, CDNs also handle format negotiation, automatically serving WebP to supported browsers and JPEG as a fallback, which simplifies your implementation considerably.

Choosing and configuring the right tools for your specific setup can be time-consuming to get right. Our WordPress development services include performance configuration as standard, ensuring your image pipeline is set up correctly from day one rather than retrofitted later.

Final thoughts: Image optimisation is a system, not a one-off task

The most common mistake businesses make with images is treating optimisation as something you do once and forget. In practice, every new image uploaded to your site is an opportunity to either improve or undermine your performance.

Build optimisation into your workflow from the start: choose the right format, resize before uploading, compress appropriately, name files descriptively, and write meaningful alt text.

If you’re starting from scratch, run your site through Google PageSpeed Insights today. It will show you exactly which images are causing performance problems and give you a prioritised list of what to address first. For most sites, even fixing the top five image issues produces a measurable improvement in both speed and Core Web Vitals scores.

For teams managing ongoing content or large image libraries, the right plugins and processes make this largely invisible, as images are compressed, converted, and served correctly without anyone needing to think about it. Getting that infrastructure in place is an investment that pays back with every page that loads faster.

Want a faster, better-performing website?

Image optimisation is one piece of a broader performance puzzle. If your site is slow, scoring poorly on Core Web Vitals, or you’re simply not sure where to start, we can help.

Reach out to us today and let’s talk about how we can build your next well-optimised and lightning-fast WordPress project.

Speed Up Your Website

Share this article

Latest insights

View all