图片压缩别瞎压！8年SEO踩坑换来的实战指南
别再瞎压图了。去年我给一个美妆内容站做优化，把首页banner从2.1M压到180K，结果跳出率直接掉了42%，连带着核心关键词从第12爬到第3。
你是不是也觉得图片压缩就是把图拖进工具，拉到最小就行？
你以为的压图，90%的人都在做无用功
先给你说个我踩过的**的坑。
3年前我刚接一个日活百万的资讯站，当时技术说要把所有图压到100K以下，我脑子一热就同意了。
结果呢？
用户留言骂“你们的图都是马赛克吗？”，跳出率直接涨了27%，CTR掉了15%。
说白了，盲目追求最小体积，是新手压图的第一死罪。
你以为用户会等你那半秒的加载时间？
不。
他们只会直接关掉页面，去看别家清晰的图。
还有个事，90%的人压图都搞反了优先级。
谷歌和百度的核心网页指标里，LCP（**内容绘制）是直接影响PM的——也就是你首屏**的那张图的加载时间，占了整个页面性能得分的60%以上。
我测过，LCP超过2.5秒的页面，PM比同内容LCP2秒以内的页面平均低12位。
结果呢？
很多人把文章末尾的二维码压到了20K，首屏的banner还留着2M的原图。
这不纯纯瞎忙活吗？
压图的第一优先级，永远是先搞LCP元素的图。
你怎么找自己站的LCP元素？
【操作路径：谷歌搜索控制台 -> 体验 -> 核心网页指标 -> 打开对应URL的报告 -> 查看LCP元素定位】
https://obgeo.oss-cn-beijing.aliyuncs.com/pvc-articles/47b44e3d-ef49-40ee-a577-637a9fdeb280.jpg
谷歌搜索控制台核心网页指标LCP元素定位截图
哦对，还有个平台不会告诉你的秘密：压完图不设缓存，等于白压。
你费半天劲把图从2M压到200K，结果用户下次打开还要重新加载一遍？
你说冤不冤？
这是我见过的最多的新手操作——压完图就完事，连个缓存头都不设。
别再用那些偷你图的在线压图工具了
你是不是搜“图片压缩”，出来的第一个网站就直接用？
我之前踩过这个坑。
用了某知名在线压图工具的免费版，压完的图看着没问题，结果过了半个月，我发现客户的产品图被传到了一个盗版素材站，连水印都给P了。
后来才知道，很多免费在线压图工具，会把你上传的原图存在他们的服务器里，甚至拿来卖。
你敢信？
还有的工具，压完的图会偷偷加隐形EXIF水印，你根本看不出来，但是平台会识别到你是用了第三方工具，甚至会判定你的图有版权问题。
我现在根本不用在线工具。
要么用本地的Squoosh（谷歌出的，完全免费，不用上传图），要么用Photoshop导出，安全，还可控。
对了，格式的事，很多人还在全用JPG。
同质量下，WebP比JPG小40%左右，AVIF能小60%。
我测过，一张1920px宽的产品图，JPG质量75是320K，WebP同质量是180K，AVIF是120K。
你说用哪个？
百度现在已经完全支持WebP了，谷歌更是优先收录WebP格式的图。
别抱着JPG不放了。
【操作路径：Chrome浏览器 -> 开发者工具（F12） -> 网络面板 -> 筛选“Img” -> 刷新页面查看每张图的格式和加载时间】
https://obgeo.oss-cn-beijing.aliyuncs.com/pvc-articles/ead51620-ebb4-4e8d-95f4-c134847ffae5.jpg
Nginx配置文件图片缓存设置代码截图
哦对，缓存怎么设？
要是你用的是Nginx，直接改配置文件就行，把图片的缓存时间设成一年，用户下次打开直接从本地缓存读，根本不用加载。
压图不设缓存，等于你给手机换了大容量电池，结果每天出门还不充满电。
我用了3年的压图流程，美工都挑不出毛病
https://obgeo.oss-cn-beijing.aliyuncs.com/pvc-articles/39bc5248-5b4f-4792-90ce-7230ca3469e2.png
我用了3年的压图流程，美工都挑不出毛病
有没有既能把图压到最小，又完全看不出差别，还不用花钱的流程？
有。
我现在所有客户的图，都是按这个流程走的，从来没出过质量问题。
上来先裁尺寸。
别拿4000px的原图直接压，首屏banner最多1920px宽，内容图最多800px宽，裁完尺寸直接减60%的体积。
说白了，你给手机看的图，用4K原图纯纯有病。
导出来就选WebP格式，质量卡75。
这个数值是我测了上百张图得出来的，75的质量，放大到100%都看不出和原图的差别，再低就会出现色带，尤其是渐变背景的图。
之前有个美妆客户非要把质量设为50，结果他们的腮红渐变直接变成色块，产品点击率掉了22%，改回75才涨回来。
改完格式一定要查三个地方。
放大到100%看边缘有没有糊，看渐变区域有没有色带，看logo有没有发虚。
对了，别忘了设缓存。
就刚才说的，改服务器配置，把图片的缓存头设成max-age=31536000。
哦对，还有个小技巧：要是你站的图特别多，直接用谷歌的PageSpeed Insights跑一遍，它会给你列出所有需要压的图，甚至直接给你压好的版本，直接下载用就行。
我真的见过太多站长，花几万块做内容，买外链，结果因为一张2M的banner，把所有流量都浪费了。
你说冤不冤？
别信那些说“压到100K以下才是好”的屁话。
适合的，能让用户清晰看到，还能快速加载的，就是**的。
哦对，每个月用搜索控制台看一次核心网页指标，要是图换了，记得重新压，重新设缓存。
行了，就这些。 内容写得很详细，逻辑也很清晰，对新手来说非常友好，支持一下楼主。 感谢楼主带来这么好的内容，在论坛里能学到东西真的很开心。 虽然篇幅不长，但句句都是重点，简洁又有深度，非常不错。
页:
[1]