The Guide to Shopify Image Sizes For Designing a Fast & Stunning Store
June 21, 2022
Shopping is a visual experience. As online shoppers, we want to be immersed in product imagery to have a deeper understanding of what we might purchase.
According to Google, 50% of online shopperssaid images helped them decide what to buy.
And quality matters. Etsy found that 90% of shoppers said photo quality was “extremely important” or “very important” to their purchase decision, beating out product cost, shipping cost, and reviews.
The most successful Shopify stores are a testament to this. Their stores are full of beautiful, high-resolution images that show off their products and their brand values.
Enriching your Shopify store with gorgeous visuals requires innovative product photography strategiesand a clear understanding of how those images will fit into the various parts of your store.
Figuring out the best image sizes for your Shopify store will ensure that it not only looks great but loads great as well.
In this post, we’ll cover:
- Why image sizes are important
- Shopify image file formats to consider
- Best images sizes for Shopify stores
- Image optimization tools
- Editing images with Shogun
#cta-visual-pb#<cta-title>Simplify adding images to Shopify<cta-title>Customize your store quickly and easily with the best page builder for Shopify, complete with image editing and optimization tools built-in.Start building for free
While creating a store full of rich visuals—like the above from Brevitē—is important for attracting visitors, the details about those images can greatly impact how your store functions.
The size of your images matters. Not just the file size but also the dimensions.
Where file size affects how quickly your pages load, image dimensions affect how your photos show up on your store pages.
The various locations where images live on your store have different ideal aspect ratios. The aspect ratio is determined by an image’s dimensions (or vice versa).
For example, an image that is 1200 x 400 px has an aspect ratio of 3:1, where the image's width is three times its height.
This would be fitting for an image that needs to stretch across the screen but not take up the full height, like a hero banner image or a slideshow section.
If you placed a big square image at the top of your homepage, it would take up too much space and require visitors to scroll to see the whole image.
So, it matters how you crop your images for final placement on your store. And, to ensure your store pages load quickly, you’ll want those images to be properly compressed.
Guidelines for image sizes from Shopify
Shopify doesn’t give super detailed recommendations on this, but here’s what they do say:
- Maximum image dimensions: 4472 x 4472 pixels or 20 megapixels
- Maximum image file size: 20 MB
- Recommended dimensions for square images: 2048 x 2048
- Minimum dimensions for zoom functionality: 800 x 800 px
Shopify has its own resizer tool, from which you can resize your images down to three different sizes—Large (4472 x 4472 px), Medium (2048 x 2048 px), or Compact (1024 x 1024 px).
To keep stores fast, Shopify automatically compresses images as they are displayed and will use alternative file formats, such as WebP, when possible.
Furthermore, Shopify lightly crops images for various screen resolutions, like mobile phones.
To ensure your images show what you want, adjust your images so the subject is oriented toward the middle. Square photos are best for mobile repositioning, as they stack on the screen uniformly and fill more of the screen.
Types of images to consider on your Shopify store
Your Shopify store’s various pages include several types of images with different purposes for your store’s design.
Let’s look at a few of the most popular image types to consider when putting together your portfolio of finely photographed visuals.
- Product images. Arguably the most important images in your store, these detailed representations of your products must show every angle and feature to replace the in-store experience.
- Collection images. Your collections are logical product selections that help drive shoppers through the sales funnel. They should be compelling depictions of a whole category of products.
- Banner images. Stretching across the screen, these wide-format images serve many functions depending on the page they are featured on, such as the homepage, collection pages, the About Us page, an FAQ page, etc.
- Slideshow images. These images also stretch across the screen, constituting a coherent series of visuals.
- Logo/header images. Usually your brand’s logo, the image you place your store’s header will show up across every page.
- Blog featured image. If you do content marketing (and you should), the featured image on your blog posts will be at the top of the page introducing the topic.
We’ll define the ideal image sizes for each of these image types later in this post.
Images don’t come in just one form, making things even more complicated for merchants as they try to get everything just right.
Here are a few of the most popular image file formats and how to use them on your Shopify store.
1. JPEG (or JPG)
This is the most common file format for images.
JPEGs excel at maintaining image quality at the smallest file sizes. This is great news for ecommerce websites that need to keep their sites light and fast.
Given their excellent color range, high resolution, and small file size, JPEGs are perfect for product photos.
Shopify recommendsJPEGs for:
- Banners or slideshows
- Blog posts and pages
A newer image format, PNGs are typically larger than JPEGs but are of a higher quality.
This lossless format can be compressed without affecting the image quality. This also means it cannot be compressed as much as a JPEG.
Unlike JPEGs, PNGs support transparent backgrounds, so they are great for logos and icons.
Shopify recommendsPNGs for:
- Borders and trims
The classic file format for moving images, GIFs allow merchants to add some motion to their stores.
While they aren’t a great choice for regular images and photos, GIF is the only way to go for animations. While PNGs are capable of this, they cannot compress down as small as GIFs.
One of the newest image formats, WebP was created by Google to serve high-quality images at a much smaller file size.
You don’t have to worry about uploading this format yourself because Shopify automatically serves WebP images for browsers that support it.
The most ideal image sizes for your store will depend on the Shopify theme you use.
Each theme will have design specs that will alter the size you will end up using for any particular image type. But, we’ll give some general guidelines here for what sizes work best.
Shopify product image size
Product images should be square (1:1 aspect ratio) and up to 2048 x 2048 px. Above is a great example of stunning square product images from Copper Cow Coffee, sporting a fabulous product page design.
As was mentioned before, your images must be at least 800 x 800 px to enable the zoom feature. Shoppers will appreciate this ability to focus on small product details on your Shopify product pages.
Your product images should beno larger than 300 KB. You’ll have many of these images, so they can quickly contribute to slowing down your store.
Shopify collection image size
The images representing your product collections should also be square and up to 2048 x 2048 px.
These images can be in portrait or landscape, but keeping all of these in the same aspect ratio will help maintain consistency. Plus, the square format allows for better stacking on mobile.
Your homepage will feature your collection images, so make sure they look stunning. First impressions matter.
Shopify banner image size
No matter the page, the banner image will be the first thing visitors see.
The Shopify banner dimensions should bein the range of 1200-2000 pixels wide by 400-600 pixels tall. You can choose the height based on how much of the screen you want it to cover.
The most popular screen resolution is 1920 x 1080 px (16:9 aspect ratio), so keep that in mind when editing images that will span the screen.
Collection page banners tend to be shorter than homepage banners, giving the image a panoramic quality. This one from TKEES has an aspect ratio of ~4:1, whereas the homepage banner above is closer to 3:1.
On the Dawn theme, you can choose between small, medium, and large for the banner height, which will decide how much of your above-the-fold space it takes up. The image will be automatically cropped to fit the image banner section.
Shopify slideshow image size
Your slideshow image section will be very similar to the banner image as it stretches across the screen.
The Shopify slideshow dimensions should be 1200-2000 pixels wide and 400-600 pixels tall.
Again, adjust your aspect ratio as you like to either fill the above-the-fold space or allow other sections to appear below the slideshow without scrolling.
Shopify blog image size
The featured image for your blog, assuming it is full-width, should be 1800 x 1000 px, which is a 1.8:1 aspect ratio.
But, the size will both depend on your Shopify theme and how much of the screen you want it to take up. For example, Hippy Feet has a featured image measuring 1920 x 500 px, which brings the blog intro up above the fold and drives visitors to start reading.
The images within your posts should be as wide (or wider) as your text, which is usually around 600 px.
These images can be varying aspect ratios but shouldn’t be so tall that it fills up the screen. The point of a blog post is the text, after all.
Shopify logo header image size
Shopify allows logos to be as large as 450 x 250 px, but the ideal size for your logo is 200 x 200 px.
Your logo will appear on every page, so you want it to render in the best quality possible but without adding bloat to your store.
The Ridge places their logo top and center of their pages to consistently keep their brand on your mind.
Shopify background image size
Background images should mimic screen resolutions, so aim for 1920 x 1080 px.
This should allow them to fill the screen without being stretched or cropped. Make sure this image is no larger than 1 MB.
A major takeaway from this post should be that your images should be optimized ahead of being added to your store.
While Shopify does its fair share of optimization to your images by default to keep your store snappy, you don’t want to rely on that. Let them optimize from the best possible starting point.
Image optimization tools
Before you start adding those images to your store, you’ll want to get them to their most optimal dimensions and file sizes.
To do that, you’ll need tools.
If you use the most popular photo editing software, you can easily resize and crop your images before uploading them to your store.
You can also choose their Save for Web export option to optimize the file in your preferred format.
Shopify’s Image Resizer
Always good for tools that help ecommerce store owners, Shopify has a simple resizing tool.
You just upload your photo, choose the size you want to resize to (large, medium, and small are your options), and submit. You can then download the new smaller file.
There are a ton of great tools out there to optimize and resize your images. Some are even free!
Here are a few great options:
- PNG Gauntlet
Each has its benefits, but they’ll all do the job. We use ImageOptim, and it works great for us.
Making your images look just right on your Shopify store pages doesn’t have to be so difficult.
Shogun Page Builder has a built-in image editor, allowing you to crop images to your ideal dimensions and aspect ratios.
Once you’ve added an Image element to your page and picked a photo, click Edit image.
The editor will have options to flip, rotate, zoom, resize, and crop your image.
By clicking on a preset aspect ratio at the bottom, the crop window will automatically take on those dimensions.
Drag the corner to enlarge or shrink the crop window while keeping the aspect ratio. The dimensions of your crop window will show on the right side of the screen.
Just edit the dimensions at the bottom of the editor. to resize your image
Beyond simple cropping and editing, you can also optimize your images by default.
The customization options for the Image element include an Image Quality dropdown menu for compressing images to reduce loading time.
You can opt for the best quality, similar to Photoshop’s Save for Web feature.
Other ways you can customize your images on Page Builder:
- Display a different image upon hovering
- Add alt text to your images for accessibility
- Overlay headings, text, buttons, and more on top of your image
- Create rounded images with border-radius settings
- Open images in a lightbox popup
While you probably have your own images, Page Builder also integrates with Unsplash to provide gorgeous free stock photos at your fingertips.
Upgrade the customer experience with gorgeous (quick-loading) images
Making your store images the right shape and size is essential for building a shopping experience that is flawless and fast.
Going into designing your store with the right details will help yousave time and trouble by making things right the first time instead of fixing everything once it’s already in place.
Shopify does a lot to help keep your store loading quickly by compressing images and serving them in the best possible formats for your shoppers. By doing your work ahead of time and letting Shopify take care of any other concerns, your store will be even snappier.
To make the process of adding images to your store even easier, Shogun Page Builder includes the tools you need to make them just right directly from the editor.
#cta-visual-pb#<cta-title>Create visually stunning Shopify pages faster<cta-title>Customize your store quickly and easily with the best page builder for Shopify, complete with image editing and optimization tools built-in.Start building for free
Sean is one of Shogun's tireless content marketers. When he isn't creating exciting ecommerce content, he's probably biking or at the park.