Class Lazyloading webp图像-如何添加类

我无法延迟加载webp图像，因为浏览器看不到class属性

我正在Chrome浏览器中运行审计，以尽可能加快我的网站速度，下一步要做的是让屏幕上的图像延迟加载。为此，我需要在所有这些图像中添加一些我将在JavaScript中调用的类。但是我应该把class属性放在哪里呢？如果我把它放在下面代码中的位置，属性就看不到了。还有一些免费的在线SEO审计声称，缺少alt属性（当我在Chrome上运行它们时）

我还尝试将alt和class属性放在源标记中，但效果不太好。那么，如何正确添加这些属性呢

如果我只说：

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

延迟加载工作正常。但是我想把它和图片…源标签一起使用

---

提前感谢您的回复。

我已经找到了解决方案。我之所以把它贴出来，是因为可能有人会遇到类似的问题，而且没有容易找到的答案。需要在srcset之前添加数据，并且可以正常添加属性：

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

延迟加载现在工作正常。

使用以下代码：

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

来源：

---

这对我来说不适用于同样的策略。知道为什么吗？您还需要一个库来实际执行图像的延迟加载。。。我也可以这样做。将className=“lazyload”添加到source和img中，src的值将是data src和data srcset

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