如何在Web上压缩图片而不损失质量

大图片文件是导致网站加载缓慢的最大元凶之一。研究表明，图片占典型网页总大小的50%以上。如果你的网站加载时间超过三秒，可能会流失近一半的访客。好消息是，通过使用正确的压缩技术，你可以在不产生任何可见质量损失的情况下大幅减小图片文件大小。

为什么图片压缩对Web如此重要

图片压缩不仅仅是为了节省存储空间。它直接影响用户体验、搜索引擎排名和你的收益。Google将页面速度作为排名因素，而未压缩的图片是导致Core Web Vitals评分不佳的最常见原因，尤其是最大内容绘制指标。

当你正确压缩图片时，可以降低带宽成本、改善移动端加载时间，并创造更流畅的浏览体验。关键在于找到文件大小和视觉质量之间的最佳平衡点。

理解有损压缩与无损压缩

图片压缩有两种基本方法，理解它们之间的差异对于为你的网站做出正确选择至关重要。

无损压缩

无损压缩在不丢弃任何图片数据的情况下减小文件大小。原始图片可以从压缩文件中完美还原。PNG等格式使用无损压缩算法。这种方法非常适合图形、徽标、截图以及具有锐利边缘或文字的图片。文件大小通常减少10-30%。

有损压缩

有损压缩通过永久删除部分图片数据来实现更小的文件大小。JPEG和WebP使用有损压缩。在适中的质量设置下，大多数观看者察觉不到视觉差异，但文件大小可以减少40-80%。这使得有损压缩成为Web上照片和复杂图片的最佳选择。

选择正确的图片格式

选择合适的格式是有效图片优化的第一步。每种格式都有其优势和不足。

• JPEG：最适合照片和具有多种颜色的复杂图片。支持可调质量级别的有损压缩。不支持透明度。
• PNG：最适合需要透明度、锐利边缘或文字的图片。使用无损压缩。照片的文件大小比JPEG大。
• WebP：Google开发的现代格式，同时支持有损和无损压缩以及透明度。WebP文件在同等质量下比JPEG小25-35%，目前所有主流浏览器均已支持。
• AVIF：最新格式，提供最佳压缩比，比JPEG小高达50%。浏览器支持正在增长但尚未普及。考虑与后备格式一起使用。
• SVG：最适合图标、徽标和简单插图。SVG是基于矢量的，意味着它们在任何尺寸下都能完美缩放，且文件大小极小。

图片压缩的分步流程

1. 调整到显示尺寸

永远不要提供大于其显示尺寸的图片。如果一张图片以800像素宽显示，就没有理由提供4000像素的版本。在应用任何压缩之前，先将图片调整到与其显示尺寸匹配。仅此一步就可以将文件大小减少80%或更多。

2. 选择正确的格式

使用WebP作为主要格式，以JPEG或PNG作为后备。对于照片，使用有损压缩的WebP提供最佳的大小与质量比。对于需要透明度的图形，使用带Alpha通道的WebP或PNG作为后备。

3. 应用压缩

对于JPEG和WebP，从质量设置80开始，然后根据需要调整。大多数图片在质量75-85时与原始图片看起来完全相同，但文件大小却大幅减小。对于PNG，使用应用调色板缩减和压缩算法的优化工具。

4. 实现响应式图片

使用srcset属性为不同的屏幕分辨率提供不同大小的图片。这确保移动用户下载适当大小的图片，而不是完整的桌面版本。

5. 启用懒加载

为首屏下方出现的图片添加loading="lazy"。这可以防止浏览器在用户滚动到附近之前下载图片，从而显著减少初始页面加载时间。

需要避免的常见错误

• 直接从相机或图库网站提供未压缩的图片
• 照片使用PNG，而JPEG或WebP会小得多
• 未指定width和height属性，导致布局偏移
• 过度压缩图片到出现可见伪影的程度
• 忘记创建图片的WebP版本

推荐压缩设置

基于大量测试，以下是Web图片的最佳质量设置：

• JPEG质量：照片使用75-85，带文字叠加的图片使用85-90
• WebP质量：有损使用75-85，图形使用无损模式
• PNG：对于256色或更少颜色的简单图形使用8位PNG
• 最大尺寸：主图宽度1920px，内容图片800px