In this tutorial, I’ll go over image sizes and aspect ratios. It’s very important to understand both, or else you will most likely use images incorrectly and slow down your site.
Understanding and Choosing an Image’s Aspect Ratio
In order to make things easy for yourself, it’s best to have only one image ratio for your entire shop. What do I mean by image ratio? Well, it has a lot to do with math. Lets say you have a picture that is 500px wide and 750px tall. That image has a ratio of 500:750. That ratio can be reduced by dividing the ratio (or fraction) by some form of one. We’ll divide the fraction by 500/500. When we do that, we get a ratio (or fraction) of 1/1.5, but that isn’t very fun to work with either. Lets go ahead and multiply that by 2/2 to get a final ratio of 2:3.
Figuring Out What Sizes to Use for Your Images
Why is this ratio stuff important? Well, a ratio determines what can fit into your picture. Once you have decided on a ratio, figuring out how big your pictures should be becomes a lot easier. On your shop page, you will probably want smaller pictures. Let’s figure out what will be a good size for the pictures on the shop page. We can figure this out by multiplying the ratio (or fraction) by some form of 1. Let’s multiply the fraction by 90/90. We get a new fraction of 180/270 or 180px by 270px. That will work. Now, let’s figure out a good size for the image on the product page. Let’s multiply it by 250/250. We get 500/750 or 500px by 750px which will work fine.
Changing the Image Sizes in WooCommerce Using Your Knowledge of Aspect Ratios
Now, where exactly can we control the picture sizes in WooCommerce? That’s pretty simple. It’s under WooCommerce > Settings > Products > Display. There you can choose the sizes for the images that will appear on the shop page (Catalog Images) and the image that will appear on the product page (Single Product Image). The Product Thumbnails are really tiny. Those are used as the gallery images for a product. Let’s find a really small size for those. Let’s multiply 2/3 by 25/25. 50px by 75px still seems pretty big. Let’s multiply it by 10/10. 20px by 30px seems like a better size.
Before deciding on a ratio to stick with, I would recommend using CSS, first, to resize the image products. Use whatever images you want for the products and use CSS to give them a fixed width and height. For example with the products above, we could have given all the images on the shop page a fixed width of 180px by 270px. This would’ve distorted the images, but we could at least see what the images will look like with their natural sizes. It’s always best to stick with an image’s natural size instead of using CSS to resize the image.
That’s about it. I hope it made sense for you. Watch the video above if it didn’t.