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”
Before | < img src=”cat-large.jpg” > |
After | < img src=”cat-large.jpg” srcset=”flower-small.jpg 480w, flower-large.jpg 1080w” sizes=”50vw” > |
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
In the same way as
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
Basic Optimization
Plan
Advanced Core
Web Vitals
*May require design and functionality changes
#Blog Pages are not part of Optimization Scope