图片优化：一张图差点毁了我的网站，血泪经验全在这了
我永远忘不了那个下午。打开网站，白屏——还是白屏——就像网络死了一样。等了八秒。才看见那张2000KB的banner图缓缓展开。当时第一反应：服务器挂了？后来在GTmetrix里看到那个红色的F，我才明白，就这张图，让跳出率飙到60%。真的，那一刻想删图的心都有了。从那以后，我像着了魔一样研究图片优化，各种格式、压缩、懒加载...今天我把这些经验揉碎了讲给你，全是实操，没一句废话。图片格式选对了，速度就赢了一半
先说说最基础的——格式。很多人随手截图就是PNG，啥图都是PNG。天哪，PNG是给透明背景的，一张照片存成PNG，文件大小能是JPEG的十倍。JPEG呢？有损压缩，照片首选。但我觉得JPEG最大的问题是，它不懂透明，边缘总有些模糊。所以Logo、图标用PNG，照片用JPEG，这是常识。
不过近几年WebP横空出世！说实话，我第一次在Lighthouse里看到WebP的建议时，嗤之以鼻——谁用这玩意儿，万一浏览器不支持呢？后来打脸了。WebP比JPEG小30%左右，画质几乎没差。而且现在主流浏览器都支持，连苹果也跟进了。于是我写了一段.htaccess，根据请求头里的Accept字段，自动返回WebP版本。爽！网站图片总大小从5MB降到2MB。
https://obgeo.oss-cn-beijing.aliyuncs.com/pvc-articles/d931fb72-88d2-426d-aa67-cd0e33b94474.jpg
WebP与AVIF格式压缩率对比图
AVIF更狠，压缩率高得吓人，同等画质下比WebP还小50%。可惜支持度还不行，只有Chrome和Firefox，Safari用户只能干瞪眼。我的方案是：先看浏览器支持，支持AVIF用AVIF，不支持则WebP，再不济才JPEG。用 picture 标签就能搞定：
img.jpg
不过话说回来，格式也不是万能的。有一回我把一张素描风格的图强转成WebP，细节全糊了，客户直接骂人。所以啊，不同的图针对性来。
压缩，但不是你想的那么简单
压缩图片，谁都会。打开TinyPNG，拖进去，下载，完事。对吧？错！最开始我也这么干，结果一张产品图压过头，纹理没了，跟打了马赛克似的。那次被老板批得狗血淋头。后来才明白，压缩分有损和无损。TinyPNG是有损的，它靠减少颜色数量来缩体积，适合照片，但细节丰富的图慎用。
https://obgeo.oss-cn-beijing.aliyuncs.com/pvc-articles/836c7e92-0971-4554-a257-98897d8163ad.jpg
图片无损与有损压缩效果差异示意图
无损工具我用ImageOptim，或者命令行里的pngquant。但无损只能去掉元数据，大小减不了太多。权衡——永远在做权衡。我现在常用的是Squoosh，在线调参数，肉眼对比，质量拉到85%左右是甜点。还有一个隐藏技巧：渐进式JPEG。它先显示个低分辨率模糊图，慢慢变清晰。体验上感觉快了不少，虽然实际体积还大了那么一丢丢。总之压缩这事儿，别追求极致，不然迟早翻车。
懒加载与响应式图片，双剑合璧
懒加载，听上去多美好——延迟加载视口外的图。HTML5的 loading='lazy' 属性，一行代码就搞定。我兴冲冲加上去，结果...首页上面几张图加载巨慢，翻到下面却秒开。一看调试器，loading='lazy' 连首屏的图也懒了！我当场吐血。教训：首屏图片别懒加载，保证第一屏的图是普通加载。还有，如果懒加载没设置好宽高，图片加载瞬间，页面会跳来跳去，CLS分数爆炸，Google排名直接掉。解决很简单：给图片加上 width 和 height 属性，或者用 padding-bottom 撑位。
响应式图片也是个好东西。 srcset 属性可以让不同屏幕拿不同尺寸的图。比如：
small.jpg
但我踩过坑——如果你同时用了CDN，记得CDN要支持变体参数，否则srcset里各种尺寸的图都不存在，全都404。呵呵，那天日志里全是404。
CDN与缓存，让图片离用户更近
https://obgeo.oss-cn-beijing.aliyuncs.com/pvc-articles/ac96c648-ae5c-4f19-b22e-1ebd72f7bab0.jpg
CDN与缓存，让图片离用户更近
图片优化做到最后，瓶颈往往在距离。你的服务器在上海，美国用户拉一张图，光网络延迟就够喝一壶。CDN，内容分发网络，把图片缓存到全球节点，用户就近访问。我用Cloudflare，免费版也够用。但CDN不是加了就行，缓存策略至关重要。
我在图片URL后面加了个hash，比如 logo-abc123.webp。这样文件更新了，hash变，自动触发CDN回源。然后设置 Cache-Control: public, max-age=31536000, immutable —— 缓存一整年！因为带hash，更新了就是新文件，不怕旧缓存。另外，图片最好用独立域名，不带Cookie。主站带Cookie的请求头大概1KB，一张图才几十KB，光请求头就占了多大比例？用个无Cookie域名，能省不少。
不过也别忘了SEO方面的图片优化。alt属性写清楚，别堆关键词，要自然描述图片内容。比如不是“杭州SEO服务图片”，而是“杭州西湖边傍晚留影的游客”。图片文件名也改掉“IMG_20241015.jpg”，用描述性的，连字符分隔。结构化数据里加个ImageObject，虽然不知道有没有用，但做总比不做强。图片站点地图也得提交给搜索引擎，不然蜘蛛可能漏掉。
还有一些小零碎：WebP转换时注意色彩配置，sRGB最稳；别用CSS的background-image放主内容图，蜘蛛抓不到；还有，经常检查图片是否被黑，有人图片被替换成菠菜广告都不知道。
好了，就这些。这些招够你用了，赶紧去优化吧。你的网站用户等不起。 看了这么多帖子，还是觉得你这篇最实在，条理清晰又容易理解。 这样的优质帖子越多越好，希望论坛能多一些这样真诚的交流。 说得很客观中立，没有偏激言论，理性讨论就该是这个样子。 说得很有道理，很多观点都说到点子上了，希望以后能多看到这类帖子。 内容全面又细致，几乎把相关问题都覆盖到了，非常用心。 非常有建设性的意见，对解决实际问题有很大的参考意义。
观点很成熟，分析也很理性，值得大家静下心来认真看一看。 很多点我之前都没想到，楼主一提醒才恍然大悟，收获很大。 感谢楼主带来这么好的内容，在论坛里能学到东西真的很开心。 讨论氛围很好，大家都在理性交流，这样的论坛环境太舒服了。
页:
[1]