How can I fix image sizing issues for speed optimization?

How can I fix image sizing issues for speed optimization?

Olivia23
Tourist
13 1 0

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

Replies 3 (3)

oscprofessional
Shopify Partner
16272 2431 3163

@Olivia23 ,

 

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&colon;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}}">

 

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free | OSCP Shipping Discounts App : Free
oscprofessional
Shopify Partner
16272 2431 3163

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&colon;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 }}">

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free | OSCP Shipping Discounts App : Free

Cedcommerce
Shopify Partner
718 77 116

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. 

 

  • Manual resizing of images

 

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

CedCommerce || Shopify Expert
- Let us know if our reply is helpful for you. Like it.
- Was your question answered? Mark it as an accepted solution.
- For further discussion contact: Email ID- apps@cedcommerce.com
- Whatsapp:- Join Here