The Definitive Guide to Shopify Image Sizes in 2022
Shopify image sizes can be a merchant’s minefield.
Choose the best image sizes and your store will look amazing on every device. Choose the wrong ones and well, your sales will plummet.
In this post, we’ll cover everything you need to know about Shopify image sizes. By the end you’ll be poised to optimize all of your images and deliver the best shopping experience possible.
Sounds good? Let’s jump in.
Why Shopify Image Sizes Matter
Imagine you walked into a store and everywhere you looked there were products thrown about on shelves. Imagine the layout of the store was difficult to navigate, and the merchandising had no consistent style.
You’d probably turn on a dime and head out the door, right?
Well, this is what happens when you don’t optimize your shopify picture sizes correctly. Your store can feel messy, unorganized and unprofessional - read: not good.
What’s more, improperly sized images can affect your store's loading time. And we know that a slow loading store can absolutely tank your conversions.
If your store currently looks like you’ve simply plucked your product images straight from the manufacturer, or contains grainy low-res photos, then it’s time to do something about it.
When you optimize the images for your store, you’ll deliver a cleaner, more enjoyable shopping experience that results in more conversions and sales for your business.
📝Editor’s Note: How much extra revenue can you make?
Optimizing images is an amazing way to boost conversions. But another essential tactic is adding upsells to your store. ReConvert lets you add a fully optimized upsell funnel in just a few clicks. How much extra can you make? We analyzed 10,000+ data points from stores like yours, so you can answer the question yourself. Try our free upsell revenue calculator today!
Best Image Sizes For Shopify Stores
So, with the benefits of properly sized images in mind, here’s what you need to know about the different types of image sizes for Shopify.
First up, you’ll want your images to be large enough to show your product in detail, while at the same time, keeping them small enough to allow for speedy loading times.
When it comes to Shopify images sizes, generally the maximum size you can have is 4472 x 4472 pixels totalling a size of 20mb. Now, this doesn’t mean you should use images of such magnitude - it’s just the upper limit of what’s possible.
Typically, most Shopify experts advise that for square images you stick to a size of 2048 x 2048 pixels to hit the sweet spot between size and speed.
It’s also important not to go too small. Shopify product images that are smaller than 800 x 800 pixels won’t be able to be zoomed upon. This is a key consideration when thinking about how to maximize conversions.
Each Shopify theme may have it’s own specific image requirements. Different themes can crop your images differently which can affect how your store looks and feels. Therefore it’s essential to follow the image size requirements of your theme for best results.
Now, I realize that such advice is rather vague, so allow me to expand with information about how to size your images properly for different functions.
Shopify Product Image Size: 2048 x 2048px
Nailing your Shopify product image size needs to be your number one priority. Seriously, your product images are at the heart of what makes conversions happen in your store. Low-res, un-zoomable images simply won’t cut it here.
Given that shoppers can't physically inspect your products, you need to recreate that experience as much as possible with your images. People may need to evaluate the texture, material or other details up close before they’re ready to buy.
If the majority of your traffic comes in from mobile devices, then square images are the best way to go. Your Shopify theme will automatically resize images for the best user experience, and on mobile square images with your product centered produce optimal results.
For sizing, remember that it needs to be at least 800 x 800 pixels so customers can use the zoom function without seeing a pixelated blur on closer inspection. Also, once you’ve uploaded your images, always check them on both mobile and desktop to ensure everything looks good.
For each product Shopify allows you to upload 250 images - obviously this is overkill, but it is worthwhile uploading more images than less. Try to mix lifestyle images with pure product photography and display your products from multiple angles too.
For more on how to actually take good product photos, check out Shopify’s helpful product photography guide for making your products pop, even if you’re on a budget.
Shopify Collection Image Size: 2048 x 2048
A Shopify collection is a group of products on your online eCommerce store pages. Since the images are side by side, it’s essential to make sure all the Shopify images in your collection have the same image aspect ratio and image sizes. It’s extremely obvious if one product image does not have the same size as the others.
Shopify Slideshow Image Size: 1200-2000 width x 400-600 height
For many themes, the first thing your visitors will see is your homepage slideshow. That’s exactly why you need to make sure your image parameters are on-point here.
Large, high-definition images that pop off the page and snag attention are the order of the day. Now, different themes have different slideshow sizing requirements. For example, the popular Debut theme has four factors that’ll affect how your images display:
- Aspect ratio (aka width-to-height ratio)
- Image size
- Position settings for your image
- Slide height settings
Because the slideshow ‘slides’ from one image to the next, it’s a good idea to ensure all images are the same aspect ratio. This keeps things looking consistent and professional.
Shopify Banner Image Size: 400-600 width x 1200 height
Shopify banner images are quite similar to slideshows and often feature text overlaid. You’ll find them at the top of your homepage - and they're the first thing new visitors see, so you’ve got to make it count.
Just like your slideshow images, using high resolution images here is non-negotiable. It’s also worthwhile keeping the background toned down to give your text a chance to pop. Too much background noise will lower the contrast and confuse visitors.
Each theme has different requirements for banner images, so be sure to check what’ll work best on your store. You may also need to consider defining the height of your images for mobile devices. With banner images, quite often what looks good on desktop can be awful on mobile.
For example, when using the popular Debut theme, the sides of your banner image get chopped off on mobile. It’s possible to remedy this by adding code to change the alignment, aspect ration and padding. If coding isn’t for you, you can also just use a hero image with your design and copy in the center of the image so it appears on all devices.
With Debut, there is no specific size recommended for banner images, however, a width of 1200-2000 pixels and a height of 400-600 pixels generally works well.
Shopify Logo Image Size: 450 height x 250 width
Of all Shopify image sizes, the logo is one that throws many merchants off. I know I’ve had my fair share of uploading logos that look way out of whack with the rest of the site.
The official Shopify logo image size recommendation is no larger than 450 height x 250 width. This of course doesn’t mean your image size has to be exactly those dimensions. However, in many themes, the sidebar is 250px wide, so keep your logo below that figure for the tidiest appearance.
You may also opt to go with a square logo (aspect ratio 1:1) as this type of image will look good just about anywhere on your site. Again, keep an eye on the maximum dimensions - 200px x 200px is a safe bet here. Again, some themes (such as the Turbo theme) may have special requirements so always check first!
Pro Tip: Don’t have a logo? Use Hatchful - Shopify’s free logo builder to create a simple logo for your store today.
Image Optimization: How to Perfect Your Shopify Image Formatting
Ok with a handle on the best image sizes for your Shopify store, the next thing to consider is what kind of image formats you’re going to use.
Let’s explore some of the most common image formats found in the world of eCommerce photography. Each comes with their own pros and cons you need to be aware of.
JPG is probably the most commonly used image file type for Shopify stores. It’s got excellent colour range plus a small file size which lends itself to speedy loading. JPG’s compression abilities offer an excellent balance between quality and size. It’s for this reason that Shopify actually recommends merchant’s use JPG for images on your product page.
Another super common image format used in Shopify stores is PNG. PNG is awesome for eCommerce websites because it allows you to reduce image file size, without reducing overall image quality. Plus, PNG also supports transparency which gives you greater control over your store’s design. One problem with PNG is it’s lossless compression - this means the image file size can often be very large.
GIFs are a universally known image format that are useful for short animations or product explainers (Super popular on Shopify Dropshipping Stores). The GIF image format limits your pictures to only around 250 colours, so they’re not the most vibrant. However they can work great when used in conjunction with other image formats.
TIFF is a useful image format that’s supported by several web editing apps. This means it’s easy for designers and merchants to edit their images and tailor them for marketing campaigns. TIFF offers high resolution and allows you to save several images in one file. However, like PNG, thanks to lossless compression, the file size tends to be on the larger side.
If you’re confused about which image size to use, then it’s always wise to opt for JPG/Jpeg. As we mentioned before, JPG strikes the balance between file size and image quality better than any other image format.
Expert Tips for Optimizing Your Shopify Images For Conversions
Ok, with the best Shopify image formats and sizes under our belts, let’s look at how you can go above and beyond your competitors and create images that directly contribute to more conversions and sales.
1. Give Your Images Names
Most merchants power through hundreds of product images without pausing to change the default camera name.
But as someone with a penchant for SEO, I can tell you that this is a massive mistake. See, your image names play a role in ranking your product pages for specific keywords.
Search engines not only crawl the text on your pages, but they also assess image file names to better understand the content of the page.
For example, take this product page from Allbirds:
Instead of just going along with the standard camera file name (DCHIMAGE110.jpg), Allbirds have renamed each file with a descriptive title: ‘Men_s_Wool_Runners_-_Natural_Grey__Light_Grey_Sole’
This helps Google to understand and serve this page to prospective customers who are searching for terms like ‘Grey wool runners’.
2. Compress Your Images
Almost 50% of consumers won’t wait even 3 seconds for an ecommerce site to load. So, it’s imperative that you do everything in your power to speed up your pages.
Decreasing the file size of your images is one of the most effective ways to tackle slow page speeds. A good rule of thumb for image sizes is to keep them under 70kb for optimal performance.
Thankfully, Shopify already compresses your images to some extent. However, you can also use free tools TinyIMG or CrushPics to compress your images too. Such tools allow you to control the amount of compressions and bulk-process many files at once.
3. Use a Consistent Style Across Your Online Store
Human eyes love consistency. When selecting images for your store, always keep things looking consistent to create a more professional feel. For example, check out how Shuppa uses a palette background combined with simple product photography to deliver a slick browsing experience.
Obviously, you can arrange a professional photoshoot to capture similar images. However, if you’re on a budget, digital tools like photoshop and Canva both have the ability to remove/add backgrounds to create this consistent visual shopping experience.
4. Include Lifestyle & Product Photography
For most products, a combination of both regular product photography and lifestyle images will help you get the most conversions. Pure product photogra[hy is important so customers can inspect product details - while lifestyle shots help users visualize the product in real life. For example, here’s a kids duvet set from Hemtex:
See how styling the product in lifestyle pictures increases it’s emotional appeal? This is the same effect you also want to create with your products to boost conversions and make more sales.
5. Use A/B Tests to Find the Best Images
Finally, just like everything else in your store, you should be testing your images to see what performs best. You can test things like:
- The number of product images per page
- The styles of images that work best
- How many images you have on each product collection page (10, 20, 100)
You can use a heat mapping tool like hotjar to see how customers are interacting with your images. Or another simple way to gather feedback from customers about their image preferences is with a simple post purchase survey on your thank you page.
Shopify Image Sizes FAQ
Here are a few of the most common questions we see on the web about Shopify image & banner sizes:
Does Shopify Reduce Image Size Automatically?
Shopify automatically reduces & compresses image sizes for merchants, but it's not always enough to create a fast storefront.
In cases like these, we recommend a free tool like TinyIMG to quickly compress images without losing quality.
Is there a Best Shopify Image Size?
Shopify doesn't set a one-size-fits-all for images, instead- There are ideal sizes for different types of images.
Shopify banners should be different sizes than your product images, which shouldn't be the same size as your logo, and so on.
Luckily, the guide above should give you all the information you need to optimize your store's images.
Free Shopify Image Size Apps & Tools
Below are some resources that will help you optimize your image sizes:
- Shopify Image Resizing Tool - a nifty tool that does exactly what it says on the tip - resize your images quickly and easily for better performance.
- Google Page Speed Insights - A helpful tool from Google that’ll help you weed out slow-loading images on your site for snappier loading times.
- Unsplash - a collection of high-quality royalty-free images you can use on your store and in your marketing campaigns
- Burst - a similar collection of professional images from Shopify for use in your store and marketing efforts.
- Canva - A handy image editing tool without the steep learning curve of photoshop. Use it to resize, edit and change the file format of your images.
Shopify Image Sizes Wrap-Up
Optimizing your Shopify image sizes can be a tall order. It’s one of those jobs that you think will take you an hour or two, but ends up taking much, much longer.
However, if creating a killer shopping experience is your aim, you must spend time refining your images for performance and sales.
Remember, in ecommerce, customers can’t physically hold your products. That means your images are literally one of the most important components influencing their buying decisions.
Remember, that lots of Shopify themes have unique image size requirements, so always double check to ensure your images are on point.
Proper Image sizes boost conversions. But they're not the only way...
If you’re looking for another way to get more conversions check out ReConvert - it’ll help you upsell customers post-purchase for a bigger cart value and beefier profits. Get started today with a 14-day free trial!