Facebook Community
Change Log
Help Center
The Ultimate Shopify Image Size Cheat Sheet
Research conducted by Salsify has shown that 30% of US shoppers will not purchase if product images are missing or low quality. And about 60% of GenZers, which is currently shaping the future of eCommerce, would not use a website that is too slow to load.
This means enhancing the visual shopping experience with high-quality images is incredibly important.
So how can you present your products in the best way possible?
By optimizing your images.
In this article, we’ll share everything you need to know about Shopify image size, the best file formats to speed up site loading time, and two lesser-known ways of image optimization.
Why Is It Important To Optimize Shopify Image Size?
Store owners often focus on a beautiful storefront design more than proper attention to image optimization. You don’t want visitors to see the sites rendering and wonder when the blank, white web space will show. This may lead to customers’ frustration and worse leaving your site without any transactions.
It's important to optimize Shopify image size for a few key reasons:
- Improve page loading speed: The longer it takes to load your page, the more likely your visitors will move on to another website. Don’t worry, we’ve revealed 11 best practices to improve Shopify page speed!
- Reduce bandwidth usage: Optimizing images can significantly reduce the size of the images, thus reducing bandwidth usage and resulting in lower hosting costs.
- Better mobile experience: The Shopify mobile image size and desktop image size are different. By elevating your website performance on mobile, visitors will feel more inclined to stick around, and the conversion rate will naturally grow.
- Increase conversion rate: A faster and smoother shopping experience can lead to higher conversion rates, as customers are more likely to complete their purchase if they have a positive experience on your site.
- Better search engine rankings: Faster load times and a better user experience can also improve your search engine rankings, leading to increased visibility and traffic to your site.
Shopify Image Size Guidelines
Shopify allows you to upload images with a maximum size of 4472 by 4472 pixels and a file size of up to 20 megabytes. However, for square product photos, the recommended dimensions are usually 2048 by 2048 pixels. By using these high-resolution images, your store will have a professional appearance, offering excellent zoom capabilities for an enhanced customer experience.
Your online store's images are automatically compressed by Shopify to ensure fast load times.
Shopify also provides the ability to dynamically transform your images with crop and resize operations for various screen resolutions. If the traffic mostly comes in from mobile, square photos are the best way to go. With that, all images will be displayed responsively across various screen sizes.
Moreover, to make your images appear to be the same size, you need to use a consistent aspect ratio, or height-to-width ratio, for all the images that you add to your homepages, collection pages, and product pages.
Here is an overview of the most popular Shopify image sizes for specific image types:
|
Image types |
Dimensions (px) |
Aspect ratio |
|
Product image |
2048 x 2048 |
1:1 |
|
Collection image |
1024 x 1024 |
1:1 |
|
Background image |
1920 x 1080 |
16:9 |
|
Hero image |
1920 x 1080 |
16:9 |
|
Slideshow image |
1920 x 1080 |
16:9 |
|
Text overlay image |
1920 x 1080 |
16:9 |
|
Blog post image |
1920 x 1080 |
16:9 |
|
Logo image |
250 x 250 |
1:1 |
1. Shopify Product Image Size
The best Shopify product image size is 2048 x 2048 px. Images for product pages are limited to 3 MB in size to not affect website load speed.
The square (1:1 aspect ratio) of your images will help them display correctly and look good no matter how long the content is.
Additionally, if you enable zooming images for your products, they need to be at least 800 x 800 px. So the customers can zoom in without seeing pixelated, blurry images.
Now, let’s take a brief moment at Harpersage, a successful clothing store. Harpersage makes it easier for customers to visualize the pant from different angles and clearly show how to style it. The image zoom displays the product in stunning details.
Harpersage has a stunning product page
Tip: For more on how to produce flawless product imagery, check out this 10-minute guide and let your DIY spirit take the wheel.
2. Shopify Collection Image Size
For the featured images of the collection pages, use the aspect ratio to prevent them from being cropped. The default ratio is square (1:1).
The recommended size for the collection image is 1024 x 1024 px. And images for the collection page can’t be bigger than 4472 x 4472 px and 20 MB.
Since the images are side by side, displaying all of them in the same aspect ratio will make the page look more stunning.
As you can see below, Joya, another beautiful Shopify store, has done an incredible job with the overall UX and UI. When hovering over the individual image, it shows a swatch of product texture.
Tip: We’ve put together some best practices to create a high-converting collection page (with proven examples). Don’t hesitate to check it out!
3. Shopify Background Image Size
The most common size for the background image is 1920 x 1080 px and has an aspect ratio of 16:9. So your background can look great on any device. And the size of your files should be a max of 3 MB to not affect the page load.
But that’s not where the story ends. The background images on Shopify are automatically optimized for a wide range of screens. If the images are too big, some parts may be cut off, especially on smaller screens. Or if you have a copy on the sides of your images, it may not display on mobile devices
Tip: You can easily design an appealing background image by changing background-position or adding a scrolling effect directly from the GemPages Editor. No coding is needed.
Learn more: How To Add A Background Image | GemPages Tutorial
4. Shopify Hero Image Size
Typically, the hero image should be at least 1920 pixels wide and 1080 pixels height to ensure its sharp resolution when viewed on full screen.
Themes are responsive, which means the hero image size changes depending on the screen sizes. Thus, leave space around the frame of your image to account for parts that may be cut off.
One more thing to keep in mind is that the Shopify image with text overlay size varies for different devices and screens. You should avoid adding copy and CTA directly into the hero image. Instead, in the Editor, overlay copy and CTA button in front of your image and adjust specifically across devices.
Take Fluxies for example. The hero banner image instantly captured the look and feel of their products. They keep the background as neutral as possible to shine the spotlight on the text.
Fluxies’s hero banner instantly builds an emotional connection with cozy, relaxed, and comfortable feelings
On the Dawn theme, the hero banner image height can be customized between small, medium, and large. While there are no specific dimensions, the 1920 x 1080 px for desktop and the 800 x 800 px for mobile are highly recommended.
Tip: With GemPages, you can easily fine-tune how your hero banners look and add a mobile-specific image for the best experience across all devices.
5. Shopify Banner Image Size
The Shopify banner size depends on your needs and website layout. Here are the most common sizes from Google Ads:
|
Banner types |
Dimensions (px) |
|
Leaderboard |
728 x 90 |
|
Large rectangle |
336 x 280 |
|
Medium rectangle |
300 x 250 |
|
Mobile banner |
300 x 50 |
|
Banner |
468 x 60 |
|
Wide skyscraper |
160 x 600 |
|
Square |
250 x 250 |
|
Small square |
200 x 200 |
Keep in mind that the image which looks good on a desktop may be awful on mobile. So it’s worth checking how responsive your images will be displayed, before hitting the live button.
6. Shopify Slideshow Image Size
The best size for a Shopify slide image is between 1920 pixels wide and 1080 pixels tall.
The moment you land on Stojo’s blog, you’ll notice that bigger is not always better. The thumbnail image and the title font size are too big. Thus, it can’t attract visitors to start reading because the introduction is under the ‘above the fold’ section.
Here is a great example of how you should display your slideshow images from our ‘glowy’ user - Growhub
Glowhub captures their own lifestyle photos with slideshow
7. Shopify Blog Image Size
The perfect size for blog featured image is 1920 x 1080 px, which is a 16:9 aspect ratio. The maximum file size is 3 MB, but ideally, should be smaller without sacrificing quality.
However, the dimensions aren’t set in stone. The image sizes will depend on your Shopify theme requirements. It also a lot depends on how much screen you want your blog featured image to take up.
It’s also important to keep in mind the image’s width. Why? Because if your image is too small, Shopify will stretch it out to make it fit the screen. The result will look pixelated and unprofessional.
An example of a featured image on the Shopify blog for your inspiration from Stojo
8. Shopify Logo Size
Why does logo size matter?
If a logo is smaller than the required size, it will stretch and become illegible. At the same time, it automatically compressed into a negative quality if the logo is larger than needed. Whatever the case may be, choosing the right logo size will make your brand look more professional.
Shopify recommends the logo image should be a maximum of 250 pixels in width and 250 pixels in height. The file size can be at least 1 MB, but ideally, smaller without sacrificing the quality. Your logo should either have a rectangular or a square shape, depending on your needs.
As you can see above, the logo from Stojo is a 2:1 aspect ratio and lends in the center of the header.
Best Shopify Image File Formats
The second primary thing to consider when optimizing Shopify images is the file format. Here are the image file formats that Shopify supports:
- JPEG
- PNG
- GIF
- HEIC
- WebP
- AVIF
Note: Shopify automatically detects which image formats are supported by your browsers, and then displays the image in the best format available.
For example, in Shopify, images are automatically converted to WebP or AVIF when supported, but to JPG as a fallback if they are not supported.
Now, let’s take a closer look at the two popular image formats you can use on your online store
|
File types |
Description |
Recommended image types |
|
JPEG (JPG) |
The JPEG images:
|
|
|
PNG |
The PNG images:
|
|
GIF is another common format file. The GIF files are useful for adding images within the content and for basic illustrations or graphics.
As we mentioned above, there are several others, but all browsers do not widely support them. Ideally, you should use JPEG format for images with lots of color and PNG format for simple images.
How To Optimize Your Shopify Images?
You’ve known the value of image optimization, the recommended Shopify image sizes, and image formats for your store. And now it’s time to bring all your learnings together by optimizing your images to create a stunning, fast-loading store.
By default, Shopify does a lot to optimize your store images:
- Shopify’s CDN: Image files are copied and distributed among servers across the world, and each store visitor sees a picture rendered from the server closest to them.
- Automatically file compression: File size is automatically optimized when you upload to Shopify. Visitors will get served the most appropriately sized image based on the device they are using and their connection speed. While the quality change isn't noticeable to the eye, it will speed up page loading.
- Automatically file format conversion: Shopify determines which site formats are supported and sends the best option.
And below, we also share two other tips for image optimization.
1. Check Image Sizes On Your Shopify Store
Now, we’ve touched on the fastest way to find out the Shopify image sizes (without downloading the images), which is called Inspect/ Inspect Element option. This method is right under your fingertips and always accessible from Safari, Chrome, or Firefox.
Here’s how to check the image sizes on your Shopify store:
- Right-click on the image that you want to find out the dimensions
- Choose Inspect option
- On the right-hand side, hover over the URL to see the pop-up with all image properties
In this case, the image is automatically optimized from 1140 x 1140 px to 398 x 398 px to fit the screen.
2. Compress And Edit Your Shopify Images
It's an ideal resolution to resize the image before you upload it to your website. However, you can manually reduce image sizes after you upload them.
With GemPages, you can easily adjust image resolution, customize spacing, corners, opacity, animations, flow actions, insert image links, add alt text, etcetera.
For image optimization, you can head over to Settings option > Image Quality > Lighter/Lightest. Then, your image will be compressed.
You can also alter the image resolution. However, the feature is available for images uploaded on the Shopify server and GemPages' UCare CDN.
Optimize Shopify Images to Enhance The Allure of Your Store
Designing your Shopify image with the right size and format the first time will do a lot of heavy lifting for you, instead of back and forth fixing everything once it’s already done.
By following these Shopify image size guidelines, your site will be better liked by search engines, browsers, and networks, and will load faster for your readers.
Pro tip: Using GemPages to optimize your product image. As an application that can be integrated into Shopify to build and customize your online store, GemPages owns many elements and features to help store builders.
GemPages' Product Image situated within the Product Module, facilitates the display of product visuals sourced from your Shopify Admin. It includes:
Primary Image: The principal visual, extracted as the initial image from the Media section in your Shopify Admin > Product.
Image Gallery: A compilation of visuals sourced from the identical Media section, showcased in a visual gallery format.
Learn more: Shopify Product Images: A 10-minute Guide for Beginners (2023)
GemPages's Swatches element provides another way to display your products’ variations. If your product has different variants to show, this features is a wonderful choice.
Again, image optimization is a simple technique that doesn’t require much effort. And optimizing images on your stores is even easier with GemPages, just by enabling image optimization directly from the editor.
FAQs about Shopify Image Size
