Lazyloading webp images - how to add the class

3
votes

I am unable to lazy-load webp images because the class attribute is not seen by browser.

I am running the audit in Chrome browser to speed up my site as much as possible and the next thing to be done is to make images off the screen to be lazy-loaded. For this purpose I need to add to all these images some class that I will call in JavaScript. But where should I put the class attribute? If I put it in the place as in the code below the attribute is not seen. Also some free online SEO audits claim, that there is a lack of alt attribute (when I run them from Chrome).

<picture>
    <source srcset="images/img1.webp" type="image/webp">
    <source srcset="images/img1.jpg" type="image/jpg">
    <img data-src="images/img1.jpg"  class="blog-img js-lazy-image" alt="some alt text">
</picture>

I also tried to put the alt and class attributes within the source tag, but it doesn't work as well. So what is the way to add these attributes properly?

If I put just:

<img data-src="images/img1.jpg"  class="blog-img js-lazy-image" alt="some alt text">

lazy loading works fine. But I would like to use it with picture...source tags.

Thank you in advance for any replies.

2
classlazy-loadingaltwebp

2 Answers

3
votes

I've already found the solution. I'm posting it, because maybe someone will encounter similar issue, and there are no answers that can be easily found. It is required to add data- before srcset as well, and attributes can be added normally:

<picture>
    <source data-srcset="images/img1.webp" type="image/webp" class="blog-img js-lazy-image" alt="some alt text">
    <source data-srcset="images/img1.jpg" type="image/jpg" class="blog-img js-lazy-image" alt="some alt text">
    <img data-src="images/img1.jpg" class="blog-img js-lazy-image" alt="some alt text">
</picture>

Lazy loading is now working perfectly.

0
votes

Use this code :

<picture>
    <!--[if IE 9]><video style="display: none;><![endif]-->
    <source data-srcset="images/img1.webp" type="image/webp">
    <source data-srcset="images/img1.jpg" type="image/jpg">
    <!--[if IE 9]></video><![endif]-->
    <img    
        data-src="images/img1.jpg"
        class="lazyload"
        alt="image with artdirection" />
</picture>

Source:
https://github.com/aFarkas/lazysizes#js-api