如何减小图片体积，而不损失肉眼可见的画质

图片往往是网页中最重的部分，一张未经优化的照片，体积就可能超过整个页面的 HTML、CSS 和 JavaScript 之和。好消息是，这些体积大多是看不见的：没人看得到的像素，以及肉眼分辨不出的细节。把它们去掉，页面会更快，在手机和移动网络上尤其明显，而观感丝毫不会变差。

减小图片体积归结起来就是四件事：合适的尺寸、合适的格式、合理的压缩，以及恰当的加载方式。

先找出最重的图片

打开浏览器的开发者工具，进入 Network 面板，按“Img”筛选，刷新页面并按大小排序。最大的那几个文件，就是能省下最多体积的地方。Rudra 的网站速度检查工具会对页面运行 Lighthouse，并列出未通过的审计项，其中在适用时会包含图片相关的审计（比如图片尺寸过大或压缩不足）。在全站抓取中，Rudra 还会标出没有 width 和 height 属性的图片，以及加载了十张以上图片却没有使用懒加载的页面。

一步步减小图片体积

1. 把图片缩到实际显示的尺寸

这通常是收效最大的一步。一张宽 4000 像素的照片放在 800 像素宽的栏位里显示，像素数量大约是实际所需的 25 倍。先弄清图片实际显示的最大尺寸（在开发者工具里检查一下），再按这个宽度导出；如果想在高密度屏幕上保持清晰，最多导出两倍宽度。用 CSS 把图片缩小并不会减少下载量，发送的仍然是完整的文件。

2. 选对格式

• JPEG：照片和复杂图像，适合需要最大兼容性的场合。
• PNG：需要无损画质，或需要带锐利边缘的透明效果的图片，比如界面截图或颜色不多的示意图。照片不适合用 PNG。
• WebP：当前所有主流浏览器都支持，在视觉质量相近的情况下，体积通常比 JPEG 或 PNG 小。它同样支持透明和动画。
• AVIF：在相同视觉质量下往往比 WebP 还要小，当前所有主流浏览器也都支持，只是编码速度较慢。
• SVG：徽标、图标和简单插图。它是矢量格式，任何尺寸下都清晰，而且体积往往极小。
• 用视频代替 GIF：同一段内容，GIF 动图通常比 MP4 或 WebM 视频大好多倍。请使用 <video autoplay muted loop playsinline>。

3. 压缩，并用眼睛检查

有损格式（JPEG、WebP、AVIF）让你可以在文件大小和画质之间做取舍。对照片来说，70–85 之间的质量设置是常见的起点，看起来往往与原图无异；但合适的数值因图而异，所以要在实际尺寸下对比效果。另外还要去掉相机信息、GPS 位置之类的元数据，它们既增加体积，又可能泄露你并不想公开的信息。几款好用的工具：

• Squoosh（在浏览器中使用）：并排比较不同格式和质量档位，一次处理一张图片。
• ImageOptim（macOS）或类似的桌面工具：拖入一个文件夹，即可进行无损和有损优化。
• 命令行：cwebp -q 80 photo.jpg -o photo.webp 可转换为 WebP；magick photo.jpg -resize 1600x -quality 80 photo-1600.jpg 则用 ImageMagick 调整尺寸并重新压缩。
• 在构建流程中：sharp（Node.js）这类库可以在构建或上传时自动为每张图片调整尺寸并转换格式。

4. 为不同屏幕提供不同尺寸

手机不该去下载为大尺寸桌面显示器准备的图片。有了 srcset 和 sizes，浏览器会挑选看起来足够清晰的最小文件：

<img src="hero-800.jpg" srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1600.jpg 1600w" sizes="(min-width: 1024px) 800px, 100vw" width="1600" height="900" alt="Hikers crossing a ridge at sunrise">

srcset 列出各个文件及其宽度；sizes 告诉浏览器图片将以多宽显示（大屏幕上为 800 像素，其余情况为视口全宽）。要提供现代格式并保留后备方案，可以把图片包在 <picture> 里，在 <img> 之前放一个 <source type="image/avif" srcset="..."> 和一个 <source type="image/webp" srcset="...">；浏览器会使用它支持的第一种格式。

5. 首屏以下的图片懒加载，但首屏大图不要

给页面靠下位置的图片加上 loading="lazy"，浏览器就只会在访客滚动到附近时才去请求它们。不要对页面顶部的主图使用懒加载：它往往就是 Largest Contentful Paint 元素，延迟加载会让页面感觉更慢。对于这张图，可以考虑加上 fetchpriority="high"，让浏览器尽早请求。

6. 始终设置宽度和高度

有了宽度和高度属性，浏览器可以在图片到达之前预留出合适的空间，图片加载时文字就不会跳动，而这种跳动正是布局偏移（CLS）的常见原因。把这两个属性设为图片的固有尺寸，并在 CSS 中用 img { max-width: 100%; height: auto; } 让图片保持自适应。

7. 把这件事自动化

手动优化撑不过下一次上传，还是交给平台来做：WordPress 会为每张上传的图片生成多种尺寸并自动添加 srcset，优化插件还能加上压缩以及 WebP 或 AVIF 转换；Next.js 的 <Image> 组件默认就会调整尺寸、转换格式并懒加载；图片 CDN 则根据 URL 参数实时转换图片。再给图片文件配上较长的缓存有效期，回访的用户就不必重新下载了。

常见错误

• 对首屏大图使用懒加载，拖慢了最重要的内容。
• 直接上传相机或手机拍出的全分辨率照片，再靠 CSS 把它们缩小。
• 把照片存成 PNG。
• 把重要图片放进 CSS 背景里，这样浏览器发现得晚，图片也没法配 alt 文本。
• 对已经压缩过的 JPEG 一遍遍重新压缩，每压一次都会多出肉眼可见的瑕疵。
• 忘了设置宽度和高度，造成布局偏移。
• 把商品图压缩过头，连顾客想看的细节都压没了。

工具能判断什么，不能判断什么

自动化审计很擅长找出大于显示尺寸、没有采用现代格式或缺少尺寸属性的图片，还会估算出你能省下多少体积。但它无法告诉你，压缩后的图片对其用途而言是否仍然够好。博客配图经得起重度压缩，商品图或作品集里的作品就未必了。最后还得靠眼睛来把关。