How to optimise your images for the web

Most website visitors expect a page to load in two seconds or less. Many will leave before the three-second mark. If your site is slow, oversized images are often the first thing to look at. They are one of the most common causes of poor load times, and one of the most fixable.

Reducing image file sizes does not mean accepting blurry photos or washed-out graphics. With the right approach, you can cut load times significantly while keeping your images looking sharp. This post covers the formats, tools and techniques that make the biggest difference.

Why image file size matters

Every image on a page adds to the total amount of data a visitor’s browser has to download. On a page with a dozen uncompressed photos, that can easily run into several megabytes. Even on a fast connection, that adds up. On mobile, where connections are less reliable, the impact is worse.

Page speed also affects search rankings. Google has used page speed as a ranking signal since 2010, and its Core Web Vitals metrics place particular weight on how quickly the largest visible element loads. Oversized images directly affect that score.

Choosing the right file format

The format you save an image in has a significant effect on file size. The three formats you will encounter most often each suit different types of content.

JPEG: The standard format for photographs and images with lots of colour variation. JPEG uses lossy compression, meaning some detail is discarded to reduce file size. At quality settings of 70–80%, the difference is rarely visible to the human eye.
PNG: Best for images that need a transparent background, such as logos or icons. PNG uses lossless compression, so file sizes tend to be larger than JPEG. Avoid using PNG for photographs.
WebP: A modern format developed by Google that produces smaller files than JPEG or PNG at comparable quality. Browser support is now widespread, and most image optimisation plugins will convert to WebP automatically. If you are not already serving WebP images, it is worth switching.
SVG: A vector format suited to logos, icons and simple illustrations. SVG files scale to any size without losing quality and are often tiny in file size. They are not suitable for photographs.

Resizing before you upload

Uploading a 4,000-pixel-wide photograph to a site where it will display at 800 pixels wide wastes bandwidth on every page load. The browser downloads the full-size file and then scales it down. The visitor pays the cost in loading time; they get no benefit in image quality.

Before uploading, resize images to the largest dimensions they will actually appear at on your site. For most blog post images, that is somewhere between 1,200 and 1,600 pixels wide. For thumbnails, much less. A tool like Squoosh lets you resize and compress images in the browser before they ever reach your media library.

Tip: WordPress generates several image sizes automatically when you upload a file. If your theme only ever displays images at one size, those extra files still take up storage. The Regenerate Thumbnails plugin lets you clean up unused sizes.

Compression: lossy vs lossless

Compression reduces file size by removing data from the image. There are two approaches, and which one you use depends on the image type.

Lossy compression permanently removes some image data to achieve smaller file sizes. For photographs, a quality setting of around 75–80% typically produces files that look identical to the original at a fraction of the size. Going lower than 60% usually produces visible artefacts.

Lossless compression removes redundant data without discarding any image information. The file gets smaller, but the image is pixel-for-pixel identical to the original. This is the right approach for PNG files, logos and anything where sharpness at the pixel level matters.

Plugins that handle optimisation automatically

If you are running WordPress, you do not need to manually compress every image before uploading. Several plugins handle this in the background, compressing images as they are added to your media library and converting them to WebP where supported.

The most widely used options include ShortPixel, Imagify and Smush. Each offers a free tier with monthly compression limits, and paid plans for higher-volume sites. They all support bulk optimisation of existing media libraries, which is useful if you have years of uncompressed uploads sitting on your server.

For WordPress sites that need more control over performance, our guide to serving AVIF images in WordPress covers a newer format that can reduce file sizes further still.

Lazy loading

Lazy loading tells the browser to defer loading images that are not currently visible on screen. Instead of downloading every image on a page when it first loads, the browser only fetches images as the visitor scrolls down to them. This reduces the initial load time, particularly on long pages with many images.

WordPress has supported native lazy loading since version 5.5, adding the loading="lazy" attribute to images automatically. If your theme or page builder overrides this, check that lazy loading is still active. Most caching and performance plugins include a setting to confirm or re-enable it.

Alt text and SEO

Alt text is the text description attached to an image. It serves two purposes: it tells search engines what the image shows, and it provides a text alternative for visitors using screen readers or browsing with images disabled.

Good alt text describes the image accurately and concisely. It does not need to be a sentence; a short phrase is enough. Avoid stuffing keywords into alt text where they do not naturally fit. Search engines have become good at identifying that pattern, and it does not help rankings. Write for the person who cannot see the image, and the SEO benefit follows naturally.

Image file names also matter. A file named DSC_00472.jpg tells a search engine nothing. Renaming it to something like wordpress-dashboard-screenshot.jpg before uploading gives the image a small but real SEO advantage.

Keeping your images well-optimised is one part of a broader approach to site performance. For more on what affects page speed, the post on Core Web Vitals covers the metrics Google uses to measure user experience, and our guide to WordPress caching explains how server-side performance fits into the picture.

Resizing images to the right dimensions, compressing them before upload and letting a plugin handle ongoing optimisation will take most sites a long way. The gains are often larger than people expect, and the work involved is minimal once the process is in place.

If your site runs on WordPress, our WordPress hosting plans are built with performance in mind, including tools that support faster image delivery as part of the wider stack.

If you have questions about image performance or site speed, the UWH team is happy to help.