category oscprofessionals - Blogs - Shopify Image Sizes – The Ultimate Guide

Shopify Image Sizes – The Ultimate Guide

Bhavesha | Dec 24, 2022 | 8 min read

Overview

Proper sizing and formatting of images are important for the appearance and performance of your store.

As a result of improper image format or size, we are approaching 6.9 MB of page weight on mobile and 8.1 MB on desktop at the 90th percentile eCommerce website. We found that the image payload for desktop was 982KB and for mobile was 877KB in one of our optimization cases.

The Shopify stores need the correct image sizes and format to look great. You will learn everything you need to know about Shopify Image Sizes and image formats in this article. To achieve an excellent user experience, the recommended image dimensions, optimization tips, making images compatible with all devices, and well-placed visuals can help you increase conversions.

It will be helpful to understand shopify image sizes and maintain them based on the content below. The content below derives from our experience executing over 50+ speed optimization projects on Shopify websites.

Shopify Image Sizes: Why Are They Important?

Here are a few reasons why you should focus on Shopify image sizes and image optimization as well-

A Better User Experience
When your images are optimized to appear smoothly across all devices without being blurry or stretched, as a result, online shoppers can see and understand the product better, understand its specifications, and get a sense of what it looks like and feels like in a virtual environment. This enhances their overall shopping experience.
Fast Loading Time
Optimizing your images and their sizes makes any web page light. No matter how many images you add to a page. This helps ensure that your page load speed is well within 3 seconds. Image optimization is about reducing the file size of your images as much as possible, without sacrificing quality.
Enhanced SEO Efforts
Images are compressed and resized while retaining quality to provide a smooth user experience and improve search engine rankings. When images are optimized accurately, they boast impressive page speed. Which in turn means a lower bounce rate and hence will impact SEO ranking in a positive way.

Shopify Image Sizes Recommended by Experts?

Here are the general shopify image size recommendations:

Maximum image size: 4472 x 4472 pixels
Recommended square image size: 2048 x 2048 pixels
Image file size: up to 20 MB
Image resolution: 72 DPI

Here are the most common Shopify image sizes for specific image types:

1. Shopify Banner Image Size

On Shopify’s homepage, banner images are usually displayed near the top. We recommended 1800 x 1000px for desktop and a separate image of 800 x 800px for mobile. Make sure to use picture tags so that browser will fetch images based on the device. Make sure to refer to the theme recommendations when choosing the size of images with text overlays.

2. Shopify Product Image Size

The Shopify recommended Product image size is 2048 x 2048 (width x height) for the best quality and a maximum file size of 20MB. You can upload images as small as 800 x 800px, as this is the lowest resolution at which visitors will still be able to zoom in on product images.

If your product image is supposed to be square, make it exactly square, with a 1:1 aspect ratio. A 3:1 ratio is usually used in rectangular designs. Be sure to pay attention to resolution in order to maintain good quality.

3. Shopify Collection Image Size

A Shopify collection is a group of products on your online store. Due to the fact that the photos are next to each other, their aspect ratio and size should be the same. Shopify recommended collections image type 1024×1024 (width x height).

4. Shopify Logo Image Size

Shopify logo image type up to 450 x 250px (width x height) everywhere. A good resolution for a square Shopify logo image is 200 x 200px, which makes it look good no matter what. you need a good logo to represent your brand identity. It is the basis of your business’s branding.

5. Shopify Gallery Image

Shopify recommended Gallery image 800 x 800px (width x height). It is essential to make sure your store’s gallery has high-quality images.

6. Mega Menu Images

Shopify recommended mega menu images 360×360 (width x height). In that, we covered mega menu-related images and covered image size.

7. Newsletter Popup Images

Shopify recommended newsletter popup images 425 x 575 (width x height).and what is recommended for newsletter section image 1600 x 300.

8. Favicon Image (Icon Image)

Shopify recommended favicon images 32 x 32(width x height). this is the small icon image that shows up on your URL.

Which Image Format Performs Best in Terms of Speed?

There are different encoding ways in which image files can be created-

1. PNG: PNG images produce better quality images, but they are larger in size. The images have excellent quality and transparent elements, but if they are heavily compressed, they will lose image quality.
2. JPG: The quality level can be adjusted to find a good output even if you lose image quality. Shopify recommends using JPEG for product images, pages, and blog posts.
3. WebP: Shopify internally converts images and delivers them in webP if coding is done with shopify standards. WebP is the encoding technique that needs almost 40 percent less file size to display a similar image compared to JPG.

What is the Device Pixel Ratio? What is the impact on image sizes?

What is DPR?

DPR or Device Pixel Ratio, also known as CSS pixel ratio, is the number of physical pixels that make up a CSS pixel in one direction of a screen like in the width direction or in the height direction.

Example:

We have an example of image size DPR –

srcset="//cdn.shopify.com/s/files/1/1613/2213/products/lgfr162102379-model-front_200x.jpg?v=1616128891 200w,
//cdn.shopify.com/s/files/1/1613/2213/products/lgfr162102379-model-front_400x.jpg?v=1616128891 400w,
//cdn.shopify.com/s/files/1/1613/2213/products/lgfr162102379-model-front_600x.jpg?v=1616128891 600w,
//cdn.shopify.com/s/files/1/1613/2213/products/lgfr162102379-model-front_800x.jpg?v=1616128891 800w,
//cdn.shopify.com/s/files/1/1613/2213/products/lgfr162102379-model-front_1200x.jpg?v=1616128891 1200w,
//cdn.shopify.com/s/files/1/1613/2213/products/lgfr162102379-model-front_x1600.jpg?v=1616128891 1600w,
//cdn.shopify.com/s/files/1/1613/2213/products/lgfr162102379-model-front_x100.jpg?v=1616128891 1800w,
//cdn.shopify.com/s/files/1/1613/2213/products/lgfr162102379-model-front_x2000.jpg?v=1616128891 2000w,
//cdn.shopify.com/s/files/1/1613/2213/products/lgfr162102379-model-front_x2500.jpg?v=1616128891 2500w,
//cdn.shopify.com/s/files/1/1613/2213/products/lgfr162102379-model-front_600x.jpg?v=1616128891 2x,
//cdn.shopify.com/s/files/1/1613/2213/products/lgfr162102379-model-front_300x.jpg?v=1616128891 3x"
src="//cdn.shopify.com/s/files/1/1613/2213/products/lgfr162102379-model-front_700x.jpg?v=1616128891"
sizes="336px">

For those mobiles whose DPR is 1: iPhone4

Here sizes is 336px so the srcset will display the very next image size which is 400w (400px x 400px)

”//cdn.shopify.com/s/files/1/1613/2213/products/lgfr162102379-model-front_400x.jpg?v=1616128891 400w,”

For those mobiles whose DPR is 2: iPhone5, iPhone6/7/8, iPad, and iPad Pro

Here sizes is 336px

If a 2x image source is not given this will multiply 336×2=672 and will pick the very next image size which is 800w (800px x 800px)

”//cdn.shopify.com/s/files/1/1613/2213/products/lgfr162102379-model-front_800x.jpg?v=1616128891 800w,”

If a 2x image source is given this will pick that 2x source image (600px x 600px)

”//cdn.shopify.com/s/files/1/1613/2213/products/lgfr162102379-model-front_600x.jpg?v=1616128891 2x,”

For those mobiles whose DPR is 3: iPhone 14, iPhone 13 Pro, Moto G4, iPhone6/7/8 Plus, iPhone X, and Galaxy Fold

Here sizes is 336px

If a 3x image source is not given this will multiple 336×3=1008 and will pick the very next image size which is 1200w,”

(1200px x 1200px)

”//cdn.shopify.com/s/files/1/1613/2213/products/lgfr162102379-model-front_1200x.jpg?v=1616128891 1200w,”

If a 3x image source is given this will pick that 3x source image (800px x 800px)

”//cdn.shopify.com/s/files/1/1613/2213/products/lgfr162102379-model-front_800x.jpg?v=1616128891 3x,”

Conclusion

Shopify images are not the only thing you need to sell on the platform, but they will determine whether or not your store is successful and profitable. You definitely want to invest time and effort into choosing the right types, making sure they’re uploaded at the right sizes, and optimizing them fully for sales.

If you want to revolutionize your online store, you can rely on EcDev Studio. Our dedicated development team specializes in optimizing every aspect of your online business, from enhancing user experiences to streamlining checkouts and crafting custom features. By focusing on expertise, customization, and innovation, we’re improving your online experience.