图片优化实战：为什么你的网站慢得像牛车？
图片优化？每次听到这个词我就头大。干了十年SEO，最烦的就是老板说‘网站怎么这么慢，快优化一下图片’。他们以为图片优化就是拖进美图秀秀点一下压缩。天真。这玩意儿门道多着呢，今天就把我踩过的坑全倒出来，能救一个是一个。一、图片格式，你真选对了吗？
我敢打赌，90%的人还在用 PNG 当网站主图。PNG 这格式，无损压缩是好，但体积大得离谱。有次客户丢给我一堆首页 Banner，全 PNG，加起来 5MB！首页加载 15 秒，跳出率直奔 80%，老板的脸都绿了。我默默转成 WebP——体积直接缩到 1MB 不到。WebP 是真的香，Google 推的，无损有损都支持，透明图也能压。更狠的还有 AVIF，体积更小画质更好，可惜 Safari 之前一直不支持，气得我拍桌子。现在总算兼容了，但安卓旧机还是歇菜。所以，性能优先就上 WebP，兼顾未来用 AVIF，古董设备用 JPEG 降级。 别问我怎么知道的，都是泪。
https://obgeo.oss-cn-beijing.aliyuncs.com/pvc-articles/6805eea9-9c1c-40dc-9645-8b07f61c1d8b.jpg
图片格式WebP与PNG大小对比示例
二、压缩，别只知道 TinyPNG
TinyPNG 是好用，但只会用 TinyPNG 说明你还嫩。做站群的时候，几百张图不可能一张张拖。我用过 Squoosh，Google 出的，调参数很方便，还能看对比。还有 ImageOptim，Mac 神器，拖进去就压，非破坏性的。但最狠的是命令行工具，pngquant、mozjpeg，写个脚本批量处理，爽到飞起。不过有次手滑，把有损压缩质量设成 50%，画质渣得被设计师骂了一周。“你是不是用座机压的图？”——我无言以对。所以，压缩得有策略：照片用有损 75% 左右，图标用 SVG 或字体，实在不行再 PNG-8。 对了，SVG 这玩意儿体积小缩放清晰，但内联在 HTML 里会增加 DOM 大小，看情况选吧。
https://obgeo.oss-cn-beijing.aliyuncs.com/pvc-articles/b2cf03b0-e386-4cea-82fa-df1e94238710.jpg
在线图片压缩工具Squoosh使用界面
三、懒加载≠万事大吉
https://obgeo.oss-cn-beijing.aliyuncs.com/pvc-articles/f6e6b6e3-1797-41f2-82c4-bcda7eb87fae.jpg
三、懒加载≠万事大吉
现在前端动不动就加个 loading='lazy'，觉得万事大吉。说实话，native lazy loading 是好，但浏览器支持还不是 100%，而且对首屏图会延迟加载，造成 LCP 飙升。我见过一个站，首屏大图懒加载，硬生生把 LCP 拖到 6 秒，然后问我为什么优化了速度反而 Core Web Vitals 更差。无语。关键图必须取消懒加载，preload 都给我上。还有瀑布流的站，懒加载加无限滚动，内存泄漏能把浏览器卡崩——说多了都是泪。
四、响应式图片，移动端不照顾就是死
2024 年了，移动流量占大头，还有人给手机怼 2000px 宽的大图。你不知道 srcset 和 sizes 属性吗？picture 元素呢？这都不是新东西了。我写过一套规则：不同断点用不同尺寸，结合 2x 屏配高清图。 但别光顾着尺寸，移动网络也渣，体积也得压。有个客户在 3G 网络下测，图片 2MB 一个，转圈圈转了 20 秒，用户早跑了。后来搞了 adaptive image，根据设备类型和带宽动态调质量，爽了很多。
https://obgeo.oss-cn-beijing.aliyuncs.com/pvc-articles/cb885240-a4dc-4085-a754-330b3f9fffc9.jpg
响应式图片srcset属性写法示例
五、CDN 和缓存，图片飞的最后一公里
https://obgeo.oss-cn-beijing.aliyuncs.com/pvc-articles/8eb2e5b9-7400-4cfb-b65d-e6b7b074dd9e.jpg
五、CDN 和缓存，图片飞的最后一公里
CDN 是标配，但配置错了一样废。我见过 CDN 缓存头设成 no-cache，每次请求都回源，钱花的多速度还慢。还有缓存版本号乱加，一张图改个查询参数就爆缓存，谁受得了。正确做法是 文件名 hash，永久缓存，CDN 就近分发。 图片优化做到这步，基本就及格了。行了，就扯这么多。图片优化是个无底洞，但做好了，网站速度飞起，老板笑呵呵，你也不用背锅。赶紧去折腾吧。 不仅内容好，语气也很温和，这样的交流氛围真的很不错。 看完之后深有感触，有些话真的说到心坎里了，很有共鸣。 虽然有些地方不太懂，但整体看完还是收获很多，慢慢消化一下。
页:
[1]