Image Optimisation Explained: Why Your Photos Could Be Slowing You Down

Images are almost always the largest files on a webpage. A single unoptimised photograph uploaded straight from a camera or phone can be several megabytes in size, which means it takes far longer to download than everything else on the page combined. Most visitors never notice this consciously. They simply experience the page as slow, and many of them leave before it finishes loading.

Image optimisation is the practice of making images as small as possible in file size while keeping them as visually good as necessary for their purpose. It is one of the most consistently flagged issues in Google Lighthouse reports, one of the most common reasons for poor Core Web Vitals scores, and one of the most accessible performance improvements a website owner can make without deep technical knowledge.

This article explains the key concepts clearly, covers the practical steps, and addresses the most common mistakes people make when handling images on a website.

Why Image File Size Matters So Much

When a visitor loads a webpage, the browser downloads everything on it: HTML, CSS, JavaScript, fonts and images. Most of these files are small. A well-written stylesheet might be 30 to 50 kilobytes. A typical JavaScript file might be similar. An unoptimised photograph from a modern smartphone, however, can easily be 4 to 8 megabytes, sometimes more.

On a fast broadband connection, that difference is noticeable but manageable. On a 4G mobile connection with variable signal, or a slower rural broadband connection, it can mean a page takes 5 to 10 seconds to show its main image. That is long enough for a large proportion of visitors to give up and go elsewhere.

The connection to Core Web Vitals

As covered in the Core Web Vitals and Google Lighthouse articles on this blog, Largest Contentful Paint measures how long it takes for the main visible element of a page to load. For most pages, that element is the hero image or the main featured photograph. An unoptimised image in that position increases LCP time, which reduces the performance score and contributes to lower search rankings.

Understanding Image File Formats

Choosing the right file format is the first decision in image optimisation, and it makes a substantial difference to file size before any compression is applied.

JPEG

JPEG is the standard format for photographs and complex images with many colours and gradients. It uses lossy compression, meaning some image data is discarded to reduce file size. At moderate compression settings, the quality loss is imperceptible to most people. JPEG files are widely supported across all browsers and devices.

PNG

PNG uses lossless compression, meaning no image data is discarded, and the quality is perfectly preserved. This makes it the right choice for pixel-perfect images, such as logos, icons, screenshots, and images with text. However, PNG files are typically much larger than equivalent JPEGs for photographic content, so using PNG for photographs is a common and costly mistake.

WebP

WebP is a modern image format developed by Google that produces significantly smaller file sizes than JPEG or PNG at comparable quality. A WebP image is typically 25 to 35% smaller than an equivalent JPEG. WebP supports both lossy and lossless compression and is now supported by all major browsers. For most web use cases, WebP is the best choice, and most image optimisation tools can convert to it automatically.

AVIF

AVIF is a newer format that produces even smaller files than WebP at comparable quality. Browser support is strong and growing, and it is the format recommended by Google’s Lighthouse tool where available. For new website builds, AVIF is worth considering alongside WebP, with WebP as a fallback for browsers that do not yet support AVIF.

SVG

SVG is a vector format, meaning it describes shapes mathematically rather than storing pixel data. It is the correct choice for logos, icons, illustrations and any image that needs to scale to any size without losing quality. SVG files are typically very small and can be animated with CSS. They are not suitable for photographs.

The Difference Between Display Size and File Size

One of the most common image mistakes on small business websites is the disconnect between the size an image is displayed on screen and the size of the file being downloaded.

A hero image displayed at 1200 pixels wide on a desktop screen does not need to be a 4000-pixel-wide file. The browser downloads the full 4000-pixel file, then scales it down to display it at 1200 pixels, wasting the bandwidth spent downloading the extra pixels.

The principle is simple: images should be sized to their actual display dimensions before being uploaded, not left at their original camera resolution and scaled by the browser.

Responsive images and srcset

The complication is that a responsive website displays the same image at different sizes on different screen sizes. A hero image might be 1200 pixels wide on a desktop, 768 pixels wide on a tablet, and 390 pixels wide on a phone. Downloading a 1200-pixel file on a phone screen is wasteful.

The srcset attribute in HTML solves this by allowing multiple versions of an image at different sizes, with the browser selecting the most appropriate version for the current device and screen.

<img src=”hero-800.jpg”

     srcset=”hero-400.jpg 400w, hero-800.jpg 800w, hero-1200.jpg 1200w”

     sizes=”(max-width: 600px) 400px, (max-width: 900px) 800px, 1200px” alt=”…”>

Most modern WordPress themes handle this automatically by generating multiple image sizes when a file is uploaded. However, the original uploaded file still needs to be a reasonable size, not a full-resolution camera file; otherwise all the generated sizes start from an unnecessarily large source.

Compression: How Much Is Enough?

Compression reduces file size by encoding image data more efficiently, either losslessly (no quality change) or lossily (some quality reduction in exchange for a smaller file).

For JPEG and WebP images, a quality setting of around 75-85% is a reasonable starting point for most web use. The quality loss at these settings is generally imperceptible on a screen, but the file size reduction compared to an uncompressed or lightly compressed file is significant.

The right approach is to compress until quality degradation becomes perceptible, then back off slightly. The exact setting varies by image content: a photograph of a person’s face may show compression artefacts at lower quality settings than an image of a landscape or a flat product shot.

Tools for compressing images

• Squoosh (squoosh.app) is a free, browser-based tool from Google that allows side-by-side comparison of original and compressed versions and supports all major formats including WebP and AVIF.
• ImageOptim is a Mac application that batch-processes images and applies lossless compression without any quality reduction.
• ShortPixel and Imagify are WordPress plugins that automatically compress images on upload and can convert to WebP.
• Cloudinary and imgix are cloud-based image management services that handle compression, format conversion, and responsive sizing automatically, making them suitable for larger or more complex sites.

Lazy Loading

Lazy loading is a technique that delays the loading of images that are not currently visible on screen. Instead of downloading every image on a page immediately, the browser only downloads images as they scroll into view.

For pages with multiple images, particularly long pages or image-heavy galleries, lazy loading can significantly reduce initial page load time by deferring images the visitor may never scroll to.

In modern HTML, lazy loading is enabled with a single attribute:

<img src=”photo.jpg” alt=”Description” loading=”lazy”>

The first image on a page, the hero or main featured image, should not be lazy loaded since it is immediately visible and needs to load as quickly as possible. All other images below the fold are good candidates for lazy loading.

Alt Text: The Non-Performance Reason Images Matter for SEO

Alt text is the written description added to an image tag that tells search engines, AI systems and screen readers what the image shows. It is not a performance concern, but it is a significant SEO and accessibility concern that belongs in any thorough article about images on the web.

Search engines and AI systems cannot see images. They read the alt text to understand what the image contains and how it relates to the page content. An image with no alt text is invisible to these systems in a meaningful sense. An image with descriptive, accurate alt text contributes to the page’s overall relevance and authority.

What good alt text looks like

• Descriptive and specific: describes what is actually in the image, not what the page is about
• Concise: typically one sentence is sufficient; longer descriptions become unwieldy.
• Natural: written as a description for a person who cannot see the image, not stuffed with keywords
• Empty for decorative images: purely decorative images that add nothing informational should have an empty alt attribute (alt=””) rather than no alt attribute at all.

A Practical Image Optimisation Checklist

☐  Images are saved in the correct format: WebP or AVIF for photographs, SVG for logos and icons, PNG only where lossless quality is essential

☐  Images are sized to their actual display dimensions before upload, not left at camera resolution

☐  Compression applied: JPEG and WebP quality at 75 to 85% for most photographic content

☐  Responsive image sizes provided where the site serves the same image at significantly different widths

☐  The hero or main image is not lazy loaded; all other below-the-fold images use loading=”lazy”

☐  Explicit width and height attributes set on all images to prevent layout shift

☐  All meaningful images have accurate, descriptive alt text

☐  Decorative images have an empty alt attribute

☐  Image optimisation plugin installed on WordPress if images are uploaded through the CMS

☐  PageSpeed Insights checked after changes to confirm improvement in LCP and overall score

Frequently Asked Questions

Does image format really make that much difference to page speed?

Yes, considerably. Switching from JPEG to WebP at equivalent visual quality typically reduces file size by 25 to 35%. Switching from PNG to WebP for photographic content can reduce file size by 50% or more. Across a page with multiple images, those reductions compound into a meaningful difference in total download size and therefore page load time.

Will compressing my images make them look noticeably worse?

At JPEG or WebP quality settings of 75-85%, quality loss is generally not perceptible on a screen at normal viewing distances. The most noticeable compression artefacts tend to appear in areas of flat colour or fine detail such as hair or fabric textures. Checking the compressed version at full size before uploading, ideally using a tool like Squoosh that shows the original and compressed versions side by side, is the most reliable way to confirm the result is acceptable.

My WordPress site already generates multiple image sizes. Do I still need to optimise?

Yes, because WordPress generates those sizes from whatever file you upload. If you upload a 6-megabyte camera file, WordPress generates multiple sizes from it, but the source file itself is still stored and sometimes used. Uploading a properly sized and compressed source file means all generated sizes start from a better base, and the original stored file is also a reasonable size rather than unnecessarily large.

What should I put in alt text for product images?

Describe what the product actually looks like in the image: its colour, material, key distinguishing features and any relevant context. For example, rather than ‘blue chair ‘, a more useful alt text would be ‘upholstered dining chair in navy blue with oak legs, viewed from the front’. This is genuinely more useful for accessibility and gives search engines and AI systems more to work with when understanding the image in context.

Is there a file size I should aim to keep images under?

A commonly used guideline is to keep most images under 200 kilobytes, with hero or full-width images potentially up to 400 kilobytes where the visual quality genuinely requires it. These are guidelines rather than hard rules, and the right target depends on the image content and how it is used. The most reliable approach is to run PageSpeed Insights before and after optimising and measure the actual improvement in LCP and overall performance score.

Want Your Site’s Images Reviewed?

If your website is performing poorly and you suspect images are a significant part of the problem, get in touch for a straightforward conversation with no obligation and no sales pitch.