Guide to Shopify Image Sizes 2021

Guide to Shopify Image Sizes 2021

Images play an important role in your Shopify store. They make or break the impression for a visitor, which then impacts your overall conversions and sales. But there’s more to images than just the aesthetics of them all. The quality of the images, impact on page load times, zooming capabilities and marketplace requirements if you’re selling on multiple platforms, everything factors in. 

But it all starts with one thing at the core of it all - image sizes. 

In this article, we’re sharing everything you need to know about Shopify image sizes. The recommended dimensions, how to keep your images optimized for all channels and devices that your products are being viewed on and how they can be used to improve the user experience you offer to drive more conversions on your store. 

Recommended Shopify image sizes

Recommended Shopify image sizes are basically the best dimensions of images that can be used on your store. Following these dimensions will simply ensure your images don’t break when viewed across different devices or on different channels, to deliver a great on-site experience to customers

Let’s just say it’s about ensuring your visitors don’t see a blurred or an overly stretched image of one of your products! Imagine how bad that impression would turn out to be. 

What is image optimization? 

It means optimizing your Shopify store for the following aspects: 

  • Recommended Shopify image sizes 
  • Page load time 
  • Search engine optimization 

Basically, image optimization usually consists of readjusting your image sizes and compressing them into smaller file sizes to ensure they load faster and adding attributes to the images so that Google can understand what the image is about. 

Why should you focus on Shopify image sizes and image optimization? 

You’ve spent hours perfecting your product pictures. You’ve invested even more time and resources in editing those pictures to make each of your products stand out. Now if you’re wondering why you should focus on Shopify image sizes and image optimization also, let us give you a few concrete reasons: 

  • Enhances user experience: When your images are optimized to be seen across all devices in a non-blurry, non-stretched manner, online shoppers are able to visualise the products better, understand their specifications and get a virtual look and feel. This enhances their overall shopping experience. 
  • Improves page speed: When your images and their sizes are optimized, they don’t make any of your web pages heavy. No matter how many images you add on a page. This helps ensure that your page load speed is well within 3 seconds; which is just how much the consumer is willing to wait. 
  • Supplements other SEO efforts: When your images are optimized, page load speed is impressive, it adds to your overall SEO efforts. It indicates to the search engine that your website has what online shoppers are looking for, helping you rank higher. 

Now that you know why paying attention to Shopify image sizes and image optimization is important, let’s dive right into the details. 

How to choose the best Shopify image sizes? 

Now this bit is tricky. You need to have images that are large enough for a visitor to zoom into for more details. But at the same time, you need some in a size that is optimized for not taking up too much space or slowing down your page load times. 

So here are a few things to keep in mind:

  • Shopify lets you upload images of up to 4472 x 4472 pixels with a file size of up to 20 MB. 
  • Shopify experts who work on the design and development of online stores, recommend using 2048 x 2048 pixels for square product images. This size accommodates offering high-resolution product images to visitors as well as zoom-in capabilities
  • The minimum size you require to offer zoom-in on images has to be more than 800 x 800 pixels. 
  • Square images require a width:height ratio close to 1:1 but narrower. But rectangular images need something closer to a 3:1 width to height ratio. 
  • In terms of resolution, it is recommended to maintain 72 dpi. You can always upload higher resolutions, subject to the Shopify image file size limitations, but that will not have an impact on your image quality. 

Best Shopify image sizes that are commonly used 

After working with innumerable Shopify experts, optimizing images for thousands of merchants, here are some of the best Shopify image sizes to use. These cover different placements of images that serve different purposes on your online store. 

Here’s a general overview of the most commonly used Shopify image sizes: 

Image type 

Width x Height (pixels)

Image type 

Width x Height (pixels)

Favicon

32 x 32 

Featured promotions 

840 x 840 

Logo (main menu) 

400 x 100

Image with text, Product images, Collection images 

1024 x 1024

Logo (mobile)

100 x 50

Gallery 

800 x 800 

Logo (footer)

250 x 200

Logo list 

400 x 300 

Mega menu images 

360 x 360 

Slideshow banner images, Testimonials image

1600 x 1000

Image with text overlay - Banner images, Blog featured image, Full shop background image

1800 x 1000

Video placeholder image 

1600 x 900 

Newsletter popup image 

425 x 575

Blog page top banner, Contact page (top banner)

1800 x 800

Newsletter section image 

1600 x 300

Checkout page (top banner)

1800 x 300

Password page background image 

1600 x 1000

   

Recommended read: TinyIMG optimizes 10,000 images and saves 550MB for Coast to Coast Collectibles

Best Shopify image sizes for products 

Product images have a direct impact on your on-site conversions. It’s what entices the shoppers to either make a purchase or not. The ideal product image is one that actually makes the ‘product’ stand out from the rest of your store’s design, including the background. 

Some of the best practices for product images include: 

  • Adding product images from different angles to offer a better perspective of the product to the visitors 
  • Keep the size of all the images consistent with one another 
  • Choose Shopify image sizes of 800 x 800 pixels and above to offer zoom-in on product pictures 
  • Make sure product images offer a consistent visual experience to visitors across all devices 

Best Shopify image size for Slideshows 

The Slide show images are what a visitor sees the moment they land on your website. It’s a make or break element. If they’re not enticed enough, they’ll leave within seconds. But if they are, they’ll go on to exploring your product ranges. 

This is where you need to have images that stand out. So don’t be afraid to use some of your best, high-resolution images here. 

Don’t worry about your page load speed. For that, you can use apps like TinyIMG to keep the best of your images, well-optimized. 

The recommended Shopify image size is 1200px to 2000 px in width, and 400px to 600px in height. 

Best Shopify image size for collections  

Also known as a gallery, collection images represent a group of products. So in this case, the ideal Shopify image size depends entirely on the product

The one thing you do need to keep in mind is that the collection image sizes need to remain consistent and coherent with each other. This means their height to width ratio needs to remain the same. 

Square images work well here as well. If you want to offer zoom-in on your collection images, make sure you’re using a size higher than 800px by 800px. 

Example of collecion list

Why are default Shopify theme images not good enough? 

A number of brands start their online store using a popular or a free Shopify theme. Now while these themes are editable, they come with some pre-existing images in certain sizes that the developer at the moment felt did justice to the design. 

Most themes come with a default image ratio of 1:2. But that does not mean you edit your product images to fit their size and ratio. That should completely be based on the products you’re selling and what ratio best helps you bring it to the forefront in an image. 

As a golden rule, follow the best Shopify image sizes to offer an enticing browsing experience to your store visitors. But do not ever go reverse, compromising on your images to fit into a theme you bought. 

You can also make use of some of the best Shopify apps like TinyIMG to help you optimize the images for the theme’s best performance. 

Now that you know all about the recommended Shopify image sizes, let's move on to the next step. The image formats. 

How to choose correct image format for your Shopify store 

Now before you start working on optimizing your product images, let’s take a look at the most commonly used image file formats in the world of product photography. 

We’ll also take a quick look at what each brings to the table, so you can make an informed decision. 

1. JPG/ Jpeg 

JPG is one of the most commonly used image file formats. It is widely used across different platforms and tools as it boasts a small file size with a very good color range. Its easy compression also allows you to strike a balance between the image quality and the file size. Shopify recommends using JPG file format for images for product pictures as it offers good quality as well as a relatively small size, to keep the images optimized. 

2. PNG 

Another common format used for Shopify images is PNG. It’s commonly used as it lets one reduce file sizes without reducing the overall quality of the image. In addition to that, it supports transparency, giving store owners and store designers more control. The only downside of this image format is that the file sizes can be very large because of the lossless compression. 

Keep all your Shopify images well optimized with TinyIMG!

Optimize your images

3. GIF 

The GIF Shopify image format offers small file size by compressing and reducing product images to 256 colors only. This format is mostly used when stores want to add a little animation across their store pages. It is also a format that is universally recognized by browsers, making sure that the GIFs are viewable to all.  

4. TIFF

TIFF is another lossless compression image format that Shopify stores can make use of. It is widely supported by a range of editing and web apps, making it easier for store owners and marketers to play with the images to tailor them for campaigns. It offers high quality resolution and also lets you save multiple images and pages in a single file. Although, this file size often tends to be very large. 

5. BMP

A commonly used image format in the Windows ecosystem is BMP. It offers data compression and universal compatibility. Since the format is uncompressed, it offers perfect images. But the file sizes are the largest. So either you have a Shopify image size optimizer on your side, or you should go for the other image formats. 

There are also other image formats like WebP and SVG available. But overall, JPG is the most convenient image format as it combines both the things that your Shopify store needs - a good quality image and a smaller file size that does not impact the load time of your store. 

Now that you’re well-versed with the image formats available on Shopify, it’s time to introduce you to a new aspect. Making your images responsive as more and more online shoppers move to mobile devices to browse websites. 

If you’re wondering how image formatting affects Shopify SEO, read this article

How to make Shopify images responsive for mobile devices

According to Pew Research, 67% of the global population owns a mobile device today. Their survey further goes on to highlight how 79% of smartphone users have made a purchase online using their mobile devices in the last 6 months. For that matter, the survey and studies also suggest that mCommerce in all eCommerce is expected to rise to 72.9% by 2021 and the years ahead. 

This is what makes it critical for Shopify stores to ensure that all their images are responsive for mobile devices

Now Shopify automatically resizes your images to fit smaller screens. But certain images may require manual editing to ensure that the core elements being highlighted in the image do not get compromised on. 

Images suitable for mobile devices

Remember, desktop and mobile screens vary both in size and orientation. So pay close attention to how your images get adjusted to mobile devices. 

Shopify experts recommend using square images, keeping your product vertically and horizontally centered. 

Another thing to keep in mind is the size of your images on mobile devices. For instance, a 4000px by 4000 px image can actually turn out to seem blurry when resized for mobile. In this case, reducing the size of your image, keeping mobile in mind, can help you ensure you offer a good visual experience to mobile shoppers. 

A few tips we’d like to share for keeping your images mobile friendly: 

  • Find the center spot of your image; preferably one that brings your product in-focus 
  • Include warm lighting to ensure an enticing mobile visual experience 
  • Square images work better on both desktop and mobile devices 
  • Use lazy loading to ensure your website loads faster on mobile devices 

Pro tips for Shopify images to convert store visitors into customers 

There are a number of tips that eCommerce experts have shared over the years to optimize Shopify images. Some of the tips we’ve seen work include: 

1. Include variety of images 

Imagine having to make a purchase decision based on seeing only one angle of a product. There’s a high chance you might end up making the wrong decision in terms of size or the overall look of the product. This is why it is important to include a variety of images. Some that highlight your product features, some that show them in use, some that display your offers and discounts, and so on. 

2. Create a personal/ unique perspective 

With the competition increasing by the day, it’s important to make an impression on your store visitors. You can do this only by creating a personal/ unique perspective in your images. Add a hint of your branding and your messaging in your images to create a better brand recall. 

Now using stock images can be simpler and faster. But stock images might end up being used on a number of other sites. So go the extra mile and make the effort to give images a unique perspective that is relevant to your brand. If you do want to use stock images for things like banners and blog feature images, you can explore these websites: 

  • Shopify Burst 
  • Unsplash 
  • Gratisography 
  • Pixabay 
  • Pexels 

3. Use consistent editing for all your images 

To give your store visitors a consistent experience across all pages, remember to edit your images in a similar fashion. This includes the sizes you use, the theme you create using presets or even the smaller details like adding shadows behind products in the images. 

4. Show the product in use 

The images on your store shouldn’t just be showcasing your products or offers. They should also be able to help your visitors visualise how they can make use of the product in real. This is where including a few images that show the product in use, comes handy. 

Example of how to use tortilla press machine

Image shows how to use Tortilla Press Machine

5. Keep your image sizes optimized 

We know how important it is to keep your store up-to-date at all times. So as you add more product images, banners, blog feature images, etc to your store site, make sure that you don’t forget to optimize each of them. Having a Shopify app like TinyIMG can do the trick. The app will take care of the image optimization automatically, so that you can focus on other aspects of your business. 

6. A/B test your images to find what works for you 

There is no one-rule-fits-all approach when it comes to Shopify images. You need to find the sweet spot of what your store visitors like to see and what makes them want to make a purchase. So continually experiment with different types of images on your store and measure the impact closely. Find what suits you best and double down on it, investing in the right resources. 

How to add images to your Shopify store? 

Adding images to your Shopify store is very simple. Here are the simple steps you need to take: 

  1. Go to Shopify admin, click the product, collection, web page or blog post where you want to add an image 
  2. From the rich text editor, place your cursor where you want the image to be displayed 
  3. Click Insert image 
  4. Click Upload file 
  5. Select the image you want to upload and then choose an image size 
  6. Add image alt text to ensure the search engine knows what it is about 
  7. Click Insert image to add your image into the content 

Making an impression with the right Shopify images! 

We know it sounds like a lot of effort to tailor your Shopify image sizes so much. But when it comes to offering online shoppers a seamless experience, images have a bigger role to play than you expected! 

And of course, we can’t forget the search engines. Keeping your images optimized at all times will also ensure your store ranks for the right searches, driving high purchase intent shoppers to your site. 

Make sure your Shopify images are well-optimized at all times! 

Install TinyIMG
About the author
Nikoleta
Nikoleta is a Marketing Manager at TinyIMG, an app for image and SEO optimization for Shopify merchants. Nikoleta loves diving deep into digital marketing, eCommerce, social media trends, and creating content that benefits its readers!