If you’re running an online store with WooCommerce, one of the most overlooked yet absolutely critical elements is your product imagery. Sharp, properly sized images don’t just make your store look good—they also improve user experience, boost conversions, and help your products stand out. But what are the best image dimensions? With all the cropping, scaling, and retina devices to consider, it can be confusing.
TL;DR: For most WooCommerce stores, the ideal product image sizes are:
- Main Product Image: 800 x 800 pixels
- Catalog Thumbnails: 300 x 300 pixels
- Gallery Thumbnails: 100 x 100 pixels
Keeping your images square and high-resolution (but well-compressed) ensures they look sharp across all devices and theme layouts. Consistency is key!
Why Image Size Matters in WooCommerce
Your product image is your first impression. Online shoppers don’t have the luxury of touching or trying a product. What they can do is zoom in, flip through galleries, and examine details. Here’s what happens when your images are poorly optimized:
- Blurry or pixelated images make your store appear unprofessional.
- Slow page load times cause visitors to bounce—especially on mobile.
- Non-uniform image sizes make your product grids look uneven or broken.
WooCommerce relies on the WordPress media uploader to handle images. It automatically generates multiple sizes from the original file upload. That’s why uploading correctly sized images from the get-go is essential.
Default WooCommerce Image Sizes Explained
WooCommerce uses three primary image types across your store:
- Main Product Image (Single Product): This is what you see on the product details page.
- Catalog Images: These appear on shop/category pages.
- Thumbnail Images: These are used in widgets, carousels, or image galleries below the main image.
WooCommerce lets you customize these sizes under Appearance > Customize > WooCommerce > Product Images. But getting them right the first time helps avoid fuzzy resizing or re-cropping later.
Best WooCommerce Image Dimensions (2024 Recommended Sizes)
The recommended image sizes below ensure optimal performance, quality, and compatibility with both standard and retina displays:
| Image Type | Recommended Size (px) | Aspect Ratio |
|---|---|---|
| Main Product | 800 x 800 | 1:1 (Square) |
| Catalog | 300 x 300 | 1:1 (Square) |
| Thumbnail | 100 x 100 | 1:1 (Square) |
These square sizes keep your layout consistent and allow for symmetrical grids. It’s easiest to upload square originals and let WooCommerce crop down as needed.
Square vs. Custom Aspect Ratios
While square images (1:1) are easiest to manage and work seamlessly with most themes, some niches may benefit from alternative ratios:
- Apparel: Tall aspect ratios like 3:4 showcase full-length outfits.
- Books or Portrait Art: Vertical images may help emphasize the product.
- Widescreen Electronics: Landscape ratios look great for TVs or monitors.
If you’re using custom ratios, just ensure:
- Your theme supports it without layout distortions.
- You maintain consistency across all product images.
How to Change Product Image Sizes in WooCommerce
Here’s a step-by-step guide to adjust your WooCommerce image sizes manually:
- Go to Appearance > Customize > WooCommerce > Product Images.
- Update the sizes for Main Image Width and Thumbnail Width.
- If needed, toggle Hard Crop to ensure uniform image sizes.
- Click Publish to save changes.
After changing image dimensions, regenerate thumbnails to apply updates to existing media:
Use the plugin Regenerate Thumbnails.
Image File Size and Format Best Practices
In addition to choosing the right dimensions, the format and file size of your images will impact performance:
- Format: Use JPEG for photographs and PNG for images with transparency or graphic illustrations. WebP is a modern, efficient format supported by most browsers.
- Compression: Always compress images before uploading. Tools like TinyPNG, ShortPixel, or Smush can help reduce file sizes without losing quality.
- Size Limit: Keep images below 200KB if possible. For retina-friendly images (2x), up to 500KB may be acceptable with compression.
Consider Retina Displays
Most modern devices (smartphones, tablets, MacBooks) use high-resolution “retina” displays. This means your images may appear blurry unless they’re 2x the display size. If your catalog image is set at 300 x 300, upload a 600 x 600 original to retain clarity on retina screens.
Many WordPress themes and CDN tools support serving retina images conditionally, which can help optimize for both speed and quality. Be sure to test on multiple devices.
Mobile Optimization is Non-Negotiable
Over 60% of online shoppers browse from phones or tablets. Big, uncompressed product images can significantly slow down your site on mobile connections. Make mobile performance a priority by:
- Using responsive image sizes with the
srcsetattribute. - Lazy-loading below-the-fold images.
- Avoiding unnecessarily large image uploads.
Bonus Tip: Use Consistent Backgrounds
For an ultra-polished look, keep your product photography consistent. Use the same background (white or light grey is ideal), similar lighting conditions, and spacing. This creates a cleaner catalog grid, prevents visual fatigue, and adds a professional aesthetic.
Final Thoughts: Your Product Images Deserve Love
High-quality, properly sized product images are some of the best investments you can make in your WooCommerce store. They drive trust, increase click-throughs, and make your site shine. Don’t let your visuals be an afterthought—plan for consistency from the start, and use the size cheat sheet in this article as your go-to reference.
Quick Image Size Recap
- 800 x 800: Main product image (upload size)
- 300 x 300: Catalog image
- 100 x 100: Thumbnails
Adjust these depending on your theme, niche, and device audience—but keep quality and speed in balance.
Need precise control for a premium store experience? Consider using specialized WooCommerce themes that let you customize image behavior or product gallery layouts. Pair them with CDN services (like Cloudflare or Jetpack) and image optimization plugins for peak performance.
Your store is only as good as its product presentation. Make sure your images are telling the best possible story.