图片优化：我做SEO十年，这些经验没人会告诉你
图片优化？说实话，90%的人都在瞎搞。要么压缩过头糊成一片，要么为了高清拖慢加载速度，排名哗啦啦掉。我今天就摊开了说，那些真正管用的、反常识的图片优化技巧。一、格式选错了，优化全白费
JPEG、PNG、WebP、AVIF……别瞎用！很多人看到WebP体积小就无脑转换，结果兼容性翻车。苹果老设备显示不了？用户跑了。
我的原则是：照片就用JPEG，透明图用PNG，追求前沿性能才上WebP或AVIF，但一定要写fallback。没有最好的格式，只有最合适的场景。
记得去年给一个电商站优化，全换成了AVIF，结果iPhone 6用户全崩，老板差点把我开了。后来乖乖用元素做渐进增强，世界安静了。还有HEIF/HEIC，苹果专属，网页上用的话还得转码，麻烦。估计再过两年AVIF就能普及了，到时候再全面切。
https://obgeo.oss-cn-beijing.aliyuncs.com/pvc-articles/21efc3b4-6f1f-4f88-89a8-53e4a88215b9.jpg
网站图片优化WebP与AVIF格式适用场景对比图
二、压缩的秘密：肉眼看不出来，但机器更爱你
https://obgeo.oss-cn-beijing.aliyuncs.com/pvc-articles/816c2c94-f7fa-479b-aac6-c8c727b654e8.jpg
二、压缩的秘密：肉眼看不出来，但机器更爱你
压缩不等于压画质！用TinyPNG或Squoosh，质量调到80%试试，体积砍半，但细节？你肉眼根本看不出区别。关键是在“感知质量”和“字节数”之间找平衡。
我习惯用imagemagick写脚本批量处理，加个--strip参数去掉EXIF数据，又能瘦身几KB。别小看这几KB，一万张图就是几十MB，CDN带宽费够你喝一壶的。在我优化的数百个网站中，图片通常占了页面总大小的60%以上，砍掉一半体积，LCP直接降下来。
三、懒加载？别傻等用户滚动
懒加载救过我的命，也害过我。传统懒加载基于滚动，用户滚到才加载，体验卡顿。推荐原生的loading='lazy'属性，简单靠谱。但更狠的是“预测性加载”——当用户鼠标悬停或链接进入视口前几百像素就开始加载。我用Intersection Observer定制了一套，首屏加载速度提升了40%。
还有个大坑：别把首屏图片也懒加载！那等于自残。首屏图片必须预加载或者直接内联。注意，loading='lazy'只有在不支持时才需要polyfill，但实际上最新浏览器早就支持了。
https://obgeo.oss-cn-beijing.aliyuncs.com/pvc-articles/cc3f9982-c93f-4f1c-97ca-f7591f403471.jpg
图片懒加载性能优化技巧示意图
四、响应式图片：别让手机下载4K图
https://obgeo.oss-cn-beijing.aliyuncs.com/pvc-articles/94a38f69-a2c1-48ec-8d2d-b0ac1533d55b.jpg
四、响应式图片：别让手机下载4K图
srcset和sizes用起来！很多人懒，只写一个src，结果手机端下载了桌面大图，加载慢成狗。
根据设备宽度和DPR提供不同分辨率的图片，这是必须的。我给博客每个文章封面生成5个尺寸，配合艺术方向调整，移动端用剪裁过的窄图，桌面端用宽图，转化率明显提升。
说实话，之前觉得这事麻烦，但用了Responsive Breakpoints Generator自动生成后，真香。
五、CDN和缓存：你以为设置了就完了？
https://obgeo.oss-cn-beijing.aliyuncs.com/pvc-articles/ac2bd700-8a65-44c3-b9c3-0269c604dcf5.jpg
五、CDN和缓存：你以为设置了就完了？
CDN不是万能的。KeyCDN开了两年，某天发现亚太节点回源率飙升，图片加载超时。排查发现是缓存规则写错了，没区分JPEG和WebP。
给图片设置强缓存，同时用内容哈希做版本控制，比如图片名带hash：hero-54a8f.jpg。这样更新图片立刻生效，不用等CDN刷新。另外，HTTP/2的多路复用对批量小图很有用，但别滥用雪碧图，HTTP/2下反而冗余。我现在的配置：Cloudflare+WebP自动转换，源站只存PNG/JPEG，边缘节点按需转WebP，省心。
血泪教训：图片CDN一定要配监控，突然的流量尖峰可能是爬虫在抓你原图，我被爬走过10GB流量，痛。
六、SEO角度：Alt文本不是垃圾场
Alt属性是给搜索引擎和盲人看的，别塞关键词！写描述性文字，自然嵌入关键词。搜索引擎读图能力比你想象得强，它还能识别图片周围文本、文件名。
我做过实验，优化Alt和文件名后，Google图片搜索流量增加了3倍。简单吧？但多数人忽略。
好了，该说的都说了。执行起来比看文章难十倍，但值。图片优化是持续战，不是一次性工程。测速工具用Lighthouse或WebPageTest，盯着LCP指标，超过2.5秒就亮红灯。 之前一直半知半解，看了你的解释一下子就明白了，讲得通俗易懂。 经验很宝贵，尤其是亲身实践过的总结，比网上随便找的靠谱多了。 非常有建设性的意见，对解决实际问题有很大的参考意义。
页:
[1]