Choosing the correct Shopify image sizes is important for ensuring the best user experience. Without optimizing images, you risk your store visitors to see blurry, tiny, or oversized images that mess with the page layout.
Additionally, unoptimized visuals can be a major contributor to slow page load time. Poor performance can lead to higher bounce rates and can negatively impact rankings, resulting in a decrease in traffic.
Follow our guide to optimize your images for both desktop and mobile devices using expert-recommended Shopify image size.
Optimize images for your Shopify store
Try TinyIMG freeRecommended image sizes for Shopify
Following Shopify image size, aspect ratio, and file format recommendations can help save resources and ensure good site performance, consistency, and user experience. Here are the general Shopify image size recommendations:
- Maximum image size: 5000 x 5000 pixels
- Recommended square image size: 2048 x 2048 pixels
- Image file size: up to 20 MB
- Image resolution: 72 dpi
Now, let’s take a look at the recommended image sizes by type on both desktop and mobile. Choosing specific sizes for different devices helps ensure that images are optimally sized no matter what device the user views it on.
Desktop
Here are the suggested sizes for Shopify images on desktop devices:
| Type of image | Desktop (Width x Height in pixels) | Aspect ratio |
| Product images | 2048 x 2048 | 1:1 |
| Banner images | 1200 x 400 | 3:1 |
| Image with text | 1800 x 1000 px | 9:5 |
| Header image | 1200 x 800 | 3:2 |
| Blog image | 1200 x 800 | 3:2 |
| Featured image | 1200 x 800 | 3:2 |
| Logo | 400 x 100 (rectangle) or 100 x 100 (square) | 4:1 or 1:1 |
| Collection image | 800 x 800 | 1:1 |
| Slideshow banner | 1920 x 1080 | 16:9 |
| Hero image | 1280 x 720 | 16:9 |
| Background image | 2560 x 1400 | 16:9 |
Mobile
Let’s take a look at mobile image size recommendations together with their aspect ratio:
| Type of image | Mobile (Width x Height in pixels) | Aspect ratio |
| Product images | 320 x 320 | 1:1 |
| Banner images | 360 x 120 | 3:1 |
| Image with text | 360 x 240 | 3:2 |
| Header image | 360 x 240 | 3:2 |
| Blog image | 360 x 240 | 3:2 |
| Featured image | 360 x 240 | 3:2 |
| Logo | 160 x 40 (rectangle) or 60 x 60 (square) | 4:1 or 1:1 |
| Collection image | 240 x 240 | 1:1 |
| Slideshow banner | 320 x 180 | 16:9 |
| Hero image | 360 x 200 | 16:9 |
| Background image | 360 x 640 | 16:9 |
Now, let's review the main image size recommendations in detail.
Website image size guidelines
Because of layout and design, the right image sizes for different themes vary. However, there are some general recommendations you can take into account for the most important visuals on your website. Let’s take a look at them.
Product image size
Shopify product image size can be 20 megapixels or up to 5000 x 5000 px. The file size should not exceed 20 MB. For square images, Shopify recommends a 2048 x 2048 px size.
Make sure you maintain a similar aspect ratio for all product images to ensure consistency and structure. The best ratio options are 1:1 (square) or 3:1 (rectangular).
Automate bulk image compression with one click
Start optimizing with TinyIMGHero image size
Shopify hero image size can be a maximum of 2500 x 900 px. The size Shopify recommends is 1280 x 720 px, and the file size of 10 MB.
Hero images are attention-grabbing images with text usually placed above-the-fold. They’re generally smaller in height than background images, with the best aspect ratio being 3:2.
Shopify collection image sizes
Shopify collection image size can be up to 5000 x 5000 px. The file size shouldn’t exceed 20 MB.
Make sure that your collection images are always square (same width and height) and the same or similar size. Having the same dimension and ratio images makes your site look more structured.
As for the Shopify collection header image, the size is usually 1280 x 720 px. However, it can vary depending on your chosen theme.
Shopify banner image size
It’s recommended to use 1200 x 400 px size for banner images on Shopify. However, it can be anywhere from 1200-2500 px in width and 400-600 px in height.
Plus, banner size requirements can vary based on your site’s theme. Choosing the right dimensions will help your image have the most impact across all browsers and devices.
The height of the banner will determine how much screen it covers. A banner with 600 pixels in height will take up pretty much all of the above-the-fold space the website visitors see upon entering. Meanwhile, a 400-pixel height 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 3:1, which means they should be landscape. The first number suggests how wide your image should be, and the second one refers to its height.
Try TinyIMG for image compression and overall SEO optimization
Install TinyIMG todayLogo image size
The recommended Shopify logo image size is 400 x 100 px, with a 4:1 ratio. For square logos, the best size is 100 x 100 px. This is much smaller than Shopify’s 450 x 250 px limit and ensures the logo doesn’t become distorted anywhere on the website. Plus, logo file sizes that are too large can adversely impact page loading time.
A square logo with a 1:1 ratio is a safe choice that works with all themes anywhere on the page.
Yet, just like with other images, logo size can also depend on your Shopify store theme. 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.
So, make sure you check your theme’s documentation to know what size is best for your website.
Image with text overlay size
The recommended size for images with text overlay, like background, featured blog, or even some banner images, is around 1800 x 1000 px (a 9:5 ratio).
However, the size of images with text overlay highly depends on your chosen theme and specific image type, so make sure to refer to your theme recommendations.
Blog image size
The best Shopify blog image size is 1200 x 800 pixels (3:2 ratio). While the right size of a featured blog image depends on your theme, it should be universal across all of your blog posts.
Same as with other types of images, the size of a featured blog image cannot exceed 5000 x 5000 px and 20 MB in file size, or Shopify will downsize it for you.
Shopify background image size
The recommended Shopify background image size is 2560 x 1400 pixels (16:9 ratio). This is a safe option that ensures your background works on any device. Plus, the size of your files shouldn’t exceed 10 MB to avoid performance issues.
The Shopify image size limits still apply, so you can’t exceed 5000 x 5000 px. Remember, 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.
Other Shopify image sizes
There are also some other types of Shopify images that should also follow recommended size guidelines, such as favicons, social media sharing visuals, and more. Let’s cover the optimal sizing for each type.
Slideshow image size
Shopify slideshow images should be landscape. The best size for this type of image is 1600 x 500 pixels. However, dimensions between 1200-2000 x 400-600 px are also good.
The precise aspect ratio will determine how much above-the-fold space there is for other elements of the page.
Mobile and desktop devices will crop slideshow images differently, so make sure:
- The subject of your shots is centered
- The details of your image are large enough to see on mobile
- The slideshow images are optimized for page speed
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.
Social sharing images
Shopify social sharing images recommended size is 1200 x 628 px. Yet, it depends on the social platform you’re sharing it on. For instance, while the recommended size is ideal for Facebook, the recommended size for Instagram Stories is 1080 x 1920 px.
The easiest way to find the right size is to check the free Shopify image resizer. It resizes images based on the social media channel and the place you need it for.
Newsletter
The recommended size for newsletter images on Shopify is 1600 x 300 px. If you’re adding an image to the newsletter pop-up, you should go with a 425 x 575 px size.
However, it all depends on your theme. And if you’re creating a newsletter popup, the right size will depend on whether it’s a simple square one or a full-screen popup.
Favicon
The recommended size for a Shopify favicon is 16 x 16 px or 32 x 32 px (1:1 aspect ratio). It’s a small icon used in a browser’s tab or bookmark list.
If you add a favicon on Shopify that’s too large, the platform will automatically reduce it to 32 x 32 px. Keep in mind that you can’t upload this type of image if you’re using a Starter plan.
What are the best image formats to use?
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 nowWhy 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 and the 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 the correct Shopify image sizes.
Why are default Shopify theme images not good enough?
A number of brands start their online store using a popular or free Shopify theme. Now while these themes are customizable, they come with some pre-existing images in certain sizes that developers 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 don’t 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.
Conversion tips for Shopify photos
While focusing on optimizing your store visuals, remember the power of promotional materials such as posters. They can significantly enhance brand visibility both online and offline. If you’re looking to get a professional poster design, tailor-made templates offer an easy and quick solution without compromising quality.
Now that we have size and format figured out, let’s see how to make sure your Shopify visuals serve your conversions:
- Include a variety of images. It’s important to include images that highlight your product features, show them in use, display your offers and discounts, and so on.
- 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.
- 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.
- 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.
- Make images responsive. Your images should look high quality across all devices, including smartphones. You can learn more about this in our Shopify responsive image guide.
- 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 do I know the image size on a web page?
To know a specific image size on a web page, you can either download the image and check it in the Photos app of your device. However, a faster method is using the Inspect element tool.
Whichever browser you choose, the process is the same:
- Open the web page and locate the image you want to check.
- Right-click the image using your mouse and click “Inspect” or “Inspect Element” depending on your browser.
- Once the Inspect tool opens, locate the size on top of the image or in the “width” and “height” in the highlighted line.
Keep in mind that you may not see the image size above the image once the Inspect tool is open depending on your browser. In such cases, you can still locate it in the highlighted line.
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 expect!
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.
Curious to read more? Check out these articles:
Frequently asked questions
Yes, Shopify allows uploading images up to 5000 x 5000 px, and the file size has to be under 20 MB. 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.
Yes, Shopify can automatically resize your images to ensure fast loading time. However, this only happens if your images don’t meet their set size parameters. That’s why it’s better to choose the proper size and file format of images before you upload them to Shopify. You can do that with any online image resizing tool or an app like TinyIMG.
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.
You can resize Shopify images by going to Shopify Admin > Content > Files and clicking the image you want to resize. Then, press "Resize," set the width and height you want, click "Apply" and then "Save."
If your images are properly sized but still blurry, it may be that your images were low quality to begin with. It’s better to use large but high-quality images and consider choosing the right file format or using a high-quality image compression app like TinyIMG.
