网站图片优化：WebP 一把梭，加载快一半

我是小够，只推够用的 VPS。

网站打开慢，先别急着升级 VPS 配置——一半的慢，是图片的锅。一张手机直出的 JPG 动不动 3-5MB，首页放几张，加载能快才怪。今天讲图片优化三板斧，不花一分钱，手机打开快一倍。

第一板斧：转 WebP

WebP 是 Google 推的图片格式，同等画质下体积比 JPG 小 30-50%、比 PNG 小更多。截至撰写时，主流浏览器（Chrome、Safari、Edge、Firefox）都已支持 WebP，放心用，老浏览器也有回退方案。

转换方法：

• WordPress：装 WebP 转换插件（如 WebP Express），上传图片自动转 WebP，前台自动 serving，不支持的浏览器自动回退原格式——访客无感知。
• 手动批量转：用 cwebp 命令行，一条命令转整个目录：

cwebp -q 80 input.jpg -o output.webp

-q 80 是质量参数，80 是画质和体积的甜点值：再高质量提升不大，体积涨得快；再低肉眼可见糊。

小够提醒：别只转不删源文件——源文件留着当底片，万一以后要换格式还有退路。但别让源文件进网站目录吃流量，归档到别处。

第二板斧：懒加载

首屏之外的图片，别一上来就全加载。懒加载（lazy loading）让图片滚动到可视区域时才加载，首屏速度直接起飞——访客第一眼看到的快，体感就快。

HTML 原生就支持，一行属性：

<img src="a.webp" loading="lazy" alt="描述">

WordPress 5.5+ 默认就给图片加了懒加载，用的就是这个属性，检查一下别被主题关掉了就行。注意：首屏大图（比如 Banner）别加懒加载——首屏图本来就要立刻显示，加了反而多一次判断，得不偿失。

第三板斧：尺寸别超标

内容区宽度 800px，传一张 4000px 的原图纯属浪费：浏览器还要花时间把它缩放到 800 显示，又慢又耗流量。上传前先缩到实际显示尺寸的 1.5-2 倍（留视网膜屏余量），再转 WebP。

手机截图、Banner 图尤其要注意——它们是体积大户。一张 4MB 的截图，缩到合适尺寸+转 WebP，能压到 200KB 以内，20 倍差距，就这一个习惯。

进阶：响应式图片

一张图在不同设备上显示尺寸不一样：手机 400px 宽，桌面 1200px 宽。用 srcset 让浏览器自己选合适的尺寸：

<img src="a-800.webp"
     srcset="a-400.webp 400w, a-800.webp 800w, a-1200.webp 1200w"
     sizes="(max-width: 600px) 400px, 800px"
     alt="描述">

手机用户只下载 400px 的版本，流量省一半。WordPress 的媒体库自带多尺寸生成，配合得好基本不用手写。

关于 AVIF：要不要追新

WebP 之外还有个 AVIF，压缩率比 WebP 还高 20-30%。但截至撰写时，AVIF 的编码速度慢、WordPress 生态支持还不完善，Safari 的支持也是近年才跟上。小够的建议：2025 年先用 WebP，别追 AVIF——等生态成熟了再换，图片格式这东西，稳定压倒一切。

小够总结

图片优化就四句：转 WebP、开懒加载、尺寸别超标、响应式加分。做完这几步，网站加载时间砍半是常态。记住优化的顺序：先压图片，再考虑 CDN，最后才升级服务器配置——从便宜的开始，够用就不花冤枉钱。图片是网站的"体重"，减肥永远比换更大的衣服划算。