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

Overview

• 1. How to handle this opportunity
• 2. How to make responsive images
• 3. Serve proper size for images
• 4. Proper width and height

Site Speed Performance Analysis Tools

• Google Pagespeed Insights (Recommended)
• GTMetrix
• Google Lighthouse

Properly Sized Images

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

How to Handle “Proper-Sized Images”

The 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.' %}
 
     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

Aspect Ratio

The tag

This element is used as the last child element of the picture declaration block. elements are used in order to provide backward compatibility for older browsers, or if none of the source tags are compatible.

Example:


         srcset="{{ collection | img_url: '375x' }},
                     {{ collection | img_url: '375x', scale: 2 }} 2x">

         srcset="{{ collection | img_url: '768x' }},
                  {{ collection | img_url: '768x', scale: 2 }} 2x">
  
    srcset="{{ collection | img_url: '1200x' }}, {{ collection | img_url: '1200x', scale: 2 }} 2x”  alt="..." loading="lazy">

The Device Pixel Ratio

Example:

For those mobiles whose DPR is 1: iPhone4

”//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

”//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_600x.jpg?v=1616128891 2x,”

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

”//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_800x.jpg?v=1616128891 3x,”

What Strategies Can you use to Resolve the Problem

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