PNG图片优化：转换为WebP格式提升加载速度-优快云博客

为了优化网页加载速度，文章介绍了将大型PNG图片转换为WebP格式的方案。首先使用tinypng进行压缩，然后通过在线工具转换为WebP。在项目中，检测浏览器支持性并添加全局CSS类以条件性地应用WebP背景图片。最后，调整webpack配置以支持WebP格式。需要注意的是，不是所有图片转换后都更小，需要谨慎替换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

png图片优化webp

页面背景等图片的尺寸都是很大的，png的尺寸一般是的100+kb，导致加载比较慢,需要优化；

实现方案 ：
转换之前的png先使用tinypng link 做一次压缩，再去转换；（为了减少转换次数，因为转换网站要排队比较慢）
1.将png转换成webp，可以使用转换网站：https://cloudconvert.com/png-to-webp link
2.在项目中判断浏览器是否支持png，然后在全局添加class样式，再针对class样式我们替换对应的背景图片即可；

function check_support_webp {
   try {
      return (document.creatElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0)
   }catch(err){
      return false;
   }
}
if (check_support_webp()) {
    $('html').addClass('sup-webp');
}

3、css使用示例；

body {
    background: #212643 url("../images/background.png") no-repeat center top;
}
 
.sup-webp body {
    background-image: url("../images/background.webp");
}

4.webpack配置修改 scripts/webpack.common.js 中url-loader正则匹配修改成下面的内容，加上webp：

module.exports = {
    test: /\.(png|jpe?g|gif|svg|ttf|woff2|eot|woff|mp3|mp4|swf|webp)(\?.*)?$/i,
    loader: 'url-loader', // 小于3k, 转成base64
    options: {
        limit: 10000,
        name: 'assets/media/[name].[hash:5].[ext]',
    },
}