How to Handle the Opportunity “Proper Size Images” in Shopify

Nitin & Bhavesha | December 6, 2022 | 5 min read

Overview

Following are some points related to the opportunity to “Properly sized images”
  • 1. How to handle this opportunity
  • 2. How to make responsive images
  • 3. Serve proper size for images
  • 4. Proper width and height
It will be helpful to understand the opportunity for “Properly sized images” and to maintain them based on the content below. The content below derives from our experience executing over 50+ speed optimization projects on Shopify websites.

Site Speed Performance Analysis Tools

Following are some points related to the opportunity to “Properly sized images”

Properly Sized Images

For each image on the page, GSI compares the size of the rendered image Against the size of the actual image. The rendered size also accounts for the device pixel ratio. If the rendered size is at least 4KiB smaller than the actual size, then the image fails the audit.
  • The Opportunities section of your Lighthouse and Page insight tool report lists all images on your page that aren’t appropriately sized, along with the potential savings in kibibytes (KiB).
  • Resize these images to save data and improve page load time. You need to give the appropriate size to the images.
  • If you click on the field Properly size images it will open all improvable images below. You can then see the potential savings and the current resource size.
Properly-responsive-images

How to Handle “Proper-Sized Images”

The <img> tag’s src, srcset, and sizes attributes all interact to achieve this end result.
Before < img src=”cat-large.jpg” >
After < img src=”cat-large.jpg” srcset=”flower-small.jpg 480w, flower-large.jpg 1080w” sizes=”50vw” >
The < img > tag’s src, srcset, and sizes attributes all interact to achieve this end result.
Shopify Image Proper Size Solution:

A)
{% assign img_url = img | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
<img class="grid-product__image lazyload" /> 
     data-src="{{ img_url }}"
     data-srcset="{{ img_url }}"
     data-widths="[180, 360, 540]"
    data-aspectratio="{{ img.aspect_ratio }}"
    data-sizes="auto"
    alt="{{ img.alt | escape }}"
   height="{{preview_image.height}}"
    width="{{preview_image.width}}">
B)
{% capture image_100x %}{{ media.preview_image | img_url: '100x' }}{% endcapture %}
{% capture image_200x %}{{ media.preview_image | img_url: '200x' }}{% endcapture %}
{% capture image_300x %}{{ media.preview_image | img_url: '300x' }}{% endcapture %}
{% capture image_400x %}{{ media.preview_image | img_url: '400x' }}{% endcapture %}
{% capture image_600x %}{{ media.preview_image | img_url: '600x' }}{% endcapture %}

src="data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'%20width='{{ preview_image.width }}'%20height='{{ preview_image.height }}'>"
data-src="{{ image_100x  | img_url: '100x' }} 100w"
data-srcset="{{ image_100x }} 100w,
             {{ image_200x }} 200w,
             {{ image_300x }} 300w,
             {{ image_400x }} 400w"
width="{{preview_image.width}}"
height="{{preview_image.height}}"
alt="{{ preview_image.alt }}">

  • The browser will select which image to load depending on the width of the window or screen.
  • Transforming img_url width according to the viewport from data-width and passing it to the data-srcset with the proper Shopify image size. For these, we need to pass the data width according to the standard viewport.
  • Your page should never serve images that are larger than the version that’s rendered on the user’s screen. Anything larger than that just results in wasted bytes and slows down page load time.
  • Once the image has been converted to the right format, it is also important to bring it down to the right dimensions that are actually required on the page.

Image srcset tag

The srcset attribute is that it will allow you to define a set of images the browser can choose between. This means that smaller versions of an image can be loaded on smaller screens, thereby reducing the amount of time a browser spends loading a page.

Aspect Ratio

Image aspect ratio describes the size of a screen or image in terms of its width and height.
Aspect ratios are composed of two numbers separated by colons.The first number indicates the image’s width, and the second, its height.

The <Picture> tag

<picture> tag contains both  <source> and <image> tags . In this case, the attribute value is set to load the more appropriate image.
This <img> element is used as the last child element of the picture declaration block. <img> elements are used in order to provide backward compatibility for older browsers, or if none of the source tags are compatible.
In the same way as <video> and <audio> tags, the picture tag allows us to include different sources, and the first one that matches the preferences will be used.
As an alternative, the pixel density can be used within the srcset attribute of a source element.

Example:
<picture class="ratio-16/9">
 <source media="(max-width: 375px)"
         srcset="{{ collection | img_url: '375x' }},
                     {{ collection | img_url: '375x', scale: 2 }} 2x">
  <source media="(max-width: 768px)"
         srcset="{{ collection | img_url: '768x' }},
                  {{ collection | img_url: '768x', scale: 2 }} 2x">
  <img src="{{ collection | img_url: '1200x' }}"
    srcset="{{ collection | img_url: '1200x' }}, {{ collection | img_url: '1200x', scale: 2 }} 2x”  alt="..." loading="lazy"></picture>

The Device Pixel Ratio

Provides control over the output density of your image, so you can serve images at the correct density for every device.

Example:

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 2x image source is not given this will multiple 336×2=672 and will pick a 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 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: Moto G4, iPhone6/7/8 Plus, iPhone X and Galaxy Fold

Here sizes is 336px
If 3x image source is not given this will multiple 336×3=1008 and will pick a 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 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,”

What Strategies Can you use to Resolve the Problem

  • Serve responsive images
  • Image CDNs
  • Replace complex icons with SVG

Shopify Speed Optimization Service Packages

divide

Basic Optimization
Plan

$149

(One time fee)
$249 (USD)
Desktop Performance Score 90+
Improved Mobile Performance Score
Upto 3 secs load time
Buy Now

Advanced Core
Web Vitals

$349

(One time fee)
$449 (USD)
Basic Optimization Plan +
Pass core web Vitals*
Upto 2 secs load time
Detailed SEO Audit Report
Buy Now

*May require design and functionality changes
#Blog Pages are not part of Optimization Scope

Leave A Comment