You upload a sharp product photo, add a few gallery images, and move on to the next item. Everything looks good. But after a few hundred products, your store has thousands of image files, and some pages take longer to load than they should.
The problem might be a heavy main photo, a gallery loading too early, or a mobile product grid downloading images meant for a much larger screen.
This WooCommerce image optimization checklist helps you find those problems and fix them. We’ll also cover thumbnails and media cleanup, so you can keep your image library manageable as your catalog grows.
What Is WooCommerce Image Optimization?
WooCommerce image optimization means making product images lighter and delivering them efficiently while keeping the detail shoppers need.
That includes resizing photos, compressing files, choosing suitable formats, and controlling when images load. It also means keeping useful image sizes and clearing out files your store no longer needs.
The aim is simple: shoppers should see clear product photos without downloading more data than necessary.
Why Does It Matter?
A product page rarely loads just one photo. There may be a gallery, variation images, related products, and photos inside the description. Even modest file sizes can add up when a page requests enough of them.
Your main product image deserves particular attention. If it’s the largest visible element when the page opens, its loading time contributes to Largest Contentful Paint, or LCP. Google’s guidance sets a good LCP at 2.5 seconds or less, measured at the 75th percentile of page visits. Source: web.dev
There’s a separate benefit behind the scenes, too. Removing redundant files can reduce storage and make backups easier to manage. Just don’t confuse a cleaner media library with a faster page: deleting an image nobody downloads won’t directly improve that page’s loading time.
Before You Start: Check What Your Store Actually Loads
Choose one busy product page and one shop or category page. Test them with PageSpeed Insights, and use your browser’s Network panel to inspect image requests.
Write down:
- The total amount of image data downloaded.
- The largest individual image files.
- The LCP result and which element causes it.
- Any visible problems with galleries, zoom, or mobile images.
Keep those URLs for your follow-up tests. Using the same pages, device settings, and cache conditions makes the comparison more useful. Run a few tests rather than judging everything from one score.
The WooCommerce Image Optimization Checklist
1. Match Product Image Dimensions to Your Store
Start with how your store displays photos. A small product card and a full-width gallery don’t need the same image dimensions.
WooCommerce recommends uploads of at least 800 × 800 pixels as a starting point. Your theme, product detail, and zoom feature may call for something larger.
For example, a photo displayed at 700 pixels wide might benefit from a 1,400-pixel version on a high-density screen. Zoom may need more detail again. A 5,000-pixel source is worth questioning, but shrinking every image to its displayed width can leave photos looking soft.
Check the main gallery, shop grid, and zoom view before choosing your source dimensions. Keep a consistent aspect ratio where your layout needs it, so products sit neatly alongside one another.
2. Find the Heaviest Files First
Pixel dimensions tell you how large an image is. Kilobytes and megabytes tell you how much data it contains. Check both.
A supplier’s 5,000 × 5,000-pixel photo contains roughly 39 times as many pixels as an 800 × 800 version. That doesn’t automatically make it 39 times heavier, but it’s a good reason to check whether you need all that resolution.
WordPress may serve a smaller generated copy while keeping the original on your server. So check the file visitors actually download before blaming a large original for slow pages.
For a catalog-wide audit, ThumbPress’s large-image detection finds originals above a file-size threshold you choose. Use the results to identify heavy files, then check their dimensions and storefront use before resizing or compressing them.
Keep a backup of valuable original photography before replacing it.
3. Compress Images Without Losing Useful Detail
Once the dimensions make sense, see how much you can reduce the file weight.
Imagine two versions of a product photo: one is 3 MB, and the other is 300 KB. If shoppers can see the same fabric texture, label, and stitching in both, the smaller version is doing the job with about one-tenth of the data. This is an example, not a promised compression result.
Lossless compression preserves image information. Lossy compression trades some information for a smaller file, so the quality setting matters.
Try a few representative products first. Include something with fine texture, small printed text, and subtle color changes. Check both the normal image and the zoom view before applying the setting across your catalog.
ThumbPress supports bulk compression and compression on upload, which can save you from repeating this work for each new product.
4. Choose a Format That Suits the Image
A product photo and a transparent logo have different needs. You don’t have to save everything in the same format.
| Format | Where it can work well | What to check |
| JPEG | Product photography | Good photo detail at a sensible quality setting; no transparency |
| PNG | Graphics requiring lossless detail | File weight, especially for photographs |
| WebP | Photos and graphics, including transparency | Quality and file size compared with your original |
| AVIF | Product photos and other compressed images | Conversion support, output quality, and delivery compatibility |
Transparency alone doesn’t require PNG: WebP supports it too. Google’s comparison found lossy WebP files 25–34% smaller than comparable JPEGs at equivalent visual quality, though your results will vary. Source: Google’s WebP documentation
Use those comparisons as a reason to test, rather than assuming one format always wins.
5. Convert Older Images Too
Changing your upload settings helps future products. It leaves the existing catalog untouched.
Start with a small group of older JPEGs or PNGs. Convert them to WebP or AVIF, compare the output, and check that the storefront actually serves the new files. Creating a smaller version won’t help loading time if the page still requests the old one.
When possible, generate the final resized and compressed file directly from a clean source. Repeatedly saving an image with lossy compression can reduce quality, so avoid treating compression and conversion as two mandatory passes.
ThumbPress offers WebP and AVIF conversion. Before a bulk job, test product galleries, variation switching, zoom, and mobile display. Keep recoverable originals and check any fallback behavior your delivery setup provides.
6. Check Which Images Mobile Visitors Download
Open your shop page on a phone-sized screen. A product card might look small, but the browser could still be downloading a much larger image.
Responsive image markup helps the browser choose a suitable file. The srcset attribute lists available versions, while sizes describes the space the image occupies. The browser also considers screen density, so a 400-pixel-wide image slot may reasonably use an 800-pixel source on a 2× display. Source: web.dev’s responsive image guidance
You don’t need to write the markup yourself to spot a problem. Ask your developer to check whether product cards, galleries, and page-builder images offer useful sizes and describe their layout accurately.
If a small card always downloads a huge original, investigate which theme or plugin is generating that image.
7. Stop Generating Thumbnails You Don’t Use
One upload can create several files because WordPress, WooCommerce, your theme, and plugins may each register image sizes.
That’s useful when those versions serve different parts of your store. It becomes wasteful when old or overlapping sizes keep generating files nobody requests.
For example, 5,000 uploads with nine unused variants each would leave you with 45,000 unnecessary files. That’s an illustrative calculation, not a typical count for every store.
Before disabling a size, check product pages, grids, carts, galleries, and responsive image choices. A size that looks redundant on desktop may still be useful on mobile.
ThumbPress includes thumbnail controls. Disable only sizes you’ve confirmed are unnecessary, and remember that preventing future thumbnails is a separate job from cleaning up existing ones.
8. Regenerate Thumbnails After Size or Layout Changes
Have you changed your shop images from rectangular to square, only to find older products still showing the previous crop? Existing thumbnails may need rebuilding.
Regeneration can help after a theme change, new image dimensions, or revised cropping settings. Some WooCommerce changes can trigger background regeneration, so check whether that has already happened before starting another job. Source: WooCommerce image sizing documentation
Test a few products first and confirm that the new sizes look right. Then process the rest in manageable batches if needed.
Regeneration is useful when your settings change. Running it repeatedly without a reason just creates more server work.
9. Lazy Load Images Shoppers Haven’t Reached Yet
On a category page with 24 products, shoppers may initially see only the first few cards. Images farther down the page can usually wait until the visitor gets closer to them.
That’s where lazy loading helps. It’s also useful for related products, review photos, and images deep inside a product description.
Your main product photo needs different treatment. If it’s the LCP image, lazy loading delays a request that should start early. Google’s LCP guidance explicitly advises against lazy loading that image.
Check your existing loading behavior before adding another setting or plugin. Then verify that the main visible image loads promptly and offscreen images load as shoppers approach them.
10. Review Duplicate Product Photos
Repeated imports and supplier updates can leave several copies of the same photo in your library.
Filenames such as product.jpg, product-1.jpg, and product-final.jpg are worth investigating, but they don’t prove the files are identical. One might have a different crop or better resolution.
ThumbPress can detect exact duplicate images. Review the matches and check where each attachment is used before removing anything.
If two products reference separate copies, choosing one file to keep may also require updating the other product’s image reference. Deleting a duplicate without checking that connection can leave a missing photo.
11. Remove Unused Images Carefully
A discontinued product or expired campaign can leave photos behind long after they’re needed.
Review these files periodically, especially after large catalog changes. But don’t treat WordPress’s “unattached” label as proof that an image is unused. A page builder, custom field, template, or other part of the site may still reference it.
Use cleanup results as a starting point for review. Keep a restorable backup of the database and uploads, remove a small batch, and check the affected pages before continuing.
This step helps with storage and maintenance. For faster pages, prioritize the images shoppers actually download.
12. Check Whether an Image CDN Improves Delivery
If your customers are spread across different regions, image delivery deserves a look after you’ve reduced file weight.
An image CDN can serve cached files from locations closer to visitors. The improvement depends on your hosting, audience location, cache behavior, and existing delivery setup. Test it on the pages and regions that matter to your store.
ThumbPress offers an image CDN alongside its optimization tools. After enabling CDN delivery, check that product images and responsive variants use the intended URLs and that galleries still work correctly.
A CDN doesn’t automatically make a heavy file smaller unless image transformation is part of the service. Keep checking what the browser downloads, even when delivery is faster.
Make Future Uploads Easier to Manage
Once you’ve worked through the checklist, give your team a short upload routine:
- Use source dimensions that support the layout and zoom requirements.
- Apply tested compression and format settings to new images.
- Check a new product on mobile before publishing it.
- Review heavy or redundant files after major imports.
Retest your original product and category pages after the changes. Compare image transfer sizes and LCP, then check the shopping experience yourself. Clear photos, working variation images, and useful zoom still matter more than chasing a perfect score.
How ThumbPress Helps Optimize WooCommerce Images
The larger the catalog becomes, the harder it is to manage each part of this checklist manually. You may otherwise need separate tools for compression, format conversion, lazy loading, thumbnail control, media cleanup, and CDN delivery.
ThumbPress brings these tasks into a single WordPress image optimization and management workflow. Depending on the features you enable, it can help you:
- Compress existing WooCommerce product images in bulk
- Optimize new uploads automatically
- Convert JPEG and PNG files to WebP or AVIF
- Find images with unnecessarily large dimensions
- Control which thumbnail sizes WordPress generates
- Regenerate thumbnails after configuration changes
- Lazy load non-critical images
- Detect duplicate images
- Identify potentially unused media for review
- Offload and deliver images through an image CDN
This combination addresses both sides of the problem: optimizing the files already in your media library and preventing new uploads from recreating the same issues.
You can review everything available on the ThumbPress website.
Final Thoughts
WooCommerce image optimization is not a single compression setting. It is a system that controls image dimensions, file weight, format, responsive selection, loading priority, thumbnails, storage, and delivery.
If you are unsure where to begin, start with the pages that receive the most traffic or contain the heaviest image requests. Measure them, fix the largest problems, and test again. Then automate the same rules for future uploads so the improvement lasts.
Frequently Asked Questions
WooCommerce recommends at least 800 × 800 pixels as a starting point. Choose larger sources when your layout, high-density screens, or zoom feature needs them, and serve smaller versions where appropriate. WooCommerce’s image guidance
No single limit suits every image. A small product card and a detailed zoom photo have different requirements. Compare files at the dimensions you actually need, and reduce their weight until further compression starts affecting useful detail.
Test both on a few representative products. Choose based on visible quality, file size, and support in your image-processing and delivery setup. Keep originals so you can change your approach later.
If it’s visible when the page opens, it should load promptly. In particular, avoid lazy loading it when it’s the LCP element. Use lazy loading for suitable images farther down the page. Google’s LCP guidance
It can reduce storage and simplify backups, but it won’t directly speed up a page that never requests those files. For page speed, focus first on downloaded image size, loading priority, and delivery.
