页面加载慢,八成是图重。同样一张照片,WebP比JPG小三成左右,比PNG小得多,画质肉眼几乎无差。主流浏览器全支持好几年了,图片格式升级是性价比排前几的优化。
转换用cwebp命令行,批量处理写进脚本。质量参数75到85是甜点区,再高体积涨得快、画质几乎看不出变化。
# 单张转换,质量80
# Windows版下载 libwebp 后在bin目录执行
cwebp -q 80 input.jpg -o output.webp
# 批量:当前目录所有jpg转webp
for f in *.jpg; do cwebp -q 80 "$f" -o "${f%.jpg}.webp"; done
# 查看转换效果
ls -l output.webp
Nginx侧把webp的MIME和缓存策略配好,愿意的话还可以按浏览器Accept头自动挑格式,同一个URL给Chrome吐webp给老设备吐jpg,源码一行不改。图片是流量大头,动这一处比压缩代码见效快得多。验证简单:DevTools的Network面板看图片资源体积和类型列,省了多少一目了然。
数据来源:MDN Web Docs《Web媒体类型与图片格式》文档
申请创业报道,分享创业好点子。点击此处,共同探讨创业新机遇!

