Shopify Image Sizes. The Anatomy

Alex Borodin

High-quality Shopify images are key for presenting your products to a customer. Fast-loading, good-looking photos make a store more attractive and increase your sales.

50% of internet traffic goes through mobile devices in 2018. Most of Shopify themes are responsive, but they usually have some optimization issues.

The other modern thing is screens with high pixel density. Today, there are 4k and 5k displays, high-resolution tablets, and smartphones. But only the most advanced Shopify websites and themes support them.

Let's describe these two points and try to find the best solution and improve the user experience. First of all, upload full-quality images to your Shopify Admin if you haven't done it yet. Garbage in, garbage out. Please remember this.

# Shopify
November 11, 2018

Sell Online With Shopify - Start Selling Anywhere

Start free trial

Maths of responsiveness

We should define the most common resolutions and the image sizes we need. Why can't we use one large image for all screens? The weight of an image quadratically depends on its resolution.

If we load a 640x640px image to a 320px screen, we download 4 times more information. And it is 144 times if we want to load a 4K picture to a 320px display. Internet connection is fast enough today to do this, but have you ever been staring at a blank page when your phone lost 4G? So you need the same image size as you want to load for the most common screen resolutions.

shopify-product-images

Let's look at the most common screen resolution sizes in 2018.

  • 360x640 - 20.04%

  • 1366x768 - 11.84%

  • 1920x1080 - 9.4%

  • 375x667 - 5.07%

  • 1440x900 - 3.26%

  • 768x1024 - 2.61%

There are two important points. Firstly, some displays have both portrait and landscape modes, while others don't. Secondly, if the resolutions are very close, like 360px and 375px, we should use a larger one. Let's use 375px, 667px, 768px, 1024px, 1440px and 1920px.

What is a Retina display?

HiDPI or Retina screens have 2x resolutions of the same size. It means that each pixel on the standard screen matches four pixels on the Retina screen. For example, we should load a 100x100px instead of 50x50px image for such screens. Otherwise, the picture will look blurry.

shopify-product-images

Almost all smartphones, many laptops, 4k, and 5k displays have high pixel density. However, only a few websites are optimized, so that optimization is worth it and can be a real competitive advantage.

Sell your products anywhere with Shopify. Click the link and start a free trial!

Image sizes for Shopify themes

Let's take the Debut Shopify theme as an example and take a look at the product page. The theme has 1200px container width and 522px product image width. So we should use a 522px width image for 1440px and 1920px screens, with a 1044px width image for Retina.

shopify-product-images

The next breakpoint is 1024px. We have 434px and 868px images there.

shopify-product-images

Use 306px and 612px for 768px screen.

shopify-product-images

The largest images are 615px and 1230px for 667px screen.

responsive-shopify-product-images-1

And the last two are 323px and 646px for a 375px screen.

shopify-product-images

Customizing a Shopify theme

The Debut Shopify theme already has responsive images support but no Retina support. It uses JavaScript to support responsiveness, but in 2018, this can be done simply with HTML. We will use a <picture> tag. Find 'product-template.liquid' and replace the <img> tag at line 71.

<picture> 
  <source media="(max-width: 375px)" srcset="{{ image | img_url: '323x323' }} 1x, {{ image | img_url: '646x646' }} 2x" /> 
  <source media="(max-width: 667px)" srcset="{{ image | img_url: '615x615' }} 1x, {{ image | img_url: '1230x1230' }} 2x" /> 
  <source media="(max-width: 768px)" srcset="{{ image | img_url: '306x306' }} 1x, {{ image | img_url: '612x612' }} 2x" /> 
  <source media="(max-width: 1024px)" srcset="{{ image | img_url: '434x434' }} 1x, {{ image | img_url: '434x434' }} 2x" /> 
  <source srcset="{{ image | img_url: '522x522' }} 1x, {{ image | img_url: '1044x1044' }} 2x"> 
  <img id="{{ img_id }}" class="feature-row__image {{ img_class }} lazyload{% unless featured_image == image %} lazypreload{% endunless %}" src="{{ image | img_url: '522x522' }}" tabindex="-1" alt="{{ image.alt | escape }}">
</picture>

That's it!

Sell online with Shopify. Click the link and get a free trial of Shopify!

Conclusion

The same thing can be done with any image in your Shopify theme; you present your products with high-quality photos. The store will load quickly, improving the user experience significantly.

Author
Alex BorodinChief Operating Officer

Related articles

Sell Online With Shopify - Start Selling Anywhere

Start free trial

Full-Service Software Development Company. We specialize in Ruby on Rails web applications, headless commerce platforms, and bespoke eCommerce product development.