Guide to Shopify Image Sizes

Guide to Shopify Image Sizes
By purchasing through the links on this page, you are giving us the opportunity to earn a commission. Your support is greatly appreciated!

In Shopify, image size matters more than you might think. Image size you use will have an effect on page load speed, zooming functionality, and how well your Shopify store is optimized for mobile.

In this article, we will share everything you need to know about Shopify image sizes. We’ll cover why Shopify image size matters, specify recommended image dimensions and file sizes, provide image optimization and responsiveness tips, as well as how to organize visuals to draw conversions.

Your store image optimization, speed and SEO performance improvement in one app

Optimize your store now

Why should you focus on image sizes for your Shopify store?

You’ve spent hours perfecting your product pictures and they look incredible. But what if your customers see overstretched or strangely cropped photos? Even worse - what if the customers leave the page before even seeing those photos because your website loads super slowly?

Paying sufficient attention to Shopify image sizes gives you these benefits:

  • 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 visualize the products better, understand their specifications, and get a virtual look and feel. This enhances their overall shopping experience.
  • Faster page load time. 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 to 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. If you need to make your website faster, read and use other Shopify store speed optimization tips.
  • Overall SEO improvement. 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.

You can achieve all that quite easily if you follow the best Shopify image optimization practices and use correct Shopify image sizes. Now let’s dive right into the details about best Shopify image size.

We already established that getting your image dimentions right means no blurry or overstretched images. After working with innumerable Shopify experts and optimizing images for thousands of merchants, we know exactly what are the best Shopify image sizes to use.

Here are the general Shopify image size recommendations:

  • maximum image size: 4472 x 4472 pixels;
  • recommended square image size: 2048 x 2048 pixels;
  • image file size: up to 20 MB;
  • image resolution: 72 dpi.

And here is an overview of the most commonly used Shopify image sizes for specific image types:

Image type 

Width x Height (pixels)

Image type 

Width x Height (pixels)

Product images

2048 x 2048

Newsletter section image

1600 x 300

Collection images

1024 x 1024

Featured promotions

840 x 840

Slideshow banner images

1600 x 500

Newsletter popup image

425 x 575

Shopify background image

1920 x 1080

Gallery

800 x 800

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

1800 x 1000

Mega menu images 

360 x 360

Blog page top banner, Contact page top banner

1800 x 1000

Favicon

32 x 32

Shopify logo

Up to 450 x 250

Checkout page top banner

1800 x 300

Video placeholder image

1600 x 900

Password page background image

1600 x 1000

Shopify product image size

Shopify product image example from brooklinen product page

While the biggest Shopify image size you can upload is 4472 by 4472 pixels, the best Shopify product image size is 2048 x 2048 pixels for square images

You can upload images as small as 800 x 800 pixels, this is the lowest resolution at which visitors will still be able to zoom in on product images. But at the recommended 2048 x 2048 pixels size, they will do it without losing any significant quality, letting shoppers see the finer details of your product.

Smaller images will look better on mobile devices, plus product photos larger than 4472 x 4472 pixels will be downsized automatically.

If your product image is supposed to be square, make it exactly square, with a 1:1 aspect ratio. For rectangular designs, a 3:1 ratio is the usual use. Remember to pay attention to resolution, getting it right helps retain the good quality.

TinyIMG can automate image resizing and compression - all you need to do is upload the photos

Start image optimization with TinyIMG

Your recommended image size can be different, depending on your theme. Check out our guide on Image sizes for some popular Shopify themes to get the best idea of what visuals to prepare. 

Shopify collection image size

Collection image size example form puravidabracelets Shopify store

Collection images also can’t be bigger than 4472 x 4472 pixels and 20MB. The best recommended Shopify collection image size is 1024 x 1024 pixels.

It’s not only the image size that matters, you also should be consistent. Images of the same dimensions and ratios on the site will look natural next to each other when the visitors scroll. For that, square images work best.

Many Shopify themes also include a collection banner for collection pages. You can either use a unique image for each or have the same image everywhere. Such images have size limits, too. Shopify collection banners should be 2800 pixels in width and at least 1000 pixels in height. Note that this type of image will be cropped based on the device your customer is using so make sure the content of the image is centered.

Shopify banner image size (hero image size)

Shopify banner image example from King Ice store

Shopify banner images should be 1200 pixels in width and 400-600 pixels in height. These images stretch across the whole screen at the top of the page. Whatever you decide regarding their size, treat your Shopify banner images with care, they are the face of your store. And just to be clear, the banner image is the same as the hero image.

The width of the banner image is pretty set, whereas the height will determine how much screen it covers. 600 pixels will take up pretty much all of the above-the-fold space the website visitors see upon entering. 400 pixels will leave some room for other elements of the page.

Another way of thinking about Shopify banner image size is in aspect ratio. The best aspect ratio for hero or banner 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. Aspect ratio is helpful because you have to ensure your Shopify banner images will rescale well for mobile users.

Shopify image size for Slideshows

Shopify slideshow image example from flatspot Shopify store

Shopify slideshow image size should be 1200-2000 pixels in width, and 400-600 pixels in height. The precise aspect ratio will determine how much above-the-fold space there is for other elements of the page. Make sure the subject of your shots is centered. Mobile and desktop devices will crop them differently, so the sides might get cropped.

The more similar your images are, the better the overall design will be. Align all your slide pictures in size or at least ratio.

Each theme can also have special recommendations on what image sizes it suggests for the best look. Check out the information available, and see what they say. Developers know what works for sure, so it’s a good guide to follow.

Shopify logo image size

Logo example from Death Wish Coffee store

The best Shopify logo image size is under 450 x 250 pixels. It’s important not to exceed this range because in most Shopify themes the sidebar is 250 px wide. However, it would be best to upload a logo smaller than 450 x 250 px. The bigger your logo is, the longer the loading time will be.

A square logo with a 1:1 ratio is a safe choice that works with all themes, everywhere on the page. With all the limitations in mind, a good size for a square Shopify logo image should be around 200 x 200 px, making it look good in all cases.

Just like with other images, logo size will depend on your Shopify store theme. Before proceeding, we recommend reading the theme’s documentation to see what size to choose. There are some interesting differences. For example, the Turbo Shopify theme suggests using a 400 x 100 px logo image for the main menu, 100 x 50 px for mobile, and 250 x 200 px for the footer.

Shopify image with text overlay size

example of Shopify image with text overlay from Hanon

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

Shopify blog image size

example of Shopify blog image size from Bremont Shopify store blog

The best Shopify blog image size is 1800 x 1000 pixels. This is an optimal size for your website to look professional and organized on all devices. However, for images within the content, many recommend going for 1000 x 350 px. This, of course, will vary based on how you want your images to appear. It’s your content, after all.

Featured blog images usually follow a 16:9 ratio. With that in mind, the dimensions of 1400 x 788 px are quite perfect. 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 downsized for you.

Shopify background image size

example of Shopify background image size from Kith Shopify store

The recommended Shopify background image size is 1920 x 1080 pixels. This size is a great safe option for any store. But keep in mind that it will get cropped, depending on what device your visitor is using.

Your background image should not be any smaller than 1024 x 768 px, so aim for sizes bigger than that and a ratio of 16:9. The Shopify image size limits still apply, you can’t go more than 4472 x 4472 px. After all, smaller images load faster. To reduce file size on your hefty background images, use an image optimization app such as TinyIMG for automatic size compressions.

Keep in mind that background image sizes will differ depending on a theme. Therefore, it’s always a good idea to see what sizes are recommended by the developers.

We've reviewed some of the main images for your Shopify store, but don't leave the small ones without attention. Learn all you need to know about a Shopify favicon

How to choose the best Shopify image sizes?

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.

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.

More Shopify image tips

Let’s make sure we have all bases covered, not just the Shopify image size.

Here are the main things to keep in mind:

Best image formats for Shopify

Take a look at the most commonly used image file formats in Shopify stores and why they’re popular:

  • JPG/ JPEG - one of the most commonly used image file formats thanks to its small file size and good color range. Easy compression also lets you reduce the file size, but still strike a balance between image quality and file size. JPG is the recommended image format for Shopify product photos.
  • PNG - a great choice for logos and graphics, letting you retain good image quality on various file sizes. It also supports transparency, giving store owners more freedom to make custom designs. The only downside of this image format is that the file sizes of complex images can be very large because of the lossless compression.
  • GIF - the most popular format to add animated images that will be universally recognized by all browsers. Shopify image format makes the initially massive GIFs smaller by compressing and reducing product images to 256 colors only.

Shopify accepts a number of other image formats, like TIFF or HEIC, but they are not widely used. Also, to ensure better page speed, Shopify serves WebP images in browsers supporting this format

Keep all your Shopify images compressed and SEO-optimized with TinyIMG!

Install TinyIMG now

Conversion tips for Shopify photos

Now that we have size and format figured out, let’s see how to make sure your Shopify visuals serve your conversions:

  1. Include a variety of images. It is important to include images that highlight your product features, show them in use, display your offers and discounts, and so on.
  2. Create a personal angle. Add a hint of your branding to your images for memorability. Unless you’re very short on budget, try to avoid stock images for commercial use that might end up being used on a number of other sites.
  3. Show the product in use. The images on your store should help your visitors visualize how they can make use of the product in real life. Include images of real people wearing or using your product.
  4. Use consistent editing for all your images. To give your store visitors a consistent experience across all pages, remember to edit your image size and aesthetics in a similar fashion. If you have too many photos and little editing skills, trust this process to experts providing product retouching services.
  5. Make images responsive. Your images should work well across all devices. We focus a lot on this in our guide to Shopify responsive images. Having a Shopify app like TinyIMG can do the trick.
  6. A/B test your images to find what works for you. Continuously experiment with different types of images on your store and measure their impact on sales closely.

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 make images smaller for Shopify?

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

Why properly sized images are blurry on my Shopify store?

If images meet your Shopify theme standards but are still blurry, they might not be compressed correctly. Some image compression apps or their parameters can cause these problems. But it’s important to compress the images, that will reduce file size and site load times. To avoid blurring, use a good image compression app.

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!