【译】图片性能优化-处理图片的10大异常

原文 Fixing the Top 10 Mistakes in Handling Website Images ITAI LAHAN 2020/08/26

图像占据了现代网站总带宽的 60% 以上。对于尖端的、图像丰富的设计，例如Pinterest等社交媒体的设计，这个数字明显超过85%。

带宽是一种昂贵的商品，它吞噬了高流量站点的大部分 IT 预算，很容易超过托管和存储成本。此外，由于庞大的流量需要时间来消耗，因此您的访问者通常会花费大量时间等待图像加载。

鉴于天文数字的 IT 支出、由于加载时间过长而导致的访问者放弃，以及随后的转化率和收入下降，确实使优化您的网站图像并加快其交付速度成为重中之重。

Cloudinary 为桌面和移动应用程序上的大量图像和视频相关问题提供了最终的解决方案，从上传到存储、转换、优化和交付。作为 Web 开发人员，您不再需要应对这些挑战。

以下部分描述了处理网站图像时最常犯的 10 个错误以及相关修复。

了解在网页上显示图像的基础知识

在深入研究常见错误之前，必须了解在网页上显示图像的基本方面。要显示图像，您可以使用 HTML 标记。此标记是一个空元素，这意味着它不需要结束标记。它主要需要两个属性：src 和 alt。src 属性指定图像的 URL，而 alt 属性为图像提供替代文本，这对于可访问性和 SEO 目的至关重要。

若要将图像集成到网页中，请按照下列步骤操作：

上传图像文件。
访问主题文件夹。
将 img src 属性添加到图像中。
设置宽度和高度。
添加 alt 属性。
保存更改。
（可选）添加指向图像的链接。

Understanding the basics ensures that you're not just optimizing images but also implementing them correctly on your website.

了解基础知识可确保您不仅优化图像，而且还可以在您的网站上正确实施它们。

1.浪费的浏览器端大小调整

错误：调整图像大小的常见快捷方式是在浏览器而不是服务器上执行此操作。这种选择背后的故事通常是这样的：网站上比比皆是某个维度的缩略图，而新的设计要求它们的维度略有不同。有时是无意的，有时是有意的，Web 开发人员为浏览器指定了不同的 CSS 宽度和高度，使原始图像保持原样。

之后，即使图像在现代浏览器上看起来相同，带宽也增加了，导致不必要的大图像的加载时间更长，并浪费了传输带宽。这个问题在较旧的浏览器中更加明显，其大小调整算法通常低于标准。

这种令人反感的情况的例子很多。以雅虎的首页（下图）为例，它下载了其"最受欢迎"部分的所有缩略图，像素数是其实际观看大小的两倍。

解决方法：确保您交付的图像具有所需的尺寸，即使这需要为同一图像创建不同大小的缩略图以适应不同的页面。切勿提供过大的图像，并依靠浏览器来调整它们的大小。

Cloudinary 的自动化方式：向 URL 添加w_auto以缩放图像以适应各种布局宽度，并从同一 URL 向用户发送在其浏览器上显示最佳的版本。

2.不必要的高质量

错误：JPEG确实彻底改变了网络的图像领域。多年来，Web 开发人员可以使用有损 JPEG 格式非常详细地描绘高分辨率图像，而消耗的带宽仅为竞争对手格式所需带宽的一小部分。

尽管如此，许多人还是避免压缩 JPEG，尽管对于大多数网站来说，您可以安全地将 JPEG 质量设置降低一个档次（在 5-15% 之间，但不会低很多），而不会明显降低视觉质量。

尽管上述两张图片看起来很相似，但左边的一张是 95% JPEG （34 KB）;正确的，80%（17KB），只需要一半的带宽即可下载，加载速度是原来的两倍。这些收益在质量上的微小损失是值得的。

解决方法：尝试使用较低的 JPEG 质量级别。事实上，研究表明，50% 的 JPEG 质量可以为某些网站产生合理的结果。尽管更高质量的 JPEG 看起来总是更清晰，但这种最小的改进很少值得额外的带宽和更长的加载时间。

Cloudinary 的自动化方式：将设置为自动（q_auto）的质量参数添加到图像 URL。然后，Cloudinary 通过感知指标和启发式方法，即时自动在文件大小和视觉质量之间进行权衡，调整编码设置，并确定为图像内容和格式量身定制的最佳质量和压缩级别。由此导致的文件大小显着减小不会对人眼造成明显的退化。

3. 图像文件类型不正确

错误：如今，JPEG、PNG 和 GIF 是最流行的图像文件格式。根据 Web Almanac，60% 的 Web 图像是 JPEG;巴布亚新几内亚占28%。但是请注意，它们扮演着不同的角色，采用错误的格式会减慢页面加载速度并给网站带来更高的成本。

最常见的错误是将照片作为 PNG 提供，错误地认为 PNG 作为一种无损格式，总是为照片提供最佳再现。实际上，这种网站图像优化是不必要的。相对高质量的 JPEG 文件大小仅为 PNG 的一小部分，可提供相当的质量。

左侧的 PNG 重达 110 KB。右边的 JPEG 看起来几乎一模一样，只占用 15 KB。

解决方法：为各种内容类型采用正确的图像格式：

用于计算机生成图像的 WebP，例如图表、品牌和徽标。有损压缩和无损压缩都适用于 WebP 和透明元素（如叠加层），在大多数现代浏览器中都能很好地显示。动画 WebP 通过将压缩类型组合在一个动画中来胜过 GIF，使从视频创建动画变得轻而易举。
照片的JPEG。

注意：与普遍看法相反，PNG 在几乎所有方面都优于 GIF。

Cloudinary 的自动化方式：将设置为自动（f_auto）的 fetch_format 参数添加到图像 URL 中，然后 Cloudinary 会自动检测请求浏览器并选择最有效的图像交付格式。

4. 未优化的图像

错误：一个鲜为人知的事实是，尽管 PNG 是一种无损格式，但您可以使用免费工具进一步压缩 PNG 图像，这些工具将其文件大小减少多达 50%，从而提供完全相同的图像。不幸的是，许多开发人员跳过了这一步，使图像未优化。

解决方法：使用 PNGCrush 和 OptiPNG 等开源库优化图像。如果您不需要自动执行该过程，请使用 Yahoo 的 smush.it 服务手动进一步压缩您的 PNG。

Yahoo smush.it 的一个例子。

Cloudinary 的自动化方式：将f_auto和q_auto添加到映像 URL。然后，Cloudinary 执行以下操作：

调整编码设置，并确定为图像内容和格式量身定制的最佳质量和压缩级别，从而在不损失视觉质量的情况下减小文件大小。
检查不同的图像格式是否会在保持视觉质量的同时产生较小的文件大小，如果是这样，请采用该格式。

5. 保留图像中的元数据

错误：许多现代网站的访问者可以上传照片，例如个人资料图片或观光旅行的快照。这些图像使用现代相机拍摄，包含大量 Exif 或 IPTC（国际新闻电信委员会）格式的元数据：相机型号、日期和时间、光圈、快门速度、焦距、测光模式、ISO 和位置等详细信息。

在大多数情况下，删除元数据以保护隐私和减小文件大小是完全有意义的。然而，很少有人花时间这样做，浪费带宽并损害浏览体验。

解决方法：从图像和用户上传的照片中剥离元数据。如有必要，请将信息保留在某处以备将来参考。

提示：即使元数据对您的网站没有用处，也要保留图像的原始拍摄方向，以确保正确显示。因此，在删除图像的 Exif 详细信息之前，请根据 Exif 数据将其旋转到正确的方向。

Cloudinary 的自动化方式：将资产上传到 Cloudinary 后，您会收到来自上传 API 的响应，其中包含以下详细信息：

资产的宽度、高度、字节数、格式和其他细节。
语义数据，即 ETag;人脸或自定义坐标（如果有）;以及"分页"文件中的页数（图层）。

对于其他语义数据，例如元数据（Exif、IPTC、XMP、GPS）、颜色直方图、主要颜色、自定义坐标、pHash 图像指纹以及人脸或文本坐标，请添加相应的可选参数。然后，Cloudinary 在响应中包含所有这些数据以及默认详细信息。

6. 直接从服务器传送图像

错误：另一个常见的错误是将图像托管在您自己的服务器上，通常是为您的网站提供服务的同一台计算机。随之而来的是两个不良结果：服务器负担沉重，错失利用令人惊叹的内容交付网络的机会。

解决方法：通过 CDN 交付内容，这很容易设置。它们通过众多全球服务器（称为边缘）运行，自动将访问者路由到最近的边缘位置，从而以尽可能快的速度提供图像，从而大大减少延迟，从而提供图像的速度比站点托管服务快得多。CDN 提供商按所需带宽定价，收费略高于网络托管服务。尽管如此，CDN 提供的好处非常值得，许多人认为这是负担得起的。

Cloudinary 的自动化方式：Cloudinary 利用多个 CDN，包括 Akamai、Fastly 和 CloudFront，以及数千个全球交付服务器以及高级缓存和基于 URL 的动态交付技术。结果呢？快速向全球用户交付资源。

智能 CDN 选择和动态多 CDN 切换功能可供企业客户使用。

7. 静态图标的逐一交付

错误：除了照片和缩略图之外，您的网站还可能显示图标和辅助图像（徽标、箭头、星星、标志、标记），以获得引人入胜且独特的外观和感觉。按钮部分、阴影部分、边框部分和其他元素都有助于帮助您动态构建小部件。

您会惊讶于一个网站上有多少微小的图像。例如，Google 搜索返回的典型结果页包含 80 多个小图标。

一个常见的错误是将所有这些小图标嵌入到他们的网站中，从而延长了下载时间。此外，由于普通浏览器最多只能同时下载大约六张图像，因此每批下载的图像都会加剧延迟。此外，您的 Web 服务器在处理许多下载请求时可能会变得无响应。与此同时，您的访问者可能会放弃缓慢的图像并背弃您的网站，再也不会回来。

解决方法：将 CSS Sprite 方法中的所有小图标分组为单个图像。然后，您的网页只需要从您的服务器下载该图像，并且该页面的 HTML 代码指向 Sprite 中具有替代 CSS 类名称的图标。

对于包含大量图标的 Google 搜索结果页面，您只需下载一张图片。然后，浏览器会快速缓存来自 Google 服务器的图像，并立即显示所有图标。

Cloudinary 的自动化方式：使用 Cloudinary 的精灵生成功能将多个徽标分组到单个精灵图像中，然后使用 supported_cloud 标签显示它。这样做可以增强页面性能并简化图像管理。

8. 绕过 CSS3 转而使用图像

错误：由于较旧的浏览器不显示阴影、圆角和使用 CSS 编码的特殊字体，因此开发人员将这些元素创建为图像。这种做法产生了大量的图像，最终降低了浏览体验的等级，使更新和其他任务难以执行，更不用说需要更多的开发时间和增加成本了。仅仅更改图像中嵌入的文本就成为了一件不平凡的苦差事。即使是现在，在将网站的设计转换为 HTML 组件时，许多开发人员也会将按钮保留为图像。

现代浏览器恰如其分地显示使用简单的 CSS 指令构建的阴影等元素，但以图像形式实现元素的费力做法仍然存在。例如，CNN 的 Sprite 图像的这一部分，大文件大小为 61 KB：

解决方法：确保组织中负责创建图像元素的人员尽可能在 CSS3 中编写代码。若要支持旧版本的 IE，请将标记降级为正常运行的设计，即使设计不完美。否则，请使用替代方法（如 CSS3 渐进式 Internet Explorer （PIE））模拟 CSS3。

Cloudinary 的自动化方法：将"max"指定为半径参数（'r_max'）的值，使 Cloudinary 将矩形图像裁剪为椭圆或将正方形图像裁剪为圆形。

9. 缓存设置不正确

错误：由于网站的图像文件很少更改，因此访问者的浏览器和其他服务器（CDN、代理等）可以缓存这些文件。缓存后，将显示本地副本，在后续访问您的站点时不会进一步下载。因此，正确的缓存设置至关重要，可以节省带宽并加快页面加载速度。

不幸的是，缓存错误是由于不必要的担心而发生的，即冗长的缓存设置会导致旧图像的持续显示，即使它们已更新。

解决方法：在图像 URL 中添加指纹（MD5、时间戳等），以便在图像更新时更改它们，从而导致浏览器重新获取图像。大多数现代 Web 开发平台都会自动执行该步骤，从源头上解决问题。

此外，作为保护措施，请采用主动缓存，即将映像的 HTTP 'Expires' 标头设置为将来尽可能远。

Cloudinary 的自动化方式：Cloudinary 动态处理缓存，无需您手动执行步骤。以下两种情况之一适用：

对于 Cloudinary 媒体库中的资产替换，原始 URL 将保持有效。
对于通过 Cloudinary 的上传 API 进行的资产替换，请将"invalidate"参数设置为"true"，作为 CDN 缓存的 API 请求的一部分，以便原始 URL 保持有效。

有关详细信息，请参阅此 [Q&A][support.cloudinary.com/hc/en-us/ar...

10. 所有设备的一种图像尺寸

错误：您的网站通过许多不同的设备查看，近年来移动设备和平板电脑大幅增加，正如网站分析所证明的那样。那么，如何在分辨率通常远低于台式机的移动设备上显示大图像呢？

开发人员倾向于选择快速路线，即无论使用何种设备，都可以提供相同的精确图像，依靠客户端（浏览器）来调整它们的大小。这种做法需要付出高昂的代价：加载时间长，带宽浪费。此外，3G和漫游用户最终会支付更多的费用来下载无用的高分辨率图像，而没有任何好处。

对称的、同样破碎的解决方案旨在实现最低的公分母，即向所有设备提供低分辨率图像，在更新的高分辨率设备上呈现您的网站的破旧显示。

解决方法：通过访问者的用户代理和其他客户端 JavaScript 代码（可选）识别访问者的移动设备和分辨率。然后，根据正确的分辨率从服务器中检索最合适的图像。

作为先决条件，请为每个原始图像创建一组缩略图。为了快速和轻松，请使用为该任务准备的优秀 JavaScript 包自动执行该任务。

Cloudinary 的自动化方式：让 Cloudinary 通过指定所需的宽度和高度来动态调整图像大小：添加""标签并设置""标签的"srcset"和"sizes"参数，让浏览器选择要显示的图像版本。

您还可以在图片 URL 中添加转换参数，之后 Cloudinary 会根据参数实时修改图片。

有关如何使用""和"标签构建响应式映像的详细信息，请参阅以下两篇文章：

此外，开源工具 Responsive Breakpoints Generator 上的文章还介绍了如何计算图像的最佳版本数，以平衡生成的版本数和每个版本中的文件大小减小。

最后的话

本文总结了我们在 Cloudinary 经常遇到的最常见的与图像相关的网站问题以及解决方案。

对于上传到我们的云平台的图像，Cloudinary 可以动态地将它们转换为任何缩略图大小、文件格式和质量，以便您可以测试它们并确定最适合您的网站和用户期望的设置。另外：

您可以通过 Cloudinary 创建简单、易于管理的 Sprite。
Cloudinary 可自动剥离图像的元数据并对其进行优化，以便使用正确的缓存设置从快速 CDN 交付。
Cloudinary 基于云的动态图像大小调整功能可生成响应式设计。

简而言之，借助 Cloudinary，您可以无缝高效地管理图像，轻松无忧。