Choose WooCommerce product-image dimensions around the largest view your shop actually displays, including enlargement where it is enabled. Keep a high-quality original, make a separate web copy, and test that copy in one draft listing before exporting the whole catalogue. Uploading a larger file will not fix a template that is displaying a small thumbnail.
WooCommerce’s product-image guidance recommends uploads of at least 800 × 800 pixels as a starting point, with more detail where the product requires it. That is not a universal optimum. Your theme, crop, gallery and customers’ need to inspect fine detail determine what is useful.
Separate dimensions, shape and file size
Pixel dimensions describe how much image information is available: for example, 1600 × 1600 pixels. Aspect ratio describes its shape: that example is square. File size is the amount of data transferred, usually shown in kilobytes or megabytes. Two square photographs with identical dimensions can have very different file sizes.
Changing the pixel dimensions affects the detail available. Changing the crop may remove part of the product. Increasing compression can reduce the file size but damage lettering or texture. Make those decisions separately so you know which change caused a problem.
Keep the untouched original outside the website’s working upload folder. Use a clear naming convention for web copies, such as blue-mug-front-1600.jpg, so a later upload does not accidentally replace your source file with a smaller export.
Find the largest useful image on your own shop
Open a representative product on desktop and phone. Check its main image, catalogue card, gallery thumbnails and enlarged view. Note which view needs the most detail and which view is most likely to crop the object. A square category card and a tall bottle photograph may need a deliberate composition rather than a tighter automatic crop.
As a planning example, an image displayed 600 CSS pixels wide may need about 1200 source pixels across to supply two image pixels per displayed CSS pixel on a higher-density screen. This is a sizing calculation, not a prescription for every store: browser image selection, zoom and the template still need checking.
If you need to read a fine label in the enlarged view, test that actual label. Making every image enormous because one product has tiny lettering wastes data on products whose details are already clear. A separate close-up can explain the small feature more effectively.
Choose a consistent crop without cutting off products
Place each product within a consistent canvas, with enough surrounding space for the catalogue crop. Keep the apparent scale sensible across the range. A small accessory filling every corner beside a large appliance can give a misleading impression even when both product descriptions contain dimensions.
For tall bottles or wide sets, check the whole object survives the thumbnail crop. If it does not, change the web-copy composition or review the intended catalogue ratio. Do not stretch the image to force it into a square; that changes the shape of the product.
Photograph the complete set as sold and use additional images for components or details. If a scene includes display props, make clear what the customer receives. The product-photography shot list helps plan those views before editing starts.
Export a useful web copy
Crop and straighten the original first, then resize a copy for the intended display and apply compression. For photographs, compare an ordinary JPEG with other formats supported by your actual WordPress installation and image workflow. A transparent-background asset may need a different choice from a photograph on a solid backdrop. Verify the result on the site rather than assuming that changing the filename converts the format.
Export one image at two or three compression settings. Compare the saved files at the displayed size and at the largest useful enlargement. Look at lettering, fabric texture, smooth colour transitions and the edge against the background. Keep the smaller file when those useful details remain intact.
There is no reliable file-size ceiling that makes every product image good. A simple ceramic cup and a highly detailed patterned fabric do not compress in the same way. Record the setting that passes for a representative item, then spot-check difficult products instead of blindly applying an aggressive export preset to everything.
If the original already contains glare across a label, export settings will not reveal the missing information. Use the reflection-control guide to fix the capture, or review the equipment choices if you cannot hold the camera and light consistently.
Add the right files to the right product views
Assign the main product image separately from the additional gallery images. Put the clearest identifying view first, then arrange the gallery so it answers useful questions about shape, details, scale and contents. Avoid making visitors open several almost identical pictures to find the back or fastening.
For a variable product, check what happens when each colour or version is selected. A blue photograph beside a selected red option creates uncertainty. Where a variation has its own image, confirm that the correct one appears in the customer-facing selection flow; keep written attributes accurate too.
Use concise alt text that describes the useful information in the image and its context. For example, “Blue ceramic mug, side view showing the handle” is more informative than a string of search phrases or a filename. Do not insert Formby into an image description unless the location is genuinely relevant to what the picture communicates.
If the uploaded image looks blurry
Open the original file and the Media Library version first. If the original is soft, return to focus, movement or the source export. If the original is sharp, investigate which generated size the gallery is displaying and whether the theme is stretching it beyond its useful dimensions.
WooCommerce’s blurry-image troubleshooting guidance distinguishes upload resolution, theme display dimensions and generated thumbnails. Classic themes commonly expose product-image controls through the Customizer; block themes and gallery blocks can have different controls. A theme may also define widths itself, so the absence of a setting is not proof that WooCommerce is broken.
When a genuine size-setting change requires regenerated thumbnails, use the site’s supported regeneration workflow and check the result on a small sample. Take a backup before bulk changes and confirm who maintains the site. Keep the original media while diagnosing the issue; deleting it first can break other places that use the attachment.
Check one complete product before processing the catalogue
- Compare the uploaded main view with the real product and original photograph.
- Check that catalogue cards preserve the whole item and look consistent together.
- Open every gallery image and enlarged view on desktop and phone.
- Select each variation and confirm its image and description agree.
- Look for soft lettering, distorted shapes and overly compressed edges.
- Check loading behaviour on an ordinary mobile connection, not only a previously loaded desktop page.
- Keep the successful export settings and a reference listing for the next batch.
If the images are prepared correctly but the gallery, crops or product template still need work, send Formby Web Design your shop URL and an example product. Businesses in Formby, Freshfield and L37 can use that as the starting point for discussing their ecommerce website requirements.
