The Anatomy of Great Responsive Shopify Product Images

on November 11, 2018

Create your own shopify store

High-quality images are a 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 maximum quality images to your Shopify Admin, if you haven't done it yet. Garbage in, garbage out. Please remember this.

Learn how to delight a customer by AR Quick Look in Shopify Store

Math of responsiveness

We should define what resolutions are most common and what 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 4к 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 is losing 4G?  So you need the same image size as you want to load for the most common screen resolutions.

Let's look at 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. First of all, 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 Retina display

HiDPI or Retina screens have 2x resolution at 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.

Optimized image
Retina display
Standard image
Not HiDPI display

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.

Download our quick-start Shopify guide

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.

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

Use 306px and 612px for 768px screen.

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

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

Customizing a Shopify theme

The Debut Shopify theme already has support for responsive images but has 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!

Learn how to increase sales and get followers in Shopify store with Instagram feed.

Conclusion

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

Share This Article