This post will go over the best image sizes and help you optimize your Shopify image sizes. You’ll learn the differences between the type of images you can add to your site, as well as the different formats you can use. If you keep reading, we’ll also show you how to optimize your images visually for sales performance, as well as how images on your Shopify store affect SEO. And if you need assistance with your Shopify SEO – Plug in SEO has you covered.
What is the best image size for Shopify?
There are some variables you’ll need to figure out first, such as where the image is going to be placed. It’s also worth clearing up how size here refers to dimensions — length x width (leading to megapixels). Not space occupied by the file — measured in bytes.
However, we should acknowledge the relationship between the dimensions and space. High-quality images usually occupy a lot of space. Shopify won’t allow you to upload a file that has a resolution of 20 megapixels, or one that occupies 20 megabytes of storage space.
In addition to these constraints, your images can only be of the following types:
- GIF – Graphics Interchange Format
- PNG – Portable Graphics Format
- JPEG – Joint Photographic Experts Group
We’ll discuss these formats and their differences a little later in this post. At this point, you’d expect any file within these limits to make the cut, but that’s not so. Each image position on a Shopify website looks best when it fits the best size for that space. Let’s explore these image types and sizes in greater detail.
Shopify Image Sizes List
Here’s a quick overview of what these types of images are used for and the best sizes for each of them:
Chart: Shopify image positions and their relative optimized size
To wrap your mind around these figures, consider the following thought process for each position.
Shopify Product Images
These are often square in shape. Equal length and width images of 2048 x 2048 pixels give the Shopify CMS (Content Management System) enough leg-room to resize based on the device customers are visiting your site from. Most important when picking out product images is how fast they load when customers are searching your site.
Banner/Header Image Size
The banner is the first image shown below the menu. It’s also called the header depending on the page it appears on. With content overlay options, your banner should be large enough to give visitors an overview of your niche. This space is automatically resized by the CMS, but the perfect upload would be 1800 x 1000 pixels.
Collection Image Size
Collections show a handful of images in one view. Depending on your product, these are usually square images minified for maximum display. 800 x 800 pixels is the least possible resolution for your images to maintain lossless zoom when users need more details.
Slideshow Image Size
Slideshows transition sideways (slide) to show multiple images in the same view. The length of slideshow images is considerably more than their width. This makes a 1200 x 400-pixel dimension option perfect for detailed slideshows.
Background Images
Instead of the white background consistent with this post, some Shopify stores maintain colorful underlays. These can be in the form of actual images. Since they cover a large surface area, the larger their resolution, the better. However, you shouldn’t get carried away with size, so much that you end up losing speed for the sake of a unique background image.
Custom Image Sizes
Custom images include those you place in blog posts to illustrate ideas. Maintaining the lowest size ensures faster load page times. At the same time you don’t want blurred content on your Shopify blog. This leaves you with an 800 x 800-pixel dimension image as the most reasonable option.
While these are just but a few image placement areas, they should help you approach picking out images better.
If ever you find yourself in possession of product images that don’t match the resolutions we’ve suggested, don’t lose hope. You can resize your images to manually optimize them for any position.
How do I resize images in Shopify?
Shopify provides sellers with an image editing tool that allows you to resize images. You’ll need to have uploaded the images before you can alter their sizes. While you’re at it, keep in mind that this is a manual process that assumes you’re aware of the best resolutions for each image you upload.
To access this feature in your Shopify admin area, follow the instructions below:
- Make sure you’re in the admin side of your store.
- Navigate to the products page to access the list of uploaded inventory items.
- Click on the product item of the image you want to alter.
- The product’s media section should show you the images to edit. Click “Edit” on specific files to edit them.
Once you have the image editor open, you can either crop the image or explicitly resize it to change it’s resolution. There are advantages and disadvantages to both options.
Cropping an image – While cropping saves your images quality, it cuts out content you may have intended to show your Shopify store visitors.
Image resizing – Retains the image’s captured viewpoint entirely, but you risk reducing its quality when it shrinks or stretches.
Different image file extensions respond differently when they are resized. For the file types allowed by Shopify, there are considerations you should keep in mind.
What format should my images be?
We mentioned earlier how Shopify accepts .jpeg, .png, and .gif image types. Now let’s look at which format is best for your product images.
When to use GIF images – While the GIF image type can accommodate large resolutions at very low storage needs, they are limited when it comes to colors. GIF images support a total of only 256 colors. This implies your products don’t have as wide a range of possible colors as your nearest competitor. Use GIF when you have plain images or data tables in custom images as these often have little color variation or color depth.
When to use JPEG image files – While you have a broader range of colors when using JPEG image files, they tend to deteriorate in quality each time they change resolution. This can result in less impressive images when Shopify renders for mobile devices.
A key advantage of the JPEG file is how compatible they are with all operating systems. This allows your photographer to send images that your team can use across multiple platforms.
When to use PNG images – Considered the answer to both situations above, .png images are resilient when altered, all the while providing the full spectrum of colors for your images. That said, you may encounter image size issues when uploading them. The 20MB limit usually caters to very high-resolution images.
While it’s not always possible to have your images in PNG format, there are ways you can get lossless image optimization on Shopify.
How do I add mobile images to Shopify pages?
One concern expressed by Shopify shop owners is if their images will look the same when accessed through mobile devices.
Fun fact: In 2020 alone, over 90% of the world’s population with access to the internet accessed it through mobile devices.
This convincing demographic is indeed a cause for concern when uploading your Shopify images. Assuming you’re using a high-quality camera to capture product images, and uploading .png files, maintaining great quality shouldn’t be too much of a challenge.
The first optimization effect happens by default when Shopify fits your content into smaller viewports(from tablet screen size going lower). While your content fits into the view, chances are you’ll have to negotiate page performance to pull this off, leaving many online shop owners dealing with the size vs. speed dilemma.
Another option would be to resize your images manually. This includes changing your Shopify theme to render different stored images depending on the device access type. This is a task best left to Shopify developers and may take more time and money than you’re willing to spend.
Shopify Image Sizes & Optimization
Large files take longer to load than their smaller versions. This is because each time a page containing media loads, the files have to be downloaded for temporary storage in the browser. When left to Shopify to manage, you may encounter pages that display images seconds after all the text has been loaded. This is not good news for your Shopify SEO.
Such performance shortfalls are enough to discourage potential customers from browsing through your catalog. Long story short, you lose customers when your Shopify image sizes are not optimized!
Fortunately, you can add plugins to your Shopify theme for enhanced performance. Specific to the image load speed and optimization conundrum is Plug In Speed.
What is Plug in Useful?
Plug In Speed
True to its name, Plug in Speed puts your Shopify store on steroids, performance-wise. Once installed, you don’t have to be too worried about the image sizes and how they change and appear on every user device. The plugin automatically changes your files’ sizes using either lossy or lossless compression (used with .png files). Both of which maintain the quality of your images even as they shrink or expand for the best user experience.
Once you have smaller files, you can trust that your pages will load faster. Plug in Speed doesn’t stop there. Your Shopify store’s code changes each time you customize it to your liking. These under-the-hood alterations often slow down your website. Code minification is a way to resolve this. With Plug in Speed, you won’t need to learn how to code in order to achieve this.
Plug In SEO
As far as image optimization is concerned, having perfect quality and size is just one side of the coin. Your images should also be SEO optimized. This is where Plug in Speed’s twin app, Plug in SEO comes into play.
Think about it — what good is an image when it doesn’t compete for attention on search engine image results? With more users using Google’s search by image function, you should make it easy for your products to get discovered. Plug in SEO makes sure your images have Alt tags and links crucial to their discoverability on the internet.
When paired together, the two Plug in Useful Shopify extensions takes care of critical optimization work that would have cost you revenue over time. Even the free tiers of the plugins are powerful enough to give you the edge and performance boost you need to increase your sales. All this effort should improve your Shopify website appeal and page load performance. While you’ll need to rely mostly on discretion when it comes to aesthetic appeal, you can fixate on the reports from both plug-ins when comparing your performance metrics over time.
Getting Started With Shopify Image Optimization
Now that you know the various image types and resolutions perfect for specific sections of your Shopify store, it’s time to improve your shop. The most cost-effective way to do this starts with installing both Plug in Useful extensions.
