为什么谷歌灯塔抱怨带有图片标签的图像尺寸和重量？

Question

我在带有媒体查询和 webp 图像的轮播中使用了图片标签。但是当我在 Chrome 中测试它时，我在图像上收到 2 个通知：“正确调整图像大小”和“以下一代格式提供图像”

<div class="splide-slide-contaniner"><picture class="carousel-item-picture bg-cover">
<source media="(max-width: 575px)" srcset="../static/images/banner-home/mobile/img-banner-1.webp" draggable="false" type="image/webp" alt="banner slide 1">
<source media="(min-width: 576px)" srcset="../static/images/banner-home/desktop/img-banner-1.webp" draggable="false" type="image/webp" alt="banner slide 1">
<source media="(max-width: 575px)" srcset="../static/images/banner-home/mobile/img-banner-1.jpg" draggable="false" type="image/jpeg" alt="banner slide 1">
<source media="(min-width: 576px)" srcset="../static/images/banner-home/desktop/img-banner-1.jpg" draggable="false" type="image/jpeg" alt="banner slide 1">
<img src="../static/images/banner-home/desktop/img-banner-1.jpg" draggable="false" alt="banner slide 1">
</picture>
</div>

似乎只看到 IMG 后备标签。