December 20, 2021 | 5 min read

Proper sized image(responsive images) and how to handle this for shopify

Identification for Responsive image

Tools like GT matrix, lighthouse, Page speed insights
Deliver-responsive-images
For each image on the page, Lighthouse compares the size of the rendered image against the size of the actual image. The rendered size also accounts for device pixel ratio. If the rendered size is at least 4KiB smaller than the actual size, then the image fails the audit.
Specify multiple image versions and the browser will choose the best one to use:
Example:
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.

1. Shopify Image Proper Size Solution

1.1 How we can add proper size images

A)
< img class=”grid-product__image lazyload”
data-src=”{{ img_url }}”
data-srcset=”{{ img_url }}”
data-widths=”[180, 360, 540,720]”
data-aspectratio=”{{ preview_image.aspect_ratio }}”
data-sizes=”auto”
alt=”{{ preview_image.alt | escape }}”
srcset=”data:image/svg+xml;utf8,<svg%20xmlns=’http://www.w3.org/2000/svg’%20width='{{ preview_image.width }}’%20height='{{ preview_image.height }}’>”
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 %}
< img class=”lazyload” />
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 }}”>

1.2 If images are in Hard coded

Before:-
< img src=”https://cdn.shopify.com/s/files/1/0257/4663/6884/files/decs_1.png?v=1591449954″ >
After:-
< img
class=”lazyload”
src=”data:image/svg+xml;utf8,<svg%20xmlns=’http://www.w3.org/2000/svg’%20width=’80’%20height=’80’>”
data-src=”{{ ‘decs_1.png’ | asset_img_url: ‘120x’ }} 90w, {{ ‘decs_1.png’ | asset_img_url: ‘150x’ }} 120w”
data-sizes=”auto”
alt=”decs_1.png”
width=”80px”
height=”80px”>