网站性能优化之图片

最近在做网站性能优化，跑完明灯，明灯建议图片使用webp的方式加载，但是要考虑兼容问题

如果是img图片使用webp方式，这种只需要改变dom

<picture>
    <source srcset="/XXX.png" type="image/webp">
    <source srcset="/XXX.png" type="image/png">
    <img src="/XXX.png" alt="XXX">
</picture>

那如果是背景图呢？我百度了挺多，找了挺多，还问了chartGPT，最终用了这种，我是需要这种所以就列出这种实现方式

例如less（公司项目里用的是这种）

@supports (background-image: url(XXX.webp)) {
    background-image: url(XXX.webp);
}
                        
@supports not (background-image: url(XXX.webp)) {
    background-image: url(XXX.png);
}