如何优化网页图片：加速你的网站

为什么图片优化如此重要

图片平均占网页总大小的 50-65%，是影响页面加载速度的最大因素。研究显示，页面加载时间每增加 1 秒，转化率下降 7%。对于电商网站，这意味着数百万的收入损失。

图片优化是投入产出比最高的网站性能优化手段。不需要改代码架构，不需要升级服务器，只需正确处理图片就能获得显著的性能提升。

第一步：选择正确的格式

格式选择是图片优化的基础，直接决定了文件大小的上限。

照片类图片

首选 WebP 有损：同等质量下比 JPEG 小 25-35%
次选 JPEG：需要最大兼容性时使用
避免 PNG：PNG 编码照片文件大小是 JPEG 的 3-5 倍

图形和图标

简单图标：使用 SVG 矢量格式，任意缩放不失真，文件极小
带透明度的图形：使用 WebP 无损或 PNG
复杂图形：WebP 有损 + 透明度是最佳选择

使用格式转换工具将现有图片转换为最优格式。对于大量图片，批量处理工具可以一次性完成转换。

第二步：调整到合适的尺寸

很多网站直接上传原始图片，让浏览器缩放显示。一张 4000 × 3000 的照片只显示为 800 × 600，但浏览器仍然需要下载完整的大图。

确定显示尺寸

检查图片在网页上的实际显示尺寸，然后将图片调整到略大于显示尺寸（考虑高 DPI 屏幕）：

普通屏幕（1x）：按显示尺寸调整
高 DPI 屏幕（2x）：调整到显示尺寸的 2 倍
折中方案：调整到显示尺寸的 1.5 倍，兼顾质量和文件大小

使用调整尺寸工具将图片缩小到合适的像素尺寸，这是减少文件大小最有效的方法之一。

第三步：压缩图片

调整尺寸后，进一步压缩可以再减少 40-70% 的文件大小。

有损压缩设置

JPEG/WebP 质量 80-85%：最佳质量与大小平衡点
质量 75-79%：适合缩略图和非关键图片
质量低于 70%：通常不推荐，可见质量损失明显

无损压缩

对于 PNG 和无损 WebP，使用优化工具移除不必要的元数据和颜色信息，通常可以减少 10-30% 的文件大小。

使用PicKit 压缩工具进行精确的压缩控制：

上传图片
选择基于质量的压缩模式
设置质量为 80-85%
预览效果并下载

第四步：实现响应式图片

不同设备需要不同尺寸的图片。手机不需要下载桌面端的大图，桌面端也不应该显示手机端的小图。

使用 srcset 属性

<img srcset="small.webp 480w, medium.webp 800w, large.webp 1200w"
     sizes="(max-width: 600px) 480px, 800px"
     src="medium.webp"
     alt="描述文字">

浏览器会根据设备宽度和屏幕密度自动选择最合适的图片。

准备多个尺寸

为每张图片准备 2-3 个尺寸版本：

小图：480px 宽，适合手机
中图：800px 宽，适合平板
大图：1200px 宽，适合桌面

使用调整尺寸工具快速生成不同尺寸的版本。

第五步：使用懒加载

懒加载（Lazy Loading）让图片只在即将进入视口时才加载，避免一次性加载所有图片。

原生懒加载

最简单的实现方式，只需添加一个属性：

<img src="image.webp" loading="lazy" alt="描述文字">

懒加载的适用场景

首屏以下的图片
长列表中的图片
折叠内容中的图片

首屏关键图片不应使用懒加载，否则会延迟 LCP 指标。

第六步：其他优化技巧

移除元数据

照片通常包含 EXIF 数据（相机型号、拍摄参数、GPS 位置等），这些信息对网页显示毫无用处，却增加了文件大小。使用压缩工具时可以选择移除元数据，通常可以减少 5-15KB。

使用 CSS 效果替代图片

简单的渐变、阴影和图案可以用 CSS 实现，不需要图片。CSS 效果加载更快、缩放无损、修改方便。

预加载关键图片

首屏最重要的图片使用 <link rel="preload"> 提前加载：

<link rel="preload" as="image" href="hero.webp" type="image/webp">

使用 CDN

内容分发网络（CDN）将图片缓存到全球各地的服务器，用户从最近的节点获取图片，减少延迟。

优化效果评估

完成图片优化后，使用以下工具评估效果：

Google PageSpeed Insights：检查 Core Web Vitals 和优化建议
Lighthouse：详细的性能审计报告
WebPageTest：不同地点和设备的加载测试

重点关注 LCP（Largest Contentful Paint）指标，它直接反映主要内容的加载速度。

常见问题

图片优化后质量明显下降怎么办？ 如果压缩后质量不满意，提高质量设置（从 80% 提高到 85% 或 90%）。也可以尝试使用压缩工具的基于大小模式，设定目标文件大小让工具自动找到最佳质量。记住，先调整尺寸再压缩，效果比单纯提高压缩率更好。

已经用了 JPEG 还需要转 WebP 吗？ 值得。将 JPEG 转换为 WebP 通常可以再减少 25-35% 的文件大小，视觉质量几乎相同。使用格式转换工具可以快速完成转换，配合 <picture> 标签提供 JPEG 回退确保兼容性。

响应式图片需要为每张图准备多少个版本？ 通常 2-3 个版本足够：一个移动端版本（480-640px）、一个桌面端版本（1200-1600px），可选一个中间版本（800-1024px）。使用批量处理工具可以一次性生成所有尺寸版本。