为什么即时图像处理优于手动和后端处理

图像使网页和移动应用程序栩栩如生。有效的图像处理对于实现您想要的影响和获得最佳网络性能至关重要。然而，并非所有图像处理技术都简单、可靠或实时完成。

在这篇博文中，我们将简要介绍三种类型的图像处理：手动、后端和即时图像处理。然后，我们将向您展示为什么即时图像处理可以提供出色的结果。

手动图像处理：响应式图像的原始解决方案

为了满足用户对响应速度更快的网页的期望，许多设计人员和开发人员手动创建相同图像的多个版本，以适应不同的屏幕尺寸、设备分辨率和页面布局。

这种方法有很多问题。

• 这是劳动密集型的。
• 它很容易出现人为错误，尤其是随着工作量的扩大。
• 没有足够的版本来满足许多较新或不太广泛使用的设备/浏览器组合。
• 每当您想更改图像时，您都必须更改所有变体。
• 它会增加您的存储成本。

后端图像处理的兴起

通过后端图像处理，软件会自动生成原始图像的几个版本，以满足各种设备和浏览器的需求。后端图像处理软件将所有渲染图像存储在本地或云端，以备将来使用。这种方法节省了大量的设计和 Web 开发时间，并消除了许多在手动过程中发现的错误。

后端处理通常使用内部创建的软件来完成，作为一次性解决方案。 ImageMagick 和 Thumbor 等现成工具也是流行的选择。

后端图像处理不足的地方

如果您切换到后端图像处理，您仍然会遇到许多与手动图像处理相同的问题。您仍然必须存储所有图像版本，这需要花钱。对于具有大量图像的大型站点和具有用户生成内容的站点，成本是巨大的。

这意味着对于许多用户而言，您通常无法以最小的文件大小获得最好看的图像。这些次优文件的下载时间也更长，进一步损害了用户体验。

以下是后端图像处理问题的总结：

• 未针对每个环境进行优化。后端处理不会为所有浏览器和设备生成最佳、优化压缩的图像。
• 对用户生成内容的支持不佳。虽然后端处理可以裁剪和调整标准化原始图像的大小，但它没有复杂的转换技术来处理不同尺寸、纵横比和质量水平的图像。
• 存储成本。您有许多图像副本需要存储和维护。新设备和新图像格式（例如 WebP 和 AVIF）要求您为每张图像存储越来越多的副本，从而使您的成本激增。
• 带宽成本。通过后端处理，您为每个图像生成一组相对较小的选项，这意味着您通常会发送比必要的更大的图像或压缩率更低的图像。
• 页面加载时间慢，用户体验差。次优压缩图像需要更长的下载时间，损害用户感知并降低转化率。

即时图像处理及其优势

即时图像处理是一种更新、更先进的技术，正在稳步取代后端图像处理。

为了即时处理图像，该软件会在用户需要时实时渲染最佳图像版本，而不是事先生成一组渲染图。渲染图像后，它会存储在缓存中，而不是原始存储中。

每个用户都能以最小的文件大小和最快的加载时间获得最具吸引力的图像：

• 每次都会提供最佳图像。渲染的可能性几乎是无限的，但每一种设备和浏览器的组合都能得到完全正确的图像。
• 显着节省存储空间。由于渲染图像存储在缓存中，而不是在源中，因此不会增加存储成本。
• 更快的加载时间。以最佳级别压缩图像后，页面加载时间会快得多。
• 面向未来的图像传输。随着新图像格式、新设备和新图像处理技术的出现，即时处理会做出响应，您无需付出额外的努力。

即时图像处理可以免除您的大部分工作和费用，并提供真正优化的结果。

此表比较了手动图像处理、后端图像处理和即时图像处理。然而，该表不能完全描述新技术有多容易和多好。对于那些在旧方法上苦苦挣扎的人来说，即时图像处理感觉有点神奇；更少的工作、更少的成本和更好的用户体验——所有这些都会产生更好的业务成果。

如何实现即时图像处理

通过即时图像处理，您可以创建原始图像，然后设置一些规则。您可以指定要用于各种参数的值，也可以让软件为您优化图像、压缩等。

一种流行的视觉媒体目标是自动增强图像颜色，尤其是用户生成的图像。 imgix 提供了一套完整的颜色增强选项。

另一个通过即时图像处理实现的共同目标是自动生成srcsets ，HTML 代码为浏览器提供多种不同的图像供选择。您可以使用自动 srcset 生成来考虑不同的设备分辨率。您可以在我们关于此主题和相关主题的新视频中看到有关其工作原理的演示。

结论

凭借其在成本、易用性和最终用户体验方面的诸多优势，动态图像处理是图像密集型、高流量网站后端处理的绝佳选择。

imgix是动态图像处理领域的领导者，通过全球图像 CDN 提供强大的转换、简单的部署和快速交付。如果您对图像优化或 imgix 有任何疑问，请通过 [email protected] 联系我们或注册一个免费帐户。