如何压缩网络图像而不破坏它们

大多数对于网站来说“太大”的图像都没有被严重压缩。它们只是比需要的更宽和更高。直接从手机拍摄的照片宽度可能为 4000 像素，但最终仍会出现在宽度为 700 像素的盒子中。调整图像大小对其文件大小的影响远远大于轻推质量滑块的作用。

这两个工作有相关但不相同。调整大小会改变像素数。压缩会改变用于描述每个像素的数据量。首先确定正确的尺寸，然后进行压缩，这样您的图像在相同的文件大小下看起来会更好。

从尺寸开始，而不是质量滑块

确定图像实际显示的宽度，然后考虑高密度屏幕。如果您希望它在具有密集显示屏的手机和笔记本电脑上保持清晰，则实用的规则是以两倍的 CSS 宽度导出。例如，600 像素宽的卡可受益于 1200 像素的图像。

它出现在哪里	最长边	笔记
全角英雄图像	1600–2000 px	1600 px 对于大多数网站来说已经足够了；较大仅在非常宽的屏幕上有帮助。
文章正文图片	1200 px	在 2 倍密度下，这覆盖了 600 像素的内容列。
卡片或缩略图	600 px	比这个小，放大后开始看起来很软。
通过电子邮件发送内嵌图像	800 px	目标是远低于 200 KB；无论如何，许多客户都会阻止大图像。
社交分享图片	1200 × 630 px	大多数平台可预测地裁剪的常见景观比例。

你不需要完美地计算这个。如果原件的宽度为 6000 像素，并且显示的最大像素约为 1600，则保留额外的像素不会带来视觉上的好处。减少长边是最大的节省。

对于 JPEG，质量值控制编码器丢弃眼睛不太可能注意到的细节的程度。它不是原始质量的百分比，80 并不意味着“80% 的质量”。它只是一个等级上的一个点，较低的值会产生较小的文件和更明显的工件。

JPEG 压缩也是复合的。以较低质量保存已保存的 JPEG 不会再次显示原始细节；它增加了第二层损失。从您拥有的最佳副本开始，然后以您需要的大小导出一次。

PNG 是无损的，因此质量滑块不适用。对于摄影内容来说，PNG 通常比 JPEG 大，但它可以保持锐利的边缘和透明度不变。 WebP 可以在有损或无损模式下使用；在相似的质量下，有损 WebP 通常比 JPEG 小，但与旧软件的兼容性稍窄。

格式选择不仅仅是压缩设置。使用 JPEG 或有损 WebP 来拍摄照片、带有照片内容的屏幕截图以及任何需要连续色调的图像。对于纯色图形、徽标、界面屏幕截图以及任何需要透明背景的内容，请使用 PNG。 JPEG没有透明度；当带有剪切背景的图像保存为 JPEG 时，这些区域会被填充——通常是白色。

一个常见的错误是将文本的清晰屏幕截图保存为 JPEG。压缩会在字母周围产生微弱的光晕和污迹，即使在中等设置下，也会使图像感觉质量较低。 PNG 或 WebP 将保持类型干净，并且通常会为此类内容生成较小的文件。有一个更密切的比较 JPG、PNG 还是 WebP？

随着图像压缩器，最长边上限和质量值一起可见，因此您可以在下载之前测试组合并比较前后大小。这调整大小当尺寸需要精确时（包括百分比缩放和固定纵横比），这是更好的选择。

以质量 50 保存 6000 像素的照片会生成一个仍然很大的文件，并且现在有明显的损坏。先调整大小，然后压缩。同样的照片在 1600 像素和质量 80 下通常会看起来更好并且重量更轻。

“更小”本身并不是目标。质量为 40 时看起来浑浊的产品照片可能比质量为 78 时要小，但在页面上看起来也更差。目标是足够小：显示的大小清晰，不浪费像素或兆字节。

如果徽标具有透明背景，JPEG 会将其填充为白色。在彩色页面上，它显示为一个明显的框。保留 PNG 或 WebP，或准备专为特定背景颜色设计的版本。

每次有损保存都会增加文物。批量编辑应从原始文件开始，而不是从上次导出的版本开始。保留高质量的母版并从中生成网络版本。

照片可以在其元数据中携带相机详细信息和位置数据。通过画布重新编码，如 Lovely Tools 所做的那样，会生成一个没有附加元数据的新图像。这通常有利于隐私，但也意味着如果您出于存档或专业原因需要元数据，则应该保留原始数据。现代浏览器在绘制照片时会应用照片的方向，因此肖像照片不应横向到达。

在 Lovely Tools 中，图像由浏览器解码，以所选尺寸绘制到画布上，并再次编码为新文件。没有上传任何内容。原始版本保持不变，压缩副本仅存在于浏览器选项卡中，直到您下载为止。

这也解释了局限性。所有工作都发生在设备的内存中，因此超大图像或大批量图像在手机上可能会很慢。浏览器的画布引擎也有最大尺寸。如果图像太大，该工具将要求较小的尺寸，而不是悄悄地产生降级的结果。