Why are all of my images different sizes?

You’ve spent hours uploaded all of your product photos to your Shopify store only to look at your Collection page and find that all of your images are different sizes on that page.

When you contact your theme support or the Shopify Guru team:

THEY SAY:
“Yes, your images need to be cropped to the same aspect ratio before they’re uploaded to your store. The themes and Shopify don’t auto resize images to be the same size, yet.”

YOU THINK:

via GIPHY

Yes, this means you have to one by one crop all of your images to the same aspect ratio and then upload them again.

So now you’re thinking:

What is an aspect ratio?
What ratio should I use?
How do I crop them?
Does this apply to all of my images and not just product images?
And how can I make sure this never happens again?

Welp, grab yourself a big ol’ cuppa coffee and get comfortable, because today, we’re getting tackling this question.

WHAT DOES ASPECT RATIO EVEN MEAN?

Our best bud Google says that “Aspect ratio is the ratio of the width to the height of an image or screen.”

Still not sure? Picture this.

You have a stick that you’ve picked up off the ground. It doesn’t matter what the length of the stick is. You decide that you want to make some shapes with the stick. You make a square. The bottom (width) of the square is 1 stick long, and the side (height) is 1 stick long. As long as the width and the height are the same, it’s a square. (2 sticks by 2 sticks, 3 by 3, all squares)

If you want to make a rectangle, you can have a bottom be two sticks long, and the height 3 sticks high.

The best parts of aspect ratios are that your images can be different sizes but as long as your ratio is the same all of you images will show up the same on your page.

WHAT RATIO SHOULD I USE?

My preference is to use the ratio 2:3 which means it’s a tall rectangle. The reason that I like to use a tall rectangle instead of using a square is that because tall rectangles display larger on collection pages and product pages.

I do think that it’s important to mention that although you’re cropping your images and NOT RESIZING the image, you still want to make sure that your images are at least 1024px wide on the shortest side. By having them at least 1024px wide on the smallest edge you'll ensure that you have a high enough resolution to zoom in on your product image if needed.

HOW DO I CROP MY IMAGES?

It is possible to crop your images within the Shopify platform; however, I do suggest using something like Photoshop or pilxr (free) to crop your images. The reason that I prefer to use these is that once you set up the crop tool once the aspect ratio that you want to use every time you open the tool the crop will be set to the same size. Plus the built-in editor can be a little janky sometimes.

Once you’ve gone through your images and resided them and optimized them for SEO, go through and drag and drop them back into your product image section.

DOES THIS APPLY TO ALL OF MY IMAGES + NOT JUST PRODUCT IMAGES?

Yes! Cropping your images applies to groups for images to make sure they all look consistent.

Each of the groups below would want to have specific aspect ratios for all of the images in that group:

Slideshow posts
Feature Blog images
Collection Images
Product images