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.
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.
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.
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 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.
