Image Optimisation Fixes: Lighter, Sharper, Accessible Images

What makes an image heavier than it needs to be

Three separate decisions decide how many bytes an image costs, and the audit checks each of them. Getting any one wrong can make an image several times larger than necessary.

1. Pixel dimensions

If a photo is 4,000 pixels wide but displayed in a column 800 pixels wide, the browser downloads every one of those extra pixels and then throws them away when it scales the image down. Phones make this worse, because they need even fewer pixels for a small screen. The fix is to create several sizes of each image and let the browser choose, using srcset and sizes. Allow for high-density screens, which need roughly two times the display width to look sharp, but no more than that.

2. Format

JPEG and PNG are decades old. WebP and AVIF compress the same picture into noticeably smaller files, and both are supported by all current major browsers. PNG remains the right choice for a few cases, such as screenshots with sharp text where you need exact pixels, and SVG is best for logos and icons drawn as shapes.

3. Compression level

Every lossy format has a quality setting. Most photos can be compressed well below their camera or export default with no difference a visitor would notice. Tools such as Squoosh let you compare the original and the compressed version side by side before you commit to a setting.

Beyond the bytes, the audit also checks how images are delivered: whether they come from a CDN close to the visitor, whether they are cached, and whether off-screen images wait until they are needed.

Choosing the right format

You do not need to choose just one. The <picture> element lets you offer AVIF first, WebP second and JPEG as a fallback, and each browser takes the first format it supports. Many CDNs and platforms do this automatically, detecting what the browser accepts and converting on the fly, which is often simpler than managing several files yourself.

Whatever format you use, keep sensible file names and alt text. Search engines use the file name, surrounding text and alt text to understand what an image shows, which matters for image search and for product listings.

Loading images in the right order

How an image is loaded matters as much as how big it is. The aim is simple: images the visitor sees first should load first, and images further down should wait.

• Lazy-load below the fold. Adding loading="lazy" to images that start off-screen means the browser fetches them only as the visitor scrolls near them. On long pages this saves a lot of data.
• Never lazy-load the main image. The hero image or first product photo is often the page's Largest Contentful Paint element. Lazy-loading it makes the browser wait until layout is complete before even requesting it, which delays the moment the page looks ready.
• Prioritise the main image. Adding fetchpriority="high" to that one image tells the browser to request it ahead of less important files.
• Make it discoverable. An image set as a CSS background, or inserted by JavaScript, cannot be found until those files are processed. Use a normal <img> in the HTML for important images, or preload them.
• Reserve the space. Give every image width and height attributes, or a CSS aspect-ratio, so the page does not jump when it arrives.

Alt text: describing images that matter

The alt attribute provides a text alternative for people who cannot see the image, including screen reader users and anyone whose images failed to load. It is required by accessibility guidelines for images that convey information, and search engines use it to understand image content.

The key question for every image is: what would a visitor lose if this image were missing?

• If it carries information, describe that information briefly. A product photo might need the product name and the variant shown; a chart needs its key finding, with the full data available elsewhere on the page.
• If it is a link or button, describe where it goes or what it does, not what it looks like.
• If it is purely decorative, such as a background texture, divider or an icon next to text that already says the same thing, use an empty alt="" so screen readers skip it. Leaving the attribute out entirely is different: some screen readers then read the file name aloud.
• If it contains text, the alt text should include that text. Better still, use real HTML text instead of a picture of words.

Avoid starting with "image of" or "picture of", since screen readers already announce it as an image, and do not stuff alt text with keywords. Automatically generated descriptions can be a useful starting point, but they often miss what matters in context, so review them.

The fix guides

Each guide covers one audit finding, with examples and tool suggestions.

Bytes and formats

Fixing oversized image files covers compressing to a sensible quality with Squoosh, ImageOptim or server-side tools such as Sharp and ImageMagick. Fixing the wrong image format covers serving AVIF and WebP with the <picture> element and a fallback. Fixing wrong image dimensions covers generating responsive sizes with srcset and sizes, at build time or through an image service.

Loading and stability

Fixing lazy-loading covers adding loading="lazy" below the fold, removing it from the main image and using fetchpriority="high". Fixing layout shift from images covers width and height attributes, aspect-ratio and placeholders. Fixing image CDN delivery compares options such as Cloudflare Images, BunnyCDN, Imgix and Cloudinary, and the trade-off between cost and convenience.

Accessibility

Fixing missing or weak alt text covers writing useful descriptions, with good and bad examples, and the limits of automatic tools. Fixing decorative vs content image confusion covers when to use empty alt text or CSS backgrounds and when an image needs a real description.

By platform

WordPress covers optimisation plugins such as ShortPixel, EWWW and Smush, responsive sizes and modern format support. Shopify covers theme image tags, the Shopify CDN's resizing and format handling, and product variant images. Next.js covers the Image component, marking the main image as a priority, the sizes prop and enabling AVIF alongside WebP.

Which findings to fix first

1. The main image on key pages. Make sure it is not lazy-loaded, is marked high priority, is sized for its slot and uses a modern format. This one image often decides how fast the page feels.
2. Very large files anywhere above the fold. A single oversized banner or slider image can cost more than everything else on the page.
3. Missing alt text on content images. Product photos, charts and images used as links without descriptions exclude screen reader users and give search engines nothing to work with.
4. Images causing layout shift. Adding dimensions is quick, and the effect on stability is immediate.
5. Format and dimensions across the site. Best solved once, with a plugin, platform setting, CDN or build step, rather than image by image.
6. Lazy-loading lower down and CDN delivery. Worth doing, especially on long pages and for visitors far from your server.

Order of work

1. Audit key templates. Run the Image Optimisation audit on your home page and main product, category, service and article templates.
2. Fix the main image first, on each template: loading attributes, size, format and dimensions.
3. Set up automatic handling. Choose a plugin, platform setting, CDN or build step that resizes, converts and compresses new images automatically.
4. Reprocess existing images. Run bulk optimisation on the media library, starting with the most visited pages.
5. Add dimensions and lazy-loading in the templates that output images.
6. Write alt text, starting with product images, charts and linked images, and set decorative images to empty alt.
7. Re-run the audit and compare total image weight and the timing of the main content.

For background, read the Image Optimisation Guide or follow the beginner tutorial. For how images fit into overall load speed, see the Page Speed Guide, and for the loading metrics themselves, the Core Web Vitals Guide.