The shop page fills in row by row while you watch. Product pages show a grey box where the main photo should be, then the photo, then the little gallery thumbnails pop in and push the price down. On your office connection it is tolerable. On a customer’s phone, it is the moment they give up and go back to the marketplace app.
When WooCommerce product images slow a store down, the cause is rarely one thing. It is usually a mix of oversized uploads, the gallery’s zoom and lightbox features, theme settings and a catalogue that has grown faster than anyone’s upload habits. The grid and the product page go wrong in different ways, so they get separate sections below, followed by the upload rules that stop the problem creeping back.
Two different problems: the grid and the product page
It helps to treat these separately, because the causes differ.
- The shop and category pages show many small images at once. The issue is usually how many there are, how large each thumbnail file is, and whether they lazy load.
- The single product page shows one large image plus a gallery. The issue is usually the size of the main image and the extra files and scripts the gallery brings.
Test one of each before changing anything. Pick a busy category and a product with several gallery photos, and write down the results on mobile.
How WooCommerce product images slow the shop grid
Which image size the grid really uses
WooCommerce has its own image sizes. The catalogue grid normally uses the “thumbnail” size WooCommerce registers, the main product image uses a larger “single” size, and the small images under it use a “gallery thumbnail” size. In many classic themes you can set the widths and cropping under Appearance, then Customize, then WooCommerce, then Product Images. Other themes set these sizes themselves.
Problems start when the grid ends up using a much bigger copy than it displays. That happens when a theme or shop builder asks for the full size, when the sizes were changed but old images were never regenerated, or when the theme registers a large size for a layout you are not even using. Right-click a product thumbnail in the grid, open it in a new tab and check its real dimensions against how big it appears.
Cropped heads, stretched bottles and a staircase of uneven product heights are a separate issue from speed. The WooCommerce crop options that cause them are explained in our guide to blurry and badly cropped images. Here we stick to weight.
How many products load at once
A category page showing a large number of products per page asks the browser to fetch every one of those thumbnails, even with lazy loading doing its best. If your grid is long, reducing products per page and relying on pagination or a “load more” button lowers the work on each view.
The hover image trick
Many themes offer a feature where a second product photo appears when the shopper hovers over a product. It looks smart, but it usually means the grid loads two images per product instead of one. On phones, where there is no hover, those second images are pure cost. If your grid feels heavy, try turning this off and compare.
Quick view and wishlist extras
Quick view plugins and similar extras often load their own scripts on every shop page, and sometimes preload images for the pop-up. Check whether they are worth what they cost.
Lazy loading the right rows
Thumbnails further down the grid should lazy load. The first row, visible without scrolling, should not, because it is often what Google measures as the main content on a category page. Our general post on which images slow a site down explains how to find that main element on any page.
A slow product gallery: zoom, lightbox and scripts
The zoom and lightbox load the original upload
This is the one most owners do not know about. WooCommerce’s product gallery has three optional features that themes switch on: zoom on hover, a full-screen lightbox, and a sliding gallery. Zoom and lightbox both use the original full-size image you uploaded, not the resized copy.
If staff upload product photos straight from a camera at several thousand pixels wide, every shopper who hovers over the main image or opens the lightbox downloads that huge file. Depending on the theme, the zoom image may even be fetched as the page loads. A product with six gallery photos can quietly carry several very large originals.
Two fixes, which work best together:
- Upload originals at a sensible maximum size for zooming, large enough to show detail but not camera resolution. The next section suggests how to set that.
- If zoom adds little for your products, ask whether the theme can turn it off. For simple items such as books or packaged goods, a lightbox alone is often enough.
Gallery scripts
The gallery slider, zoom and lightbox each come with their own JavaScript and styles. Third-party gallery plugins that add 360-degree spins, video or fancy transitions bring more. They are usually loaded only on product pages, but they add to the work a phone has to do before the page responds.
Gallery thumbnails pushing content down
If the small images under the main photo appear late and push the price and Add to Cart button down, the gallery is causing layout shift. A theme should reserve space for the gallery. If yours does not, it is a theme fix rather than an image fix.
Variation images
Variable products that swap the main image when a shopper picks a colour or size load those images when the choice is made, or sometimes up front. Products with many variations can also carry data for all of them in the page. If a variable product page is much slower than a simple one, this is a likely reason.
For store-wide slowness beyond images, such as uncached pages, sessions and heavy extensions, start with our guide to a slow WooCommerce store.
Upload rules for staff
Most product image problems come back because the people adding products are busy and nobody gave them simple rules. A one-page note beats any plugin. Agree on something like this, with numbers that suit your theme:
- Shape. Every product photo uses the same ratio, often square. Mixed shapes cause uneven grids and odd crops.
- Size. A fixed maximum width for originals, large enough for zoom on a big screen and no larger. Our post on image dimensions and file size helps you choose it.
- Format. JPEG or WebP for product photos. PNG only for items that truly need a transparent background.
- Compression. Run photos through a compressor before uploading, or rely on one optimisation plugin set to compress on upload. Not both plugins and manual compression at aggressive settings, or photos turn soft.
- Count. A sensible number of gallery photos per product. Five good angles beat twelve similar ones.
- File names. Descriptive names, such as the product and colour, before uploading. It is easier than renaming later.
Pin it where product data is entered and include it in training for anyone new. If supplier photos arrive at random sizes, resize them in a batch before anyone starts uploading.
Fixing an existing catalogue
- Back up first. Bulk image work rewrites many files.
- Set the WooCommerce image sizes for your theme’s actual layout.
- Regenerate thumbnails so every product has copies at the new sizes. WooCommerce can regenerate in the background after you change its image settings, but on a large catalogue a dedicated plugin or WP-CLI gives more control. Run it at a quiet time.
- Bulk-compress the library with one optimisation plugin, keeping originals as backups.
- Deal with oversized originals. Some optimisation plugins can resize originals above a maximum width. This is what fixes the zoom and lightbox weight. Check a few products afterwards to make sure zoom still shows useful detail.
- Clear caches, including any CDN, and retest the same category and product pages.
Compare the before and after notes for the same pages: total image weight, the size of the main product image, and how the gallery behaves on a phone. The site speed guide covers what else to check once images are no longer the heaviest thing on the page.
Frequently asked questions
How large should WooCommerce product photos be when uploaded?
Large enough that zoom and the lightbox show real detail on a big screen, and no larger. Check the widest your main product image is displayed, allow roughly double for sharp screens and zoom, and use that as your maximum. Anything beyond that is downloaded by shoppers without adding visible detail.
Will turning off product zoom hurt sales?
It depends on what you sell. For clothing, jewellery or anything where texture and detail matter, zoom can help shoppers decide. For packaged goods, books or simple items, a lightbox or a second close-up photo usually does the same job. If unsure, keep zoom but make sure the original images are sensibly sized.
Why are some product images fast and others slow?
Usually because they were uploaded at different times by different people. Older products may have camera originals, products added later may be compressed, and items imported from a supplier may have their own sizes. Sorting the media library by file size or checking a few slow products’ originals quickly shows the pattern.
Do I need to regenerate thumbnails after changing product image settings?
Yes, for existing products. WooCommerce may start regenerating in the background when you change its image settings, but on a large catalogue that takes time. Until every product has copies at the new size, some pages may show older copies or fall back to larger files. Clear caches once regeneration is complete.
Store owners with slow product pages are one of the groups our website speed optimisation service is built for. Image optimisation is part of it, and larger or more complex stores are quoted after a review rather than at a fixed price.
Next in this series: Image Dimensions vs File Size: Resize Before You Upload
