网站图片优化全攻略：PNG换成AVIF，加载快三成

图片通常是网站体积的大头，占六七成是常事。把这个大头压下去，网站速度立竿见影。我自己一个站只做图片优化，LCP就从2.8秒降到了1.9秒，啥代码都没动。

格式选对，体积砍半

照片类用WebP起步，兼容性最好，比JPEG小30%左右。追求极致用AVIF，比WebP再小两三成，Chrome、Edge、Firefox都支持，Safari也跟上了，2026年可以放心用，但记得给老浏览器留JPEG兜底。图标和logo这种纯色图用SVG，矢量无损，几KB搞定。别再用PNG存照片了，一张2MB的PNG照片转成WebP就剩200KB。

压缩工具选顺手就行

Squoosh，谷歌出品，网页版拖进去就压，还能对比效果，免费。TinyPNG老牌，支持批量，免费版单张限5MB。服务器上用Imagick写脚本批量压，一次处理整个目录。WordPress用户装个Smush或ShortPixel插件，上传时自动压缩，懒人福音。

三个配套动作别漏

第一，尺寸要对。用多大的图就传多大，一张1000像素宽的图别传4000像素的，很多后台传图就是懒，白白浪费流量。第二，懒加载必须开。首屏之外的图先不加载，滚到再加载，首屏速度能快一截。第三，加宽高属性，不然图片加载时页面上下跳动，CLS指标直接崩。

做完这三件事再配个CDN，图片全部走边缘节点，全国访问都快。检查方法很简单：Chrome开发者工具里看Network面板，大图一目了然。

标签： 图片优化 WebP AVIF 网站性能