If you run a Shopify store, you know how difficult it can be to keep up with image size best practices. Shopify doesn't have detailed image size guidelines, so you're probably spending lots of time researching image best practices or making do with badly cropped or resized images— the latter being bad for your brand integrity.
That's why we've put together a simple summary of the best image sizes for Shopify so you can have everything in one place. We'll also share how Dash can help you resize your images for Shopify quickly—so you can get back to growing your brand. ✨
Image size terminologies
Heads up: We’ll use many imaging terms in this article such as DPI and pixels. If you already know what these mean, you rock! If not, here’s a quick glossary to bring you up to speed.
- Pixels: Picture elements or tiny dots that make up a digital image. They are the building blocks of a digital photograph. The more pixels an image contains, the more detail and clarity it will have.
- DPI (Dots Per Inch): DPI indicates the density of dots or pixels in an image. It measures the number of pixels placed within a one-inch span. A higher DPI generally results in finer detail in digital images.
- Resolution: The amount of detail an image holds. It’s the width and height of an image in pixels, such as 1920 x 1080 for Full High Definition (HD) resolution. Higher resolutions mean more pixels, leading to sharper and more detailed images.
- File size: The size of the image file in bytes, kilobytes (KB), megabytes (MB), or gigabytes (GB), depending on the file's complexity and the level of compression applied.
- File format: This is the type of file you’re using like JPG, PNG and WEBP. We cover this in detail further down the post.
- Dimensions: The width and height of an image, often measured in pixels or inches. For digital images, dimensions are expressed as the number of pixels in the horizontal and vertical directions. Printed images use inches or centimetres.
- Aspect ratio: The ratio of the width to the height of your images. Examples include 4:3, 1:1 and 16:9. Say your image dimensions are 1000 (width) and 1000 (height); that’s a 1:1 aspect ratio.
The aspect ratio determines the visual shape of an image or video. Different image ratios can affect how content is framed, composed, and displayed on websites.
Shopify image size guide
As we mentioned earlier, Shopify doesn't have a comprehensive image size guide 😪. This is probably because there are so many different Shopify themes and customisable options for brands that it would be hard to pin down the best image recommendations. But Shopify does provide general image size recommendations that you can use as a reference point.
- Recommended image resolution: 72 DPI
- Maximum image dimensions: 4472 x 4472 pixels or 20 megapixels
- Recommended dimensions for square images: 2048 x 2048 pixels
- Minimum dimensions for zoom functionality: 800 x 800 pixels
- Maximum image file size: 20 MB
These recommendations are broad, so we dug further to figure out the most typical sizes merchants use when uploading different types of images to their Shopify stores. Here's what we found 👇🏻.
A snapshot of the best sizes for Shopify images.
Here’s a quick look at some of Shopify’s most popular image sizes.
And here’s a table where you’ll find additional image sizes.
Let's discuss the most common Shopify image types and recommendations in detail.
1. Shopify product image size
Product images represent what you're selling, so they’re arguably the most important images on your Shopify site. These images should be clear and give online shoppers a well-rounded view of the product details and packaging. At the same time, they shouldn’t be larger than 300 MB or they will slow down your site’s loading time and affect the shopping experience.
The maximum recommended dimensions for Shopify product images are 2048 x 2048 pixels—although images can also be as small as 800 x 800 pixels. The most important thing is that your images maintain a 1:1 aspect ratio.
These dimensions are also compatible with Shopify’s zoom feature, which allows shoppers to zoom in and view hidden details—like watermarks and inscriptions on your images.
The Honey Pot Company does this right. It uses square product photos in its Shopify store. Each image is 2000 x 2000 pixels, maintains a 1:1 aspect ratio, and is about 61 KB in size.
💡Read our guide on how to optimise your product images for Shopify.
2. Shopify collection image size
Collections are product categories on Shopify stores. The idea is to help shoppers find related products faster, increasing your chances of making additional sales.
Collection images appear side by side, so they need to complement each other. Don't use a 1:1 aspect ratio for one image and 16:9 for another. Other visual properties like colour, shape, and font size must be consistent, too.
The best size for Shopify collections images is 1024 x 1024 pixels. Images can also be up to 4472 x 4472 pixels. But they must not be larger than 20 MB in file size, or else they affect your site's loading speed.
See how Verve Coffee pulls this off with its customisable coffee subscription collection.
3. Shopify banner image size
A banner is a large image displayed at the top of your Shopify web page—like your homepage or FAQs page. It's typically the first thing visitors see when they land on a page.
Banner images are always in landscape orientation because their width exceeds their length. You cannot use square-shaped images as banners for your Shopify website.
Generally, the best Shopify banner images are about 1200-2000 x 400-600 pixels with a 16:9 aspect ratio. But banner images on collection pages can be slightly shorter, having 4:1 or 3:1 aspect ratios.
Check out this example from this plant-friendly laundry brand, Tallow Ash:
4. Shopify slideshow image size
Like banner images, slideshow images are set in landscape orientation. Ideally, this type of Shopify image should be 1600 x 500 pixels—although any dimensions between 1200-2000 x 400-600 pixels also work.
The image can be shorter to allow other webpage elements—like menu dropdowns—to appear above the fold. For example, this one from Tentree's homepage has a 5:2 aspect ratio.
5. Shopify blog featured image size
Your featured image should be prominent but not take up all the space meant for text. People are on the page to read your blog post, not to stare at a gigantic image.
The ideal size for blog post images is 1800 x 1000 pixels or a 16:9 aspect ratio. But you might opt for smaller image dimensions if you want the featured image to occupy less space on your blog. For example, Terreblue uses a 1500 x 1005 pixels image for its blog post.
6. Shopify background image size
The ideal dimensions for Shopify background images are 1920 x 1080 pixels or an aspect ratio of 16:9. Either of these allows the background images to load quickly on your web pages without sacrificing visual quality.
These dimensions aren't set in stone. As long as the image’s file size is less than 1 MB and the dimensions are above 1024 x 768 pixels, you’re good to go. For example, Beefcake Swimwear has a beautiful background image measuring 2800 x 1298 pixels.
7. Shopify logo image size
You cannot skimp on your logo’s image quality because it's essential to your brand identity. Imagine someone visiting your Shopify store for the first time and seeing a blurry logo in the homepage’s header section; it's not a good look.
As much as possible, your Shopify logo image should be 200 x 200 pixels (1:1 aspect ratio) or up to 450 x 250 pixels for larger images. Anything beyond that, and Shopify's auto settings might cut off or distort some parts of your logo.
For example, Chocolate Alchemy uses a 319 × 114 pixels logo image for its Shopify store.
The best image file formats for Shopify
It's equally important to upload images to Shopify in the supported formats—otherwise, it will affect your site's performance and overall user experience.
The most common image formats for Shopify are:
- JPEGs: Best used for product images, banners and blog feature images
- PNGs: Best used for logos, icons and image borders
- GIF: Best used for animations and, sometimes, banners
- WebP: Shopify's default image format for supported browsers and devices
You can read our image format guide to learn more about these formats and how to use them.
How to resize your images for Shopify with Dash
As an ecommerce business, you're working with different images— logos, product photos, background images, and the like—at the same time. And you have to optimise each image to match Shopify's best practices. Imagine you had to resize a mix of blog feature images, banners and slideshows; that's a lot of work.
You need a more efficient way to resize these images. Shopify has an image optimisation tool, but the features are limited. For example, you can only resize visual assets down to three sizes: Large (4472 x 4472 pixels), Medium (2048 x 2048 pixels), or Compact (1024 x 1024 pixels). Any requirements beyond these, and you're stuck 😪.
That's where Dash comes in 🤩.
Dash is a digital asset management (DAM) tool that lets you search, organise and share all your visual assets. That’s everything from product images, brand guidelines, logos, videos, graphics and much more. It’s the perfect tool for ecommerce brands because it allows you to manage and deploy all the assets you need to market your online store. (You can read more about how Dash helps ecommerce brands grow.)
When it comes to your Shopify images, Dash lets you create and save preset sizes for your images. You can:
- Crop images to specific dimensions and different aspect ratios. For example, you can crop a square image into a rectangular shape.
- Resize an image to the maximum dimensions of its aspect ratio.
You can also preview what your crop or the resized image will look like. Once you've saved the preset sizes, you won't have to resize Shopify images manually anymore. Any authorised team member or freelancer can automatically download different Shopify assets in their correct dimensions too.
You can also connect your Dash to your Shopify account to update visual assets in your Shopify app. No more wasting time downloading and re-uploading images from Dash to Shopify. Simply search for the preset digital assets in your integrated Dash and add them directly to your product pages, blog, or other Shopify pages. How cool is that? 🤯
Tips for optimising your Shopify images
There's more to optimising Shopify images than knowing the recommended file sizes and dimensions. You also have to:
- Use Dash’s integration with Shopify—this will easily handle your image optimisation for you
- Ensure you're working with high-quality images. For example, uploading your logo in the correct dimensions will not matter much if the image is blurry.
- Use images in the supported file formats. For example, you cannot upload image files in PDF format to Shopify.
- Add meta information to your images, like alt texts and keywords.
That's not all. For more tips, read our Shopify image optimisation article.
Or download our free Shopify apps database to find the tools to help you brand grow.
{{shopify-apps="/blog-components"}}
Manage your Shopify images with Dash
More than letting you preset image sizes, Dash has many other features that will transform how you organise and share Shopify images for your ecommerce business.
First, its advanced search function lets you find digital assets based on the actual image content—not only file names.
It also syncs with most of the tools that power your ecommerce business, including Dropbox and Hootsuite—allowing you to transfer and update images quickly.
Plus, you can create a public portal of your Dash to share updated visual assets with your external partners like freelancers and retailers. No more sending images in Slack or as email attachments.
You can do so much more with Dash, but we'll let you see things for yourself. Give Dash a spin with our no-strings-attached 14-day free trial.
Faith Uzuegbu is a content marketer and freelance writer for B2B SaaS and tech companies like ClassPass, PlayPlay, and Thinkific.
