如何优化图片以提升网页性能

为什么图片优化对你的网站很重要

页面加载速度直接影响用户体验和搜索引擎排名。Google 已确认页面速度是排名因素，而核心网页指标，尤其是衡量主要视觉内容加载速度的最大内容绘制（LCP），会直接受到图片性能的影响。研究一再表明，用户会放弃加载时间超过 3 秒的页面，而移动用户在较慢的网络上尤其没有耐心。未经优化的图片会拖慢加载时间，增加带宽成本（如果你按带宽支付 CDN 或托管费用，这一点尤其相关），并损害你的核心网页指标得分。直接从相机保存的一张高分辨率图片可能有 5 到 15 MB，而同一张图片针对网页优化后，可以小于 200 KB，在常见的屏幕观看距离下看不出画质差异。网站上有几十张图片时，优化带来的累积效果非常显著。

分步指南：如何在线优化图片

3BearLabs 图片优化器使用智能算法压缩图片，在保留视觉质量的同时减小文件大小。使用方法如下。

1. 1打开图片优化器工具，点击上传区域或拖入文件来上传你的图片。
2. 2选择目标格式。对于照片，JPG 或 WEBP 通常能生成最小的文件。对于带透明度的图形，请使用 PNG 或 WEBP。
3. 3调整质量滑块。对于照片，75% 到 85% 的设置通常能在画质和文件缩减之间取得极佳的平衡。
4. 4可选：设置最大尺寸（宽度或高度），将大图片调整为适合屏幕的大小。
5. 5预览结果，并排对比原图和优化后的版本。确认画质可以接受。
6. 6下载优化后的图片。工具会显示原始文件大小和新的文件大小，让你清楚地看到节省了多少。

了解有损压缩与无损压缩

图片压缩有两种根本不同的方法。有损压缩会永久去除一部分图像数据，大幅减小文件大小，但会略微降低画质。JPG 和 WEBP（有损模式）使用这种方法：在常见的网页质量设置（75% 到 85%）下，大多数观看者在正常使用中察觉不到画质损失，但文件大小的缩减可能非常显著（通常比原图小 70% 到 80%）。无损压缩在不去除任何图像数据的情况下减小文件大小，这意味着解压后的图像与原图逐位完全相同。PNG 和 WEBP（无损模式）支持无损压缩。对于照片，有损压缩几乎总是能产生更好的结果（文件更小，画质可以接受）。对于图形、徽标和界面元素等需要像素级精确的内容，更适合无损压缩。正确的选择取决于你的用途，以及颜色精确度对你有多关键。

选择合适的图片尺寸

文件大小不只取决于压缩，也取决于像素数量。一张 4000x3000 像素的图片在网页上显示于 400x300 像素的容器中，浪费的像素是实际需要的 100 倍。浏览器会下载完整图片再将其缩小，浪费带宽和处理时间。请把图片调整到它们实际显示时的最大尺寸，再为高 DPI（Retina）屏幕乘以 2。例如，如果一张图片将以 600px 宽显示，请以 1200px 宽导出，以获得 Retina 的清晰度。这仍然远小于 4000px 的原图。许多网站使用 HTML 的 srcset 属性提供响应式图片，为不同的屏幕宽度提供不同的尺寸，但即使没有这样做，调整到合理的最大尺寸也会对文件大小产生很大的影响。

小贴士与最佳实践

应用这些最佳实践，通过图片优化打造更快、更高效的网站。

• 网页图片尽可能使用 WEBP 格式：对大多数图片类型，它的压缩效果优于 JPG 和 PNG，而且现在所有现代浏览器都支持。
• 压缩之前先把图片调整为显示尺寸：一张以 800px 显示的 4000px 宽图片，浪费了 25 倍于所需的像素。
• 对于主视觉图和首屏内容，争取控制在 200 KB 以内，以支持在移动网络上快速完成首次页面加载。
• 对首屏以下的图片，使用 HTML 的 loading='lazy' 属性启用懒加载：这会把屏幕外图片的加载推迟到需要时。
• 为图片设置明确的 width 和 height 属性，以防止布局偏移（它会影响你的累积布局偏移核心网页指标得分）。

常见问题