On most of the e-commerce stores I've worked on, whether WooCommerce, Shopify or a custom WordPress marketplace, the heaviest thing on a product page is not the theme, the plugins or the JavaScript. It's the product photos. A store owner photographs a new stock arrival on a modern phone, uploads the pictures straight to the store, and a page that should load in a moment ends up downloading several megabytes of pixels nobody can see.
This guide covers what WooCommerce and Shopify actually do with your images, what size to upload, which format to pick, and the short routine I follow before any product photo goes live.
Why product images decide how fast a store feels
On a product page, the main product photo is usually the largest thing above the fold. That makes it the element Google's Core Web Vitals call the Largest Contentful Paint: the moment the page looks loaded to a shopper. If that one image is slow, the whole page feels slow, however well the rest is built.
Category pages multiply the problem. A shop grid with 24 products loads 24 thumbnails. If each one is generated from an oversized, poorly compressed original, the grid gets heavy fast, especially on mobile data.
How WooCommerce handles your images
When you upload a photo to WordPress, it keeps the original and generates several smaller copies. WooCommerce adds three sizes of its own:
| WooCommerce size | Where it's used | Default width | Default crop |
|---|---|---|---|
woocommerce_thumbnail | Shop and category grids | 300 px | Square (1:1) |
woocommerce_single | Main image on the product page | 600 px | Uncropped |
woocommerce_gallery_thumbnail | Small thumbnails under the main image | 100 px | Always square |
Many themes override these widths, so check what yours declares. Store owners can change the cropping under Appearance → Customize → WooCommerce → Product Images. If you change sizes on a store that already has products, old images keep their old crops until the thumbnails are regenerated. A plugin such as Regenerate Thumbnails does that in one go.
WordPress also has a safety net: since version 5.3, if you upload an image larger than 2,560 pixels on its longest side, WordPress creates a scaled-down copy and uses that as the “full” size. That keeps the worst cases in check, but it isn't a substitute for preparing images properly. The original is still stored on the server, and every generated size starts from an unoptimised file.
How Shopify handles your images
Shopify does more of the work for you. It accepts large uploads (up to 20 MB per image), stores the original, and its CDN serves resized versions to each visitor. When the shopper's browser supports modern formats, Shopify delivers WebP or AVIF automatically. Shopify's own guidance recommends JPEG for product images.
That doesn't mean image preparation is pointless on Shopify. The CDN resizes, but it can't fix a blurry photo, a crooked crop or inconsistent shapes across a collection. Uploading a sensibly sized file also makes the admin faster to work in and keeps your media library tidy.
What size to upload
A simple rule: upload about twice the largest size the image will be shown at, so it stays sharp on high-density (retina) phone and laptop screens.
- WooCommerce: with the default 600 px single-product width, an upload of around 1,200 px on the longest side is plenty. If your theme shows bigger product images or uses a zoom feature, go up to 1,600–2,000 px.
- Shopify: a square image of around 2,048 × 2,048 px is a widely used recommendation. It's large enough for Shopify's zoom feature and its CDN handles the smaller versions.
- Keep one shape across the catalogue. Pick an aspect ratio, usually square, and crop every product photo to it. Mixed shapes make shop grids jump around and look unfinished, even when the photos themselves are good.
For comparison, a typical modern phone photo is around 4,000 × 3,000 pixels, roughly three times wider than a WooCommerce store needs.
JPG, PNG or WebP?
| Format | Use it for | Avoid it for |
|---|---|---|
| JPG | Product photos: clothes, books, food, anything photographed | Logos, or anything that needs a transparent background |
| PNG | Logos, icons, graphics with flat colours, cut-out images that need transparency | Ordinary photos, where it creates much larger files than JPG |
| WebP | Photos and transparent images, usually smaller than both JPG and PNG | Very old software that can't open it (rare today) |
WordPress has accepted WebP uploads since version 5.8, so on WooCommerce you can upload WebP directly. On Shopify, upload a high-quality JPG and let the CDN deliver WebP or AVIF to browsers that support them. My longer comparison is in JPG vs PNG vs WebP.
My five-step workflow before uploading
This is the order I follow, because each step makes the next one more effective:
- Crop to the store's shape. Use Crop Image with a square ratio, leaving a little even space around the product.
- Straighten if needed. A product photographed slightly sideways looks careless next to others. Rotate & Flip Image fixes orientation.
- Resize to the target size. Use Resize Image to bring photos down to around 1,200 px for WooCommerce, or about 2,048 px for Shopify. You can do a whole batch at once.
- Compress. Run the batch through Compress Image. Its default quality of 75% is a good starting point for product photos. Zoom in on the result, and if fabric texture or small text on packaging gets muddy, go back up to 80–85%. With the “Automatic” format setting, JPGs stay JPG and PNGs become WebP, which keeps transparency at a much smaller size.
- Convert if the store needs a different format. Convert Image switches between JPG, PNG and WebP.
File names and alt text
Two small habits help product images show up in Google Images and help shoppers using screen readers:
- Rename files before uploading.
black-leather-wallet-front.jpgtells search engines something;IMG_20260214_183022.jpgdoesn't. Use lowercase words separated by hyphens. - Write real alt text. Describe the product as you would to someone who can't see it: “Black leather bifold wallet, front view”. Don't stuff it with keywords or repeat the product title word for word on every image.
Quick checklist
- Same aspect ratio (usually square) for every product in the catalogue.
- About 1,200 px for WooCommerce defaults; about 2,048 px for Shopify.
- JPG or WebP for photos; PNG or WebP only where transparency is needed.
- Compress at 75–85% quality and check the result zoomed in.
- Descriptive file name and honest alt text.
- After changing WooCommerce image settings, regenerate thumbnails.
None of this takes long once it's a habit, and it's one of the cheapest performance improvements an online store can make.
