为什么图像优化很重要
如果您的网站感觉很慢，图像可能是罪魁祸首。研究一致表明，在大多数网站上，图像占总页面重量的 50% 或更多。优化图像通常是您可以做出的最有影响力的单一更改，以提高网站性能。
更快的网站意味着：
- 更好的用户体验
- 更高的搜索引擎排名
- 更多的转化和销售
- 更低的带宽成本
核心概念
三个因素决定图像性能：
文件大小
较小的文件下载速度更快。目标是在保持可接受质量的同时使图像尽可能小。
分辨率
更高的分辨率意味着更多的像素要显示，但也意味着更大的文件。您需要足够的分辨率以适应显示尺寸，但不需要更多。
格式选择
不同的格式具有不同的特性。选择正确的格式可以显著减小文件大小。
逐步优化
步骤 1：选择正确的分辨率
将分辨率与显示尺寸匹配：
| 显示上下文 | 推荐宽度 |
|---|---|
| ---------------- | ------------------- |
| 移动缩略图 | 400-600px |
| 桌面缩略图 | 600-800px |
| 移动主图 | 800-1200px |
| 桌面主图 | 1920-2560px |
| 全屏背景 | 2560-3840px |
对于高 DPI 显示器（Retina），乘以 2 以获得清晰显示。
步骤 2：选择正确的格式
- JPG：具有许多颜色的照片和复杂图像
- PNG：具有透明度、清晰边缘或文本的图像
- WebP：大多数图像的大小和质量的最佳平衡
- AVIF：最佳压缩，但兼容性低于 WebP
步骤 3：适当压缩
- JPG 质量：75-85% 通常是最佳的
- WebP 质量：75-85% 等效
- AVIF 质量：60-75% 等效（更高效）
步骤 4：使用响应式图像
使用 srcset 属性为不同屏幕提供不同尺寸：
<img
src="image-800w.jpg"
srcset="image-400w.jpg 400w,
image-800w.jpg 800w,
image-1200w.jpg 1200w,
image-1920w.jpg 1920w"
sizes="(max-width: 600px) 400w,
(max-width: 1200px) 800w,
1200w"
alt="Description"
/>步骤 5：启用延迟加载
对于首屏下方的图像，使用延迟加载：
<img src="image.jpg" loading="lazy" alt="Description" />这会将加载推迟到图像即将进入视口时。
高级技术
现代格式与后备
使用 picture 元素来提供现代格式并具有后备：
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Description">
</picture>CDN 交付
使用内容分发网络（CDN）从靠近用户的服务器提供图像。这减少了延迟并改善了加载时间。
图像精灵
对于小图标和 UI 元素，将多个图像合并到单个精灵表中。这减少了 HTTP 请求。
SVG 用于图标
对于图标和简单图形，使用 SVG。SVG 是基于矢量的，可以缩放到任何大小，并且通常具有非常小的文件大小。
需要避免的常见错误
错误 1：对缩略图使用高分辨率图像
不要将 4K 图像用于 400px 缩略图。调整为实际显示尺寸。
错误 2：忘记压缩
始终通过压缩工具运行图像。原始图像通常比所需的大 3-5 倍。
错误 3：使用错误的格式
对照片使用 PNG 产生的文件比所需的大 5-10 倍。请改用 JPG 或 WebP。
错误 4：不使用延迟加载
没有延迟加载，所有图像都会立即加载，即使是用户从未看到的图像。
错误 5：忽略移动设备
移动用户通常有较慢的连接。专门针对移动环境进行优化。
衡量结果
使用这些工具来衡量图像性能：
- Google PageSpeed Insights：全面的性能分析
- GTmetrix：详细的水量图
- WebPageTest：多位置测试
- Chrome DevTools：本地性能分析
优化后，您应该会看到：
- 更小的总页面大小
- 更快的图像加载时间
- 更好的最大内容绘制（LCP）分数
- 改进的整体页面速度分数
自动化
对于持续优化，请考虑：
- 在您的 CI/CD 管道中进行构建时优化
- 使用 ImageMagick 等工具进行服务器端优化
- 使用 Cloudflare Images 等服务进行实时优化
- 自动响应式图像生成
结论
图像优化是您可以做出的最高影响、最低努力的改进之一。通过遵循本指南中的实践，您通常可以在保持出色视觉质量的同时将图像权重减少 50-80%。
从您访问量最大的页面和最大的图像开始。衡量影响。然后扩展到您网站的其余部分。对用户体验和搜索排名的累积效应可能是巨大的。
请记住：快速网站就是成功的网站。用户希望页面在 3 秒内加载，而图像优化通常是满足该期望的最简单方法。