Images: The Biggest Speed Win on Most Stores

Start speed work with images, because on most stores they are the largest bytes on every page and the main content the visitor is waiting for. The discipline has four parts: send each image at the size it will actually be displayed, never larger; compress it properly, which modern formats and tools make nearly free in visible quality; load the main image early and everything below the first screen lazily; and reserve its space so the page does not jump when it arrives. Work through the catalogue's shared templates and the heaviest pages first. Stores regularly discover that this single programme, requiring no redesign and no new platform, is what moves their field data from failing to passing.

The commonest waste is a mismatch between file and display: a full-width original thousands of pixels wide served into a phone slot a few hundred pixels wide, because the theme, the upload habit or a retina setting asked for the largest version everywhere. Every extra pixel is paid for in download time by every visitor, forever. Check what your theme actually requests at phone sizes, set upload and export habits to produce sensible masters, and let the platform's responsive image machinery serve variants where it offers them, as the Shopify and WordPress documentation describes for their image pipelines. Right-sizing alone, before any clever compression, is frequently the majority of the available win.

Modern formats such as WebP, and AVIF where support and tooling suit you, carry the same photograph at materially smaller weight than older formats at comparable quality, and good compression of any format beats a careless save. Work at the level of batches and templates, not individual heroics: export presets for product photography, an optimisation step in the upload routine, and a periodic sweep for the largest files in the media library. Compare compressed results side by side at display size on a phone, because that is the only viewing condition that matters commercially. Where a supplier provides imagery, specify maximum dimensions and format in the request, since supplier originals are a classic source of multi-megabyte surprises.

A page should spend its first moments on what the visitor came for. Mark the main product or hero image for priority loading, and lazy-load images below the first screen, gallery extras and related-product rows, so they arrive as the visitor approaches them rather than competing with the headline act. Carousels deserve special suspicion: many load every slide up front to show one, multiplying the cost of the most valuable screen on the site. If a carousel must exist, load its first slide as the main image and defer the rest. Videos and animated images should be treated as images with extreme weight: poster frames first, playback on request, never autoplay by default on a product template.

Every image that arrives without declared dimensions lets the browser lay the page out blind, then move everything when the real size lands, which is the layout shift measured as CLS in Core Web Vitals in plain language. The cure is mechanical: width and height or an aspect ratio in the markup for every image, which modern themes and editors mostly add if the image comes from the library properly. Audit templates where images are hand-placed, decorative banners and logos in promotional blocks, because those are where dimensions go missing. A page can be fast and still feel chaotic; reserved space is what makes the speed feel calm.

Product images also carry conversion work: showing scale, texture, colour accuracy and the detail a buyer zooms to check. Optimisation that degrades those jobs, crushed compression that hides texture, crops that remove context, galleries pruned to one angle, is a false economy that the step rates will eventually report. The same applies to accessibility and search: keep honest file naming and alt text for images that carry information, since the fix for weight is bytes, not meaning. Set the quality bar by viewing on the devices your customers use, at the sizes your theme displays, and hold it. The goal is the lightest file that still does the image's full commercial job, not the lightest file achievable.

Image weight returns through habit, so build the habit: export presets checked, a maximum display size agreed, an optimisation plugin or step in place for the platforms covered in theme speed, and a quarterly sweep listing the twenty heaviest images on the site with their pages. New product ranges, supplier feeds and seasonal campaigns are the usual re-offenders, so the sweep belongs on the same calendar as the field-data review in the pillar guide. Each sweep is short, mechanical and almost always finds one embarrassing file whose fix is worth more than a week of exotic tuning elsewhere.