Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
Hello Experts,
My optimization reports have errors in properly sizing images issue? how can I solve it? My developer is stuck in this...
Please help so I can guide to developer...
The Opportunities section of your Lighthouse report lists all images in 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
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:
For Example:
Before | <img src="flower-large.jpg"> |
After | <img src="flower-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)
<img class="grid-product__image lazyload"
data-src="{{ img_url }}"
data-srcset="{{ img_url }}"
data-widths="[180, 360, 540]"
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 }}'></svg>"
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 }}'></svg>"
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 }}">
Hello @Olivia23,
We would be more than happy to help you with this.
For your general information we would like to inform you that, Images account for more than 60% of the bytes needed to load a web page.
Hence, you need to pay special attention to image size, when working with your website.
Here. are some important things you should note while fixing the issues.
You have to check that the image's rendered size must not be larger than the Intrinsic aspect ratio. If the intrinsic size of the image is higher or lower than rendered size then this issue will occur.
This can be done by changing the img_url filter of the image tag.
<img src="{{ image_url | img_url:'original' }}" alt=""/>
Sometimes you have to make a separate setting for the mobile view and separate settings for the desktop view to overcome this issue.
You can check all the filters in this URL: https://www.codeshopify.com/blog_posts/new-features-for-the-shopify-img_url-filter
Hope it helps.
Regards,
CedCommerce
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025