汕头高端网站建设：让内容交付网络优化您的图像

2019.08.13 mf_web

147

有时你必须退后一步，问为什么传统存在。在移动优先设计中，使用媒体查询和响应式图像提供三种尺寸的图像 - 一种用于智能手机，一种用于平板电脑，一种用于桌面 - 已成为传统。但这是最好的解决方案吗？它最有可能比什么都不做，但它实际上有多好？还有改进的余地吗？在本文中，我们将仔细研究单一形状因子方法的实际运行情况以及如何使用智能内容交付网络来提高图像性能。汕头高端网站建设

它最有可能比什么都不做，但它实际上有多好？还有改进的余地吗？在本文中，我们将仔细研究单一形状因子方法的实际运行情况以及如何使用智能内容交付网络来提高图像性能。

图像驱动有效负载和性能

性能是制作网站的一个复杂方面。在这里，我们将专注于图像，因为它是性能树上的低调成果。您在优化图像传输方面所付出的努力很可能会产生明显且可衡量的结果 - 尤其是如果您拥有包含许多图像的网站，例如电子商务网站或在线新闻网站。

随着时间的推移，网站变得更加重要。Radware的研究表明，平均电子商务网页超过1.3 MB; 64％的有效载荷来自图像。如果加载时间超过三秒，超过一半的用户（和潜在客户）将放弃您的网站。在图像如何影响网络性能的问题上，数百万美元受到威胁。

选择合适的尺寸：断点

上面提到的三个图像大小通常用响应图像（和polyfill）或用于劫持图像加载的JavaScript来实现。

后者是直到响应式图像出现的方式。想法是浏览器不应该通过读取HTML来加载图像，而是应该加载并执行JavaScript以确定要下载哪些图像。通常，它会查询视口的宽度，将该宽度与静态断点进行比较，然后从几个预定义的图像大小中选择最佳拟合。我们现在知道，这种方法有两个主要问题。首先，它打破了浏览器预加载 ; 浏览器无法立即开始加载标记中引用的图像，而是必须等待JavaScript执行。其次，由于您只有几个预定义的图像尺寸可供选择，因此存在显着下载图像版本的风险。

用新的响应式图像规范替换这个基于JavaScript的图像加载解决了预加载问题。但是，如果只有三个图像大小的断点，则下载图像的超大版本的风险同样重要。

选择正确且正确数量的断点并非易事。即使存在可以帮助您完成工具的工具，断点往往也是一个不断变化的目标。由于新的屏幕尺寸和外形尺寸，今天理想的断点明天可能会发生变化。

你需要多少个断点？

图像断点的问题有多严重？换句话说，您需要多少版本才能节省更多？随着时间的推移，图像请求的数量将增加访问您网站的各种设备和屏幕尺寸。

ScientiaMobile进行的一项实验发现，对于给定图像，平均只需要8个请求才能超过3个断点。该实验收集了四个月的数据，并将实际服务的图像大小与特定设备和屏幕尺寸的最佳大小进行了比较。由于随着时间的推移不同形式和形状的设备的广泛多样性，从统计上来说，第九图像请求将需要不存在的大小并且很可能将获得下载比必要的更大和更重的图像的性能损失。对于给定图像的URL，您获得的请求越多，发出请求的设备就越分散：在180个请求中，您将超过11个断点。在1,000个图像请求中，您将超过20个断点。

图像描述。 — 三种尺寸的图像可以到达多远？对图像的实际请求数量将根据网站的流量而有所不同。上面显示的曲线表示统计上最适合所收集的图像请求和断点数据的等式。

请注意，此实验仅涵盖图像大小。特别是对于响应式图像，您还应考虑使用其他图像格式（如GIF，JPG，PNG和WebP）来实现更高效的文件压缩。例如，您可以将WebP发送给支持它的设备和其他人的PNG。这意味着您需要为每个图像大小渲染几种格式。您可以看到它如何快速地增加图像版本，并需要额外的逻辑来提供适当的版本。

该实验进一步解释了使用媒体查询和断点将三个不同图像提供给不同设备大小的策略将所服务的有效载荷减少到原始场景的63％，其中仅向所有设备提供一个尺寸。但我们可以更进一步：引入内容协商和服务器端图像优化和调整大小会将有效负载降低到16％！

根据上述实验，动态优化任何设备和屏幕尺寸的图像，与使用三个静态断点相比，将有效载荷减少约75％。

智能内容交付网络

正如我们所看到的，如果您的性能预算紧张，在网页上显示图像可能并不像听起来那么容易。有许多因素需要考虑。选择最佳断点，图像格式，图像大小，压缩率和实施是非常具有挑战性的，但解决方案也应该是对未来友好的。随着新设备和外形因素在已经多元化的环境中发布，支持传统设备变得与支持最新时尚同样重要。自动化这一过程似乎值得认真考虑。

我们开始看到几种以这种方式优化图像的交钥匙解决方案。这些解决方案是智能内容交付网络（CDN），它们具有内置于网络边缘的智能。这些CDN通过组合三个元素提供设备感知图像优化：设备检测，实时图像优化和地理上靠近最终用户的经典CDN缓存。与不关心有效负载最小化的常规CDN不同，智能CDN通过根据设备功能甚至网络条件定制有效负载来寻求提高Web性能。

如果要在网站上实施动态图像优化CDN，您有哪些选择？请注意，有许多图像处理服务可用于执行静态操作，例如调整大小，裁剪和过滤。这不是我们想要的。我们也不是在寻找使用JavaScript来确定图像最佳尺寸和格式的服务。

我们正在寻找一种实现服务器端逻辑或“边缘逻辑”的CDN，使用客户端提示或设备检测来确定最佳图像大小和格式。这称为内容协商。这使得列表显着缩短。让我们比较最突出的竞争者：

	客户提示	设备检测	推或拉
Cloudinary	是	没有	推拉
imgix	是	没有	推
ImageEngine	是	是	拉

以上所有使用客户端提示来确定最佳大小。客户端提示是一项相当新的计划，目前仅在基于Blink的浏览器中实现，它包含有关HTTP请求中首选图像大小的一些其他信息。服务器可以使用此信息生成大小合适的图像。尽管客户端提示的支持和采用正在增长，但只有大约3％的图像请求带有客户端提示。预计这个数字会增长。然而，在不久的将来，选择内置设备检测的CDN将是一个好主意，以便优化所有图像。如果您想稍微使用该概念，请使用试用选项或免费套餐寻找基于拉取的CDN（需要较少配置）。

上面提到的所有CDN都需要注册。Cloudinary有免费套餐。ImageEngine a和Imgix有一个试用概念，如果你想在购买之前尝试，这很方便。让我们仔细看看ImageEngine。ImageEngine是基于拉式的，这意味着您无需在开始之前将图像上传到任何位置。使用ImageEngine，您只需将图像保存在服务器上，ImageEngine将根据需要从中提取图像。

注册ImageEngine后，您将获得一个专用主机名，这是您的CDN的URL。剩下要做的唯一事情就是在所有图像源前加上该主机名。

说你原来的图片标签是这样的：

<img src=“https://mysite.xyz/dog.png" alt=“My dog”>

复制

ImageEngine的新图像标记如下所示：

<img src=“//{personal-token}.imgeng.in/https://mysite.xyz/dog.png" alt=“My dog”>

复制

在此示例中，ImageEngine利用客户端提示和设备检测来确定请求图像的每个设备的最佳像素大小，压缩比和图像格式。如果您想要更具体，上面列出的所有服务都支持显式“命令”来覆盖任何自动检测到的参数。对于ImageEngine，请求WebP格式的360像素宽图像看起来像这样：

<img src=“//{personal-token}.imgeng.in/w_360/f_webp/https://mysite.xyz/dog.png" alt=“My dog”>

复制

当然，要使用客户端提示，请记住在标记中启用它。把它放在你的<head>标签中：

<meta http-equiv=“Accept-CH” content=“DPR, Viewport-Width, Width”>

复制

ImageEngine甚至还有一个WordPress插件，可以自动处理所有这些。

imgix和Cloudinary的过程类似，除了一些额外的设置。

当然，所有服务都可以与响应式图像相结合。对于任何支持客户端提示或设备检测的CDN，响应式图像的有时冗长标记变得更加可维护。带有客户提示的响应式图像在Smashing Magazine 的文章“ 带有客户提示的精简响应图像 ”中有更详细的介绍。

结论

从各种设备的一个图像移动到通用的每个形状因子的方法，绝对是朝着正确方向迈出的一步。不利的一面是，从绩效的角度来看，这种方法过于笼统。有更多的果汁被挤压。但是，从开发和维护的角度来看，它可能是有意义的，因为三个图像大小或断点是可管理的。物流仍然相当容易维护。但我们不能忘记为什么要这样做。我们不是作为开发人员，而是为了我们的最终用户。因此，如果我们有意义的话，自动化这个过程。这不是人类的工作。卸载此任务是双赢的：更轻松的维护和更少的数据传输。

智能CDN通过在网络边缘使用客户端提示和设备检测，为您提供核心CDN功能，以及任何大小和外形尺寸的动态和自动图像优化。实验表明，与服务一个静态图像相比，有效负载节省可高达84％，与普通的每个形状因子方法相比，运行率约为75％。

幸运的是，已经有一些智能CDN。开始并测量差异相当容易。创建帐户后，您可以建立一个简单的页面并通过WebPagetest运行它以查看差异。

汕头高端网站建设