🗜️
← 返回教程列表

网页图片压缩最佳实践

· 标签: image-compression, best-practices, web-performance, quality-vs-size, seo

网页图片压缩最佳实践

图片占典型网页数据的一半以上。每一千字节未经优化的数据都会让你付出更慢的加载时间、更高的跳出率和更低的搜索排名的代价。本指南涵盖专业 Web 开发人员用来在每种屏幕尺寸下提供清晰、快速加载图片的最佳实践。

1. 始终保留母版副本

在应用任何压缩之前，先保存原始图片的未压缩母版。母版副本让你可以自由尝试不同的质量级别，并在以后重新压缩，而不必从头开始。将母版存储在 PNG 或 TIFF 等无损格式中，然后压缩副本用于生产。

2. 理解质量设置

压缩质量通常以 0（最差）到 100（最佳）的刻度来衡量。最佳设置取决于你的图片内容和性能目标。

JPEG 质量指南：

  • 80 到 85：对大多数网页照片都很出色。伪影几乎不可察觉。
  • 60 到 75：适合缩略图和背景图片。会出现一些压缩伪影。
  • 低于 60：出现明显的块状效应和条带。仅在文件大小是绝对优先事项时使用。

WebP 质量指南：

  • 75 到 85：匹配 JPEG 的画质，同时文件大小大约小 25% 到 35%。
  • 无损 WebP：非常适合要求逐像素精确输出的图形和截图。

PNG 压缩：

  • PNG 完全使用无损压缩。降低位深（将 32 位转换为 8 位色彩）是在不产生可见画质损失的情况下缩小扁平图形 PNG 的最有效方法。

AVIF 质量指南：

  • 50 到 70：在可比的视觉质量下产生的文件比 JPEG 小最多 50%。
  • 更高的编码复杂度意味着压缩更慢，但文件大小方面的回报是巨大的。

3. 让压缩匹配图片内容

并非每张图片对压缩的反应都一样。按内容类型调整你的方法：

  • 照片： 有损压缩（JPEG、WebP、AVIF）效果最佳。从质量 80 开始，向下调整，直到找到可接受的阈值。
  • 截图和 UI 设计稿： 无损压缩（PNG、无损 WebP）可保留清晰的文字和锐利的边缘。这些图片包含大面积均匀区域，压缩效率非常高。
  • 徽标和图标： 无损格式可保持类矢量（vector-like）的锐利度。如果原始图片颜色较少，采用降低色深的 PNG 可以做到极小。
  • 产品照片： 质量 75 到 85 是最佳区间。与原图的视觉差异几乎不可见，但文件大小的节省是巨大的。

4. 移除隐藏的元数据

数码相机和设计软件会将名为 EXIF 数据的元数据嵌入图片文件。其中可能包括相机型号、GPS 坐标、时间戳和色彩配置信息。剥离元数据可减少 5% 到 15% 的文件大小，且视觉上零影响。

大多数压缩工具提供自动移除元数据的选项。除非你有保留版权或色彩配置信息的特定原因，否则请启用它。

5. 以原始格式压缩

现代图片压缩器允许你在保持原始格式的同时优化图片。这是一个重要的能力，因为格式转换往往不必要，有时甚至不可取：

  • PNG 保持 PNG： 无损压缩保留透明度和锐利边缘。
  • JPEG 保持 JPEG： 优化的霍夫曼表和量化可在不产生重新编码损失的情况下提供更小的文件。
  • WebP 保持 WebP： 有损和无损 WebP 都能从元数据剥离和优化编码参数中受益。
  • AVIF 保持 AVIF： 高级压缩调优可以进一步缩减本就高效的 AVIF 文件。

就地压缩意味着你永远不会因格式转换链而降低画质，而且你的工作流程保持简单。

6. 自动化你的压缩工作流程

手动压缩无法扩展到少量图片之外。对于生产网站，将压缩集成到你的构建流水线中：

  • 构建时插件： sharp、Squoosh CLI 和 imagemin 等工具可以在你的构建步骤中运行。
  • CMS 自动化： 许多内容管理系统提供在上传时压缩图片的插件。
  • CI/CD 集成： 在部署流水线中添加压缩步骤，确保每一张图片在上线前都自动优化。

7. 更激进地压缩缩略图

缩略图和预览图片以较小的尺寸查看，因此压缩伪影远不那么明显。应用更低的质量设置：

  • JPEG 缩略图：质量 50 到 60
  • WebP 缩略图：质量 50 到 70
  • PNG 缩略图：如果图片允许，降至 8 位色彩

8. 将压缩与懒加载结合

压缩减少了每张图片的大小，而懒加载确保图片仅在进入视口时才下载。两者结合是可用的影响力最高的性能优化之一。在你的 img 标签上添加 loading="lazy"，让浏览器处理其余部分。

9. 用真实世界的指标进行测试

凭视觉猜测并不可靠。使用客观工具来衡量压缩选择的影响：

  • Lighthouse 会报告图片优化的机会并估算潜在的节省。
  • PageSpeed Insights 会显示图片重量如何影响你的 Core Web Vitals 分数。
  • WebPageTest 提供每张图片请求的瀑布图，包括首字节时间和下载时长。
  • Squoosh 让你在确定设置之前，将压缩输出与原图并排预览。

综合运用

一个现代图片优化工作流程如下：

  1. 保存未压缩的母版副本。
  2. 在压缩期间剥离元数据。
  3. 以原始格式压缩——不做不必要的转换。
  4. 为不同视口提供合适尺寸的版本。
  5. 对非关键图片启用懒加载。
  6. 测量性能并迭代。

今天就使用我们的免费在线图片压缩工具开始应用这些最佳实践。上传你的图片，几秒钟内下载优化后的版本——同时保持原始格式完整。