28 Feb
Shopify is an incredible ecommerce platform, making it easier than ever for businesses and merchants to create a site for their business, market their products, and sell like never before. They have multiple different shopping cart and payment options naturally integrated into the platform, and there are thousands upon thousands of apps that can help you do everything from automating your accounting to creating shipping labels at a discount.
There are so many incredible options that sometimes merchants can still feel a little lost with some of the basics. If you can upload images of so many different shapes and sizes, for example, how do you know which one is best?
Fortunately, there are straightforward answers about the best Shopify image sizes, image subjects, and overall best practices. In this post we’ll look at everything you need to know about the best Shopify image sizes and how to optimize them to help you sell more right away.
Why does Shopify image sizes matter ?
Imagine you walked into a store and everywhere you looked there were products thrown about on shelves. Imagine the layout of the store was difficult to navigate, and the merchandising had no consistent style.
You’d probably turn on a dime and head out the door, right? Well, this is what happens when you don’t optimize your shopify picture sizes correctly. Your store can feel messy, unorganized and unprofessional – read: not good.
What’s more, improperly sized images can affect your store’s loading time. And we know that a slow loading store can absolutely tank your conversions. If your store currently looks like you’ve simply plucked your product images straight from the manufacturer, or contains grainy low-res photos, then it’s time to do something about it.
When you optimize the images for your store, you’ll deliver a cleaner, more enjoyable shopping experience that results in more conversions and sales for your business.
Best image sizes for Shopify stores
So, with the benefits of properly sized images in mind, here’s what you need to know about the different types of image sizes for Shopify. First up, you’ll want your images to be large enough to show your product in detail, while at the same time, keeping them small enough to allow for speedy loading times.
When it comes to Shopify images sizes, generally the maximum size you can have is 4472 x 4472 pixels totalling a size of 20mb. Now, this doesn’t mean you should use images of such magnitude – it’s just the upper limit of what’s possible.
Typically, most Shopify experts advise that for square images you stick to a size of 2048 x 2048 pixels to hit the sweet spot between size and speed.
It’s also important not to go too small. Shopify product images that are smaller than 800 x 800 pixels won’t be able to be zoomed upon. This is a key consideration when thinking about how to maximize conversions.
Each Shopify theme may have it’s own specific image requirements. Different themes can crop your images differently which can affect how your store looks and feels. Therefore it’s essential to follow the image size requirements of your theme for best results.
Shopify product image size: 2048 x 2048px
Nailing your Shopify product image size needs to be your number one priority. Seriously, your product images are at the heart of what makes conversions happen in your store. Low-res, un-zoomable images simply won’t cut it here.
Given that shoppers can’t physically inspect your products, you need to recreate that experience as much as possible with your images. People may need to evaluate the texture, material or other details up close before they’re ready to buy.
If the majority of your traffic comes in from mobile devices, then square images are the best way to go. Your Shopify theme will automatically resize images for the best user experience, and on mobile square images with your product centered produce optimal results.
For sizing, remember that it needs to be at least 800 x 800 pixels so customers can use the zoom function without seeing a pixelated blur on closer inspection. Also, once you’ve uploaded your images, always check them on both mobile and desktop to ensure everything looks good.
For each product Shopify allows you to upload 250 images – obviously this is overkill, but it is worthwhile uploading more images than less. Try to mix lifestyle images with pure product photography and display your products from multiple angles too.
For more on how to actually take good product photos, check out Shopify’s helpful product photography guide for making your products pop, even if you’re on a budget.
Shopify collection image size: 2048 x 2048
A Shopify collection is a group of products on your online ecommerce store pages. Since the images are side by side, it’s essential to make sure all the Shopify images in your collection have the same image aspect ratio and image sizes. It’s extremely obvious if one product image does not have the same size as the others.
Shopify slideshow image size: 1200-2000 width x 400-600 height
For many themes, the first thing your visitors will see is your homepage slideshow. That’s exactly why you need to make sure your image parameters are on-point here.
Large, high-definition images that pop off the page and snag attention are the order of the day. Now, different themes have different slideshow sizing requirements. For example, the popular Debut theme has four factors that’ll affect how your images display:
- Aspect ratio (aka width-to-height ratio)
- Image size
- Position settings for your image
- Slide height settings
Because the slideshow ‘slides’ from one image to the next, it’s a good idea to ensure all images are the same aspect ratio. This keeps things looking consistent and professional.
Shopify banner image size: 400-600 width x 1200 height
Shopify banner images are quite similar to slideshows and often feature text overlaid. You’ll find them at the top of your homepage – and they’re the first thing new visitors see, so you’ve got to make it count.
Just like your slideshow images, using high resolution images here is non-negotiable. It’s also worthwhile keeping the background toned down to give your text a chance to pop. Too much background noise will lower the contrast and confuse visitors.
Each theme has different requirements for banner images, so be sure to check what’ll work best on your store. You may also need to consider defining the height of your images for mobile devices. With banner images, quite often what looks good on desktop can be awful on mobile.
For example, when using the popular Debut theme, the sides of your banner image get chopped off on mobile. It’s possible to remedy this by adding code to change the alignment, aspect ration and padding. If coding isn’t for you, you can also just use a hero image with your design and copy in the center of the image so it appears on all devices.
With Debut, there is no specific size recommended for banner images, however, a width of 1200-2000 pixels and a height of 400-600 pixels generally works well.
Shopify logo image size: 450 height x 250 width
Of all Shopify image sizes, the logo is one that throws many merchants off. I know I’ve had my fair share of uploading logos that look way out of whack with the rest of the site.
The official Shopify logo image size recommendation is no larger than 450 height x 250 width. This of course doesn’t mean your image size has to be exactly those dimensions. However, in many themes, the sidebar is 250px wide, so keep your logo below that figure for the tidiest appearance.
You may also opt to go with a square logo (aspect ratio 1:1) as this type of image will look good just about anywhere on your site. Again, keep an eye on the maximum dimensions – 200px x 200px is a safe bet here. Again, some themes (such as the Turbo theme) may have special requirements so always check first.
How to optimize your Shopify image format
Ok with a handle on the best image sizes for your Shopify store, the next thing to consider is what kind of image formats you’re going to use.
Let’s explore some of the most common image formats found in the world of ecommerce photography. Each comes with their own pros and cons you need to be aware of.
1. JPG/Jpeg
JPG is probably the most commonly used image file type for Shopify stores. It’s got excellent color range plus a small file size which lends itself to speedy loading. JPG’s compression abilities offer an excellent balance between quality and size. It’s for this reason that Shopify actually recommends merchant’s use JPG for images on your product page.
2. PNG
Another super common image format used in Shopify stores is PNG. PNG is awesome for eCommerce websites because it allows you to reduce image file size, without reducing overall image quality. Plus, PNG also supports transparency which gives you greater control over your store’s design. One problem with PNG is it’s lossless compression – this means the image file size can often be very large.
3. GIF
GIFs are a universally known image format that are useful for short animations or product explainers (Super popular on Shopify Dropshipping Stores). The GIF image format limits your pictures to only around 250 colours, so they’re not the most vibrant. However they can work great when used in conjunction with other image formats.
4. TIFF
TIFF is a useful image format that’s supported by several web editing apps. This means it’s easy for designers and merchants to edit their images and tailor them for marketing campaigns. TIFF offers high resolution and allows you to save several images in one file. However, like PNG, thanks to lossless compression, the file size tends to be on the larger side.
If you’re confused about which image size to use, then it’s always wise to opt for JPG/Jpeg. As we mentioned before, JPG strikes the balance between file size and image quality better than any other image format.
5. BMP
A commonly used image format in the Windows ecosystem is BMP. It offers data compression and universal compatibility. Since the format is uncompressed, it offers perfect images. But the file sizes are the largest. So either you have a Shopify image size optimizer on your side, or you should go for the other image formats.
There are also other image formats like WebP and SVG available. But overall, JPG is the most convenient image format as it combines both the things that your Shopify store needs – a good quality image and a smaller file size that does not impact the load time of your store.
Now that you’re well-versed with the image formats available on Shopify, it’s time to introduce you to a new aspect. Making your images responsive as more and more online shoppers move to mobile devices to browse websites.
Expert tips for optimizing your Shopify images for conversions
Ok, with the best Shopify image formats and sizes under our belts, let’s look at how you can go above and beyond your competitors and create images that directly contribute to more conversions and sales.
1. Give your images a name
Most merchants power through hundreds of product images without pausing to change the default camera name. But as someone with a penchant for SEO, I can tell you that this is a massive mistake. See, your image names play a role in ranking your product pages for specific keywords.
Search engines not only crawl the text on your pages, but they also assess image file names to better understand the content of the page. Instead of just going along with the standard camera file name (DCHIMAGE110.jpg), Allbirds have renamed each file with a descriptive title:
‘Men_s_Wool_Runners_-_Natural_Grey__Light_Grey_Sole’
This helps Google to understand and serve this page to prospective customers who are searching for terms like ‘Grey wool runners’.
2. Compress your images
Almost 50% of consumers won’t wait even 3 seconds for an ecommerce site to load. So, it’s imperative that you do everything in your power to speed up your pages. Decreasing the file size of your images is one of the most effective ways to tackle slow page speeds. A good rule of thumb for image sizes is to keep them under 70kb for optimal performance.
Thankfully, Shopify already compresses your images to some extent. However, you can also use free tools TinyIMG or CrushPics to compress your images too. Such tools allow you to control the amount of compressions and bulk-process many files at once.
3. Use a consistent style
Human eyes love consistency. When selecting images for your store, always keep things looking consistent to create a more professional feel. Obviously, you can arrange a professional photoshoot to capture similar images. However, if you’re on a budget, digital tools like photoshop and Canva both have the ability to remove/add backgrounds to create this consistent visual shopping experience.
4. Include lifestyle & product photography
For most products, a combination of both regular product photography and lifestyle images will help you get the most conversions. Pure product photogra[hy is important so customers can inspect product details – while lifestyle shots help users visualize the product in real life.
5. Test your images
Finally, just like everything else in your store, you should be testing your images to see what performs best. You can test things like:
- The number of product images per page
- The styles of images that work best
- How many images you have on each product collection page (10, 20, 100)
You can use a heat mapping tool like hotjar to see how customers are interacting with your images. Or another simple way to gather feedback from customers about their image preferences is with a simple post purchase survey on your thank you page.
How to add images to your Shopify store?
Adding images to your Shopify store is very simple. Here are the simple steps you need to take:
- Go to Shopify admin, click the product, collection, web page or blog post where you want to add an image
- From the rich text editor, place your cursor where you want the image to be displayed
- Click Insert image
- Click Upload file
- Select the image you want to upload and then choose an image size
- Add image alt text to ensure the search engine knows what it is about
- Click Insert image to add your image into the content
Free Shopify image size resources
Below are some resources that will help you optimize your image sizes:
1. Shopify Image Resizing Tool – a nifty tool that does exactly what it says on the tip – resize your images quickly and easily for better performance.
2. Google Page Speed Insights – A helpful tool from Google that’ll help you weed out slow-loading images on your site for snappier loading times.
3. Unsplash – a collection of high-quality royalty-free images you can use on your store and in your marketing campaigns.
4. Burst – a similar collection of professional images from Shopify for use in your store and marketing efforts.
5. Canva – A handy image editing tool without the steep learning curve of photoshop. Use it to resize, edit and change the file format of your images.
Wrap up
It may sound 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 expected.
Also don’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.
Starting with the right types, ensuring they’re uploaded to the perfect sizes, and then optimizing them fully for sales is something you definitely want to invest the time and effort into, as it will pay its dividends many times over.