You can set your preferred product image sizes in WordPress Settings > Media, in the Product Catalog Images section:
Each image type has a maximum width and height predefined to suit most themes:
- Catalog Single Page Image (product page): 600 × 600 px
- Catalog Category Page Image: 600 × 600 px
- Modern Grid Image: 600 × 384 px, cropped to this exact size
- Classic Grid Image: 600 × 600 px
- Classic List Image: 280 × 160 px
When you upload an image, WordPress creates multiple image files in these sizes.
Set the width and height of each image type to match how your theme displays them. For example, if your theme shows the Modern Grid image 350 px wide, set its width to 350 px. This way your images load faster.
The new sizes are used only for images uploaded after the change. To apply them to your existing images, use the Regenerate Thumbnails plugin.
How to check the image size in browser
To check the actual image size, right-click the image and choose “Inspect”. This opens the Developer Tools window.
In the Developer Tools window you can hover your mouse cursor over the “img” HTML element which represents your image. The black box will show up over your image:
In the screenshot the image size is 308 px width and 197 px height.
Fix WordPress Blurry Images
If your images are blurry it means that your theme needs bigger images than the currently uploaded.
If your images are blurry, upload them in a higher resolution and increase the width and height for that image type in Settings > Media. Then regenerate the thumbnails.
Product Image going out of Modern Grid container
As you can see the modern grid is a horizontal rectangle. If your image has different shape it can go out of the container or “zoom” into incorrect position.
If your image is going out of the modern grid container, increase or decrease the height or width of the Modern Grid Image size.
See Modern Grid with square images if all of your images are square instead of rectangular. For the product page image and gallery options, see product gallery.