How to Get Your Shopify Image Sizes Picture Perfect
Does size really matter?
Well, when it comes to Shopify image sizes, apparently it does.
Open any single web store you can think of and pay attention to where your focus is drawn to. Is it the biggest, prettiest picture on the screen?
No surprises there.
But size is a lot more than just what we see on the screen, especially in the Shopify world.
Some of the effects of image sizes aren't even visible to the naked eye.
Here are the 3 pieces to the image size puzzle:
Space the images take on the screen
Dimensions and pixel number of the images
File sizes of the images
These elements affect how visitors view your store, the quality of images you provide and even the loading speed of the pages they are on.
We all want to make sure we are using the right image sizes in these aspects so that we can attract visitors to our store, and even more importantly keep them there.
That means that the images should be large and detailed enough so that it feels like your product is on display and can be seen in detail.
At the same time, you don’t want them taking up too much space or slowing your pages down.
And even more importantly you want your Shopify image sizes to be consistent so that your pages look neat and tidy.
Nobody likes walking through a shop where half the products are strewn on the floor and there’s a murky puddle of unidentifiable liquid on the floor.
It’s not always so easy to get it right though.
You might find that being consistent with your image sizes is difficult when your theme has strictly defined dimensions.
Or maybe your image file sizes are too big and heavy which is causing your store to run slow.
Thankfully, there are plenty of tips, tools and tricks which can help you overcome these issues.
So, where to start?
What are the Ideal Shopify Image Sizes?
As you can imagine this is quite a broad question, and the answer totally depends on which images we are referring to.
You need to consider which image sizes are recommended by your Shopify theme and look alluring on your store, but also take the limitations of Shopify into account.
Shopify has set limits for images of 4472 by 4472 pixels (20 Megapixels) and file sizes of up to 20 MB.
Now those are fairly hefty, and frankly having 20 MB images on your store is going to do your loading times no favors whatsoever.
They are important to keep in the back of your mind.
But let’s start by looking at the main ways images are used in Shopify and break them down to what’s important for each:
Slideshow image sizes
Collection image sizes
Product image sizes
Shopify Slideshow Image Sizes
The images that show up in your slideshow are the number one thing that newcomers will see when they land on your store.
It’s going to be like meeting your mother-in-law for the first time. You don’t want to show anything you regret.
That’s why it’s vital you make those initial impressions last.
Quality images that stand out.
And if there’s any of your Shopify image sizes where it’s okay to compromise on file size, it’s here. You can go for a solid high-resolution image without feeling too guilty, even though it’s likely to slow your page down a fraction.
Some of your fancier visitors will be viewing on high definition vision-shattering screens. So, you might want to give them some eye candy to remember you by!
There’s been little compromise on quality and that’s going to have a great effect on any fresh visitor to the store.
But listen, just because the images look great don’t mean that they must have huge image file sizes.
Scroll down if you want to find out how to optimize your Shopify image file sizes.
Shopify Collection Image Sizes
Your collection images represent a group of products, so the image size totally depends on your products.
What can be said though is that you should keep your collection image sizes consistent and coherent with each other.
This applies to all your Shopify image sizes, but collection images are easily comparable to each other so make sure their height-to-width ratios are always the same.
Remember: height to width ratio.
That’s the ticket.
Shopify Product Image Sizes
Getting your product images right is vital to landing sales. Makes logical sense, right?
You might assume that means that you need to have a landscape masterpiece painting of your products to get the message across. That might be the case when it comes to your slideshow images, but for your products it’s usually simplicity that counts.
That means having quality images with a simple background so that your product stands out.
Check out Brilliant Bicycles store for example.
Their products offer multiple images from different angles, all being the same size. There’s no tricks or frills with their images and that’s often what works best.
In general, it is best to go for more square Shopify image sizes when it comes to your products. They posit themselves better for mobile use and if a lot of your traffic comes from mobile users then you should make this a priority.
We recommend going for Shopify image sizes of 800 by 800 pixels and above though, because anything below that and customers won’t be able to use zoom functions.
What sad times they would be!
PRO TIP: If you’re struggling to keep your number of product variants within the limits set by Shopify then fear not! Our post on the Shopify variant limit lists the finest plugins which will help you work around this issue.
Resizing Shopify Image Sizes
Alright then, we know what kind of image sizes to go for.
But you might be scrolling through your database now and noticing that your images don’t have any of the kind of properties we’ve mentioned.
So, how do we make it happen?
It’s a solid piece of work, but it will just narrow down your images so that the longest dimensions fit the options they offer. The tool won’t adjust the other dimensions of your image, so in that sense is limited.
If you need a more advanced tool that works in more detail on one image at a time then go with Photo Resizer.
It’s totally free, with the ability to crop your image as well as giving it the height-to-width ratio you want.
So, if you wanted product images which are square shaped and are resized to 800 by 800 pixels then you can easily make it happen.
Just make sure to crop your image before resizing it, or it will be smaller than you want it to be.
PRO TIP: Use Katana’s Shopify integration to make sure that your orders are getting fulfilled on time. That way you make sure all your efforts in getting your Shopify image sizes on point don’t go to waste.
Optimizing Shopify Image File Sizes
Okay, so you got your images to the physical size and shape you want.
Now we come to the final component: file size.
You might not think that this matters, but actually large Shopify image sizes can drastically affect the loading speeds of your pages. You might not even notice this yourself, but don’t forget that not everyone has as fast an internet connection as you do.
There are plenty of free online tools you can find to check your page speed, such as GTmetrix.
But the real question is, how do you solve this?
Well, what you can do is compress your images so that they don’t take up as much space.
This method works best for JPEG files, and keep in mind that with some image file types like PNG you will have to convert them before being able to compress the images.
But in general JPEG is the recommended file type for Shopify because it is just so versatile.
There are online image compressors such as Compress JPEG which can do the job of compressing for you, and they do it pretty well too.
Here’s a side by side comparison of two images, one which has been compressed and the other hasn’t. Can you guess which is which?
If you did then congratulations, you have the eyes of an eagle (the right one is compressed for those of you who have more typical eyesight).
The difference really is negligible right?
But the file size difference is significant. The left one takes up 4MB while the right compressed version is less than 1MB.
Compress your images and your whole store is going to feel a lot smoother to browse.
Quick Tips for Your Shopify Image Sizes
Keep your height-to-width ratios consistent for your images, especially when it comes to Shopify product image sizes. It’s going to keep your store nice and tidy, no tripping on any loose bits.
Every time you add an image check how it looks on mobile as well. Usually square images work best for both.
Check to see if your theme comes with a guide. Often, they give guidelines on which Shopify image sizes and formats work best for your theme.
Compress all of the images on your store and make it load faster for your customers. It’s going to make their shopping experience so much more pleasant.
Write down the image sizes that are ideal for your store after you have worked them out. Then if you bring in professional photographers for your products you can let them know beforehand what you need. It’ll save you a bunch of time!
What Comes Next?
It’s great to have your aesthetics and page speed in order. After all, first impressions count.
But beyond that you want to make sure that after your customers click the buy button that they get their orders on time.
That’s why you should consider a Shopify Order Management System to ensure this happens.
It’s especially the case for those of you that make your own products and need to keep track of materials as well as finished products.
We know how much of a pain that can be.
That’s why Katana Smart Workshop Software has come up with an all-in-one solution for makers out there who are:
Overloaded with spreadsheets
Managing Shopify inventory inefficiently
Struggling to track raw materials
Not knowing when to purchase more materials
Orders getting delayed or lost
This way all of your hard work in making those Shopify image sizes picture perfect will finally pay off!