我有个站，曾经装过三千多张图片。
不是故意的，是写文章的时候顺手就传了——截图、配图、封面图，每篇文章三五张，攒了两年就三千多张了。那时候我不懂什么叫图片压缩，也不懂什么叫WebP，更不懂什么叫懒加载。传上去就完事了。
结果就是：首页加载要8秒，手机端打开要十几秒。这跟网站速度优化里提到的各种问题叠加在一起，简直是灾难。PageSpeed Insights跑分，移动端只有23分。服务器带宽每个月都跑满，流量费比服务器本身还贵。
后来我花了两个周末，把整个站的图片从头到尾优化了一遍，加载速度从8秒降到了2秒出头。这篇文章就是那次优化的完整记录。
第一步：先搞清楚你的图片问题到底有多大
在优化之前，先看看你的图片到底拖了多大的后腿。打开Chrome浏览器，按F12 → 选择”Network”标签 → 刷新页面 → 看页面总大小和加载时间。
如果页面总大小超过3MB，而且图片资源占了70%以上，那你的图片问题就很严重了。
我当时的页面总大小是4.7MB，其中图片占了4.1MB——87%都是图片。首页一张banner图，原图1920×1200，大小2.3MB。这张图就够拖垮整个首页了。
用Google PageSpeed Insights跑一下， 它会明确告诉你哪些图片需要优化、预估能节省多少流量。我当时的建议是”优化图片可节省约3.2MB”，基本等于砍掉三分之二的页面大小。
第二步：压缩图片，不损失画质但体积能减一半
图片压缩是最容易做、效果最明显的一步。我用的工具是TinyPNG的在线版（tinypng.com），把首页那张2.3MB的banner图拖进去，压缩完只有380KB，画质肉眼看起来完全没区别。
但三千多张图片，一张张拖进去压缩不现实。所以我装了个插件。
推荐插件：ShortPixel Image Optimizer。 装好之后，它会自动扫描你网站上所有已有的图片，批量压缩。这个插件属于我装过50个插件后留下的必备清单里的一员。新上传的图片也会自动压缩。我三千多张图，用它的”批量优化”功能跑了大概二十分钟，整体压缩了55%——数据库里存的图片从总共1.8GB变成了820MB。
其他可选插件： Smush（免费版有限制但够用）、Imagify（WP Rocket同团队出品，和WP Rocket配合最好）。
一个容易忽略的细节： 压缩插件只压缩你上传的图片，不会压缩主题自带的图片。如果你的主题自带了一些大图，需要手动找到它们，自己压缩后替换。
第三步：把图片转成WebP格式
JPG和PNG是几十年前的格式了。WebP是Google在2010年推出的，一张相同画质的图，WebP比JPG小25%-35%，比PNG小更多。
我的首页banner图，原图2.3MB → 压缩成JPG后380KB → 转成WebP后只有215KB。从2.3MB到215KB，体积少了90%，画质完全没区别。
怎么转： 推荐用插件”WebP Express”。装好之后，在设置里选择”Convert to WebP on upload”，以后每次上传图片，插件会自动生成一个WebP版本。对于已有的旧图片，它也能批量转换。
注意兼容性： 不是所有浏览器都支持WebP。不过2025年了，主流浏览器基本都支持了。WebP Express会自动处理兼容问题——遇到不支持WebP的浏览器，它会自动返回原图。
另一个选择： 如果你用的是Cloudflare，可以在Cloudflare后台开启”Polish”功能，它会自动把图片转成WebP并通过CDN分发。这个方案不需要在WordPress里装插件，不占服务器资源，是最高效的方案。
第四步：开启懒加载，不让用户一次加载所有图片
懒加载的意思是：图片只有在用户滚动到它附近时才加载。如果用户只看了一半页面就关了，那一半图片根本没加载，省了流量和时间。
WordPress从5.5版本开始原生支持懒加载。 如果你用的是比较新的WordPress版本，图片会自动加上loading="lazy"属性，不需要额外操作。
但WordPress原生的懒加载有个问题——它只对文章内容里的图片生效，对首页列表的缩略图、侧边栏的图片不一定生效。如果你发现首页加载还是很慢，装个懒加载插件更保险。
推荐：Lazy Load by WP Rocket。 这个插件免费，装好即用，不需要配置。它会自动把所有图片（包括缩略图、头像、iframe里的图片）都加上懒加载。
验证懒加载是否生效： 打开Chrome的F12 → Network → 刷新页面 → 滚动页面，看图片是不是在你滚动到它的时候才被加载。如果所有图片都在页面一打开时就加载了，说明懒加载没生效。
第五步：控制图片尺寸，别传一张4000像素的图当缩略图用
这个坑我踩了很久。我从手机或截屏工具导出的图片，经常是1920×1440甚至更大的分辨率。然后WordPress会生成多个尺寸的缩略图（缩略图、中等、大图、全尺寸），但原图还留在服务器上。
一张4000×3000的截图，原图可能有5MB。就算你压缩了、转了WebP，体积还是大。而且你的文章内容区宽度可能只有800px，根本不需要4000px的图。
解决办法：
- 上传前先手动调整尺寸。 如果图片宽度超过1920px，用电脑自带的图片工具或在线工具把宽度缩到1920以内。对于文章内插图，宽度1200px就够了。
- 在WordPress里限制大图尺寸。 装个插件”Imsanity”，设置一个最大宽度（比如1920px），任何超过这个宽度的图片上传时会被自动缩小。
- 用CDN的图片处理功能。 Cloudflare和七牛云都支持在URL后面加参数来动态调整图片尺寸，比如
?imageView2/2/w/800。这个方案最灵活，但需要一点技术配置。
优化效果对比
| 指标 | 优化前 | 优化后 |
|---|---|---|
| 首页加载时间 | 8.2秒 | 2.1秒 |
| 页面总大小 | 4.7MB | 1.2MB |
| 图片总大小 | 4.1MB | 680KB |
| PageSpeed移动端 | 23分 | 78分 |
| 每月带宽消耗 | 约120GB | 约35GB |
这里面最让我意外的是带宽的节省。之前每个月120GB的带宽，优化后降到35GB，服务器的流量费直接从”肉疼”变成了”无感”。
如果你只能做一件事，选哪个？
如果时间有限，只能做一件事，选压缩图片。装个ShortPixel或Smush，跑一遍批量压缩，效果立竿见影。不用配CDN、不用改代码、不用学新格式，装好插件点一下，十分钟搞定。
如果还有余力，第二步做WebP转换，第三步做懒加载。这三步做完，大部分WordPress网站的图片问题就解决了。
优化图片这件事，属于那种”不做不知道，做了吓一跳”的类型。你平时感觉不到图片在拖后腿，因为它是慢慢累积的——今天传一张3MB的图，明天传一张5MB的图，一年下来服务器上趴着几千张没优化过的图片。但一旦你花时间处理一遍，效果足以让你后悔没早点做。
如果你还没看过自己网站的PageSpeed分数，现在去跑一下。如果分数低于50，十有八九是图片的锅。
原创文章，首发于 wujianzhan.com。