Facebook pixel

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 in 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.

Automatically optimize your Shopify images! 

Install TinyIMG

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 px 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 px 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 px.
  • 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

Up to
450 x 250

Image with text, Product images, Collection images 

1024 x 1024

Mega menu images 

360 x 360 

Gallery

800 x 800

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

1800 x 1000

Slideshow banner images, Testimonials image

1600 x 1000

Newsletter popup image 

425 x 575

Video placeholder image 

1600 x 900

Newsletter section image 

1600 x 300

Blog page top banner, Contact page (top banner)

1800 x 800

Password page background image 

1600 x 1000

Checkout page (top banner) 1800 x 300

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

Shopify product image size

The best Shopify product image size is 2048 x 2048 px for square images because then your pictures appear consistent both on mobile and on desktop. Also, this size does not compromise your image quality and allows users to zoom-in on your product pictures.

The minimum image size for Shopify products should be 800 x 800 px, and this is the smallest size that still allows users to zoom-in on your pictures. The maximum image size that Shopify allows is 4472 x 4472 px and everything larger than that will be resized.

Different themes may also have recommended image sizes. For example, the Split theme recommends uploading square images for products, up to 1920 px in width. It’s important to pay attention to recommended dimensions otherwise your images may get cropped.

The best rule is to resize your square images to meet 1:1 aspect ratio. Rectangular images should be close to a 3:1 ratio. Remember to pay attention to resolution because it defines whether your pictures will appear in good quality.

Automatically optimize your Shopify store images with TinyIMG!

Start optimizing

Shopify collection image size

The best Shopify collection image size is 1024 x 1024 px. However, here as well as with other images on Shopify, image resolution cannot exceed 4472 x 4472 px and should not be smaller than the recommended size of 800 x 800 px.

Collection image sizes need to stay consistent throughout the gallery, so you should always use the same dimensions. Square images usually give the best look.

Most Shopify themes offer to add a collection banner to your collection pages. You can add different ones to each collection or use the same image. The best size for a collection banner is 2800 px in width and no less than 1000 px in height. Bear in mind that your uploaded image may still be slightly cropped depending on the device where it’s displayed.

Example of collecion list

Shopify image size for Slideshows

The best Shopify slideshow image size is 1200 px to 2000 px in width, and 400 px to 600 px in height. It’s best to make your images aligned in the middle since switching between mobile and desktop will display them slightly differently and sides may get cropped.

For the best look, make all your slide images aligned in size. Choose one size or ratio, and apply it to all your slide pictures.

Different themes may have different recommendations for the size of your slide images, and it’s important to check out your chosen theme’s recommendations. Otherwise, your pictures may not look as good as you’d like.

Shopify logo image size

The best Shopify logo image size is under 450 x 250 px. This is the largest size that Shopify allows for logo images, but it doesn’t mean it should be this exact size.

The larger your logo is, the longer it will take to load. Also, the sidebar width is around 250 px with some themes, so it’s better if your logo is smaller than that.

You may also use a square logo image (1:1 in ratio), which is a safe choice to ensure that it will look good anywhere on your page. Just make sure that your dimensions do not go over the maximum recommended size of 450 x 250 px. A good resolution for a square logo would be 200 x 200 px.

Just like with other images, the logo size also depends on your chosen Shopify store theme, so it’s important to check what size is recommended for your specific theme. For example, the Turbo Shopify theme suggests using 400 x 100 px logo image for the main menu, 100 x 50 px for mobile, and 250 x 200 px for the footer. If you choose a different theme, recommendations may be slightly different.

Shopify image with text overlay size

The best Shopify image with text overlay size is 1800 x 1000 px. This applies to banners, homepage images, and featured blog images for your shop. However, the size of images with text overlay highly depends on your chosen theme, so make sure to refer to the theme recommendations.

Just to be clear, the banner image is the same as the hero or homepage image. It’s the first image under the menu and the largest one that appears on the screen when someone visits your store.

The best aspect ratio for hero or homepage images is 16:9, which means they should be landscape. The first number suggests how wide your image should be, and the second one refers to its height. So the image should be almost two times wider than its height. The 16:9 ratio is a good one to refer to regardless of your chosen theme.

Shopify blog image size

The best Shopify blog image size is 1800 x 1000 px. This size is the optimal choice for the featured image and will help your blog look professional and organized. The best size for pictures in the content is 1000 x 350 px, but it may vary depending on how you want your images to appear.

The minimum dimensions for a featured blog image are 1400 x 788 px if you’re aiming for a 16:9 ratio. As well as with other Shopify images, the size of a featured blog image cannot exceed 4472 x 4472 px and 20 MB, or it will be resized for you.

Shopify background image size

The best Shopify background image size is 1920 x 1080 px. This size should provide an optimal look for your store but it may get cropped depending on the client’s device.

The minimum resolution for the background picture should be 1024 x 768 px. In general, the best ratio is 16:9. The largest size is the same across all Shopify images, and it’s 4472 x 4472 px. As you may know, smaller images load faster. Alternatively, you can use an image optimization app such as TinyIMG to automatically compress large images.

Keep in mind that background image sizes may differ based on a theme, so it’s always a good idea what sizes are recommended for your theme.

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.

Keep all your Shopify images well optimized with TinyIMG!

Install now

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.

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.

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 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.

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.

Frequently asked questions

Does Shopify have image size requirements?

Yes, Shopify allows uploading images up to 4472 x 4472 px, and the file size has to be under 20MB. However, this doesn’t mean that this is the best size. These are just the maximum parameters that Shopify allows. The recommended size for square Shopify product images is 2048 x 2048 px.

Does Shopify automatically resize images?

Yes, but only if they don’t meet their set size parameters. It means that if your images are larger than 4472 x 4472 px, Shopify will automatically resize your images. But they may not look as you intended, so it’s better to resize the pictures yourself.

Does Shopify automatically compress images?

Yes, Shopify automatically compresses images, but you may lose image quality. If you wish to keep the best picture quality, you need to manually compress images before uploading them to Shopify. Even better, use an image resizer app such as TinyIMG that automatically compresses images.

How to optimize images for Shopify?

The best way to optimize images for Shopify is using an image optimization app. For example, you can compress images with the TinyIMG app. This and similar apps also help with SEO optimization, which means that your Shopify products will be easier to find on the search engines.

About the author
Nikoleta Kokleviciute
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!