To make website images faster, do four things: resize each image to the largest size it will actually be displayed at, compress it, serve it in a modern format such as AVIF or WebP with a fallback, and lazy-load images below the fold while loading the main image at the top of the page straight away. Add width and height to every image so the layout doesn’t jump. Together these usually cut image weight dramatically with no visible loss of quality.
Why are my images slowing the site down?
The most common problem isn’t format. It’s size. A photo straight off a modern phone or camera is often several thousand pixels wide and several megabytes. If that file is uploaded and dropped into a space that’s 800 pixels wide on screen, every visitor downloads the full file and their browser shrinks it. On a phone on mobile data, that’s slow and wasteful.
The main image at the top of a page is very often the element Google measures for Largest Contentful Paint, one of the three Core Web Vitals. If it’s heavy, or loaded late, the page feels slow. We explain the metrics in Core Web Vitals for business owners.
What size should website images be?
Size images for how they’re displayed, allowing for high-density screens. A sensible rule of thumb is roughly twice the displayed width in pixels for sharp images on modern phones and laptops, and no more. A full-width hero might need around 2,000 to 2,400 pixels wide. A product thumbnail in a grid might only need a few hundred.
Better still is to provide several sizes and let the browser pick. HTML’s srcset and sizes attributes do exactly this: you list the available widths, describe how wide the image will appear, and the browser downloads the smallest one that looks sharp on that screen. Most modern platforms generate these sizes automatically when you upload an image, which is why uploading one sensibly sized original is better than uploading a huge one.
AVIF or WebP: which format should I use?
Both are modern formats that compress far better than JPEG and PNG for the same visual quality.
- WebP is very widely supported across current browsers and handles both photos and graphics with transparency. It’s the safe default.
- AVIF generally compresses photos even smaller than WebP at similar quality, and is supported in current versions of the major browsers. It can be slower to encode, and very old browsers don’t support it.
- JPEG is still a fine fallback for photos, and PNG for simple graphics that need sharp edges. SVG is best for logos and icons, since it’s a drawing rather than a photo and stays crisp at any size.
You don’t have to choose just one. The HTML picture element lets you offer AVIF first, WebP second and JPEG as a fallback, and each browser takes the first format it understands. Many image CDNs and platforms do this automatically by checking what the visitor’s browser accepts.
Converting a 4 MB JPEG to WebP without resizing it still leaves you with a large file. Resize first, then convert. Format is the second step, not the first.
How does lazy loading work, and when shouldn’t I use it?
Lazy loading means the browser waits to download an image until the visitor scrolls near it. Adding loading="lazy" to an image is now supported natively in modern browsers, with no plugin or script required. On a long page full of photos, it means visitors only download what they actually look at.
The mistake is lazy-loading everything, including the main image at the top. That tells the browser to delay the most important image on the page, which makes LCP worse. The rule is:
- Above the fold (visible without scrolling): load normally. For the single main hero or product image, you can add
fetchpriority="high"to hint that it matters most. - Below the fold: lazy-load.
- Carousels and sliders: load the first slide normally and lazy-load the rest. Better still, ask whether the slider is needed at all.
Stop the page jumping while images load
If an image has no set dimensions, the browser doesn’t know how much space to leave, so the text below jumps down when the image arrives. That’s layout shift, measured by CLS. Add width and height attributes that match the image’s proportions, or set an aspect-ratio in CSS. The browser then reserves the right space from the start, and the image can still scale responsively.
What do Shopify and WordPress already do for me?
Shopify serves images through its own CDN and can generate resized versions and modern formats on the fly, provided the theme requests them properly. Most current themes do. Older or heavily customised themes sometimes request full-size images everywhere, or lazy-load the main product image. Those are theme fixes, usually small ones.
WordPress creates several sizes of each upload and outputs srcset automatically, and has included native lazy loading in core for several years. It has supported WebP uploads for some time, with AVIF support added more recently, depending on what your hosting’s image library supports. Image optimisation plugins can compress, convert and serve modern formats; pick one, not three, because overlapping image plugins are a common source of conflicts. Page builders and some themes override the defaults, so it’s worth checking what your site actually outputs.
If you’re not sure what your platform supports, our Shopify and WordPress help covers exactly this kind of defined theme or plugin fix. For more on choosing between the two platforms, see Shopify or WooCommerce.
A checklist for every image you upload
- Resize it to around twice its largest displayed width before uploading.
- Compress it. Free tools like Squoosh let you compare quality side by side.
- Use JPEG, WebP or AVIF for photos, SVG for logos and icons, PNG only where needed.
- Give it a short, descriptive file name and meaningful alt text. Alt text helps people using screen readers and helps search engines understand the image; our accessibility guide covers how to write it.
- Make sure the main image at the top isn’t lazy-loaded, and that the rest are.
- Check the image has dimensions set so the layout doesn’t shift.
Product catalogues and image-heavy sites
For an online store with hundreds of products, fixing images one by one isn’t realistic. The fix belongs in the theme or template: request the right sizes, serve modern formats, set dimensions, and lazy-load the grid. Existing oversized uploads can often be left alone if the platform resizes them on delivery, which is one reason to check how your images are actually served before re-uploading anything.
If you only do three things
Stop uploading full-size photos. Make sure the hero image loads first and everything below it is lazy-loaded. Set dimensions on every image so the page holds still. Modern formats are a bonus on top of those three.
If you’d like the images on your key templates sorted properly, with before-and-after measurements, that’s a defined website performance job. From $500. Most performance jobs land between $500 and $2,500.
