有时你必须退后一步，问为什么传统存在。在移动终端设计中，使用媒体查询和响应映像，提供三种尺寸的图像（一种用于智能手机，一种用于平板电脑，另一种用于桌面）已成为传统。但它是最好的解决方案吗？
这最有可能比没有做，但它实际上有多好？还有改进的余地吗？在本文中，我们将仔细研究单尺寸因子方法的效果如何，以及如何使用智能内容传送网络来提高图像性能。
图像驱动有效载荷和性能
表演是制作网站的一个复杂方面。在这里，我们将专注于图像，因为它是在性能树上的低调的水果。在优化图像传递方面花费的努力很有可能具有可见和可衡量的结果 – 特别是如果您有一个具有许多图像的网站，如电子商务网站或在线新闻网站。
随着时间的推移，网站变得更加重视。Radware的研究表明，平均电子商务网页超过1.3 MB; 64％的有效载荷来自图像。如果超过一半的用户（和潜在客户）需要超过三秒钟的时间才会放弃您的网站。在图像影响网络性能的这个问题上，数以百万计的美元受到威胁。
选择正确的大小：断点
上述三种图像大小通常用响应图像（和聚合物填充）或使用劫持图像加载的JavaScript来实现。
后者是路可走，直到响应图像苏醒过来。这个想法是，浏览器不应该通过读取HTML来加载图像，而应该加载并执行JavaScript以找出要下载的图像。通常，它将查询视口的宽度，将该宽度与静态断点进行比较，然后从几个预定义的图像大小中选择最佳拟合。我们现在知道，这种做法有两个主要问题。首先，它会破坏浏览器的预加载 ; 浏览器无法开始加载标记中引用的图像，而不必等待JavaScript执行。其次，由于您只有几个预定义的图像大小可供选择，因此下载的图像的尺寸超大版本的风险很大。
更换基于JavaScript的图像加载新的响应图像规范解决了预加载问题。然而，如果您只有三个图像大小的断点，则正在下载的图像的超大版本的风险与同样重要。
采取正确和正确数量的断点不是一件容易的事情。即使存在帮助您的工具，断点往往是一个移动目标。由于新的屏幕尺寸和外形尺寸，今天的理想断点可能会改变。
你需要多少个断点？
图像断点问题有多严重？问的不同，你需要多少版本来节省更多？随着时间的推移，图像请求的数量将增加访问您的网站的各种设备和屏幕尺寸。
一个由ScientiaMobile做实验发现，平均需要只有八给定图像请求多于3个断点。实验在四个月内收集数据，并将实际服务的图像的大小与特定设备的最佳尺寸和屏幕尺寸进行比较。由于随着时间的推移，不同形式和形状访问网络的设备的种类很多，所以统计上，第九个图像请求将需要一个不存在的大小，并且最有可能得到下载比需要的更大和更重的图像的性能损失。对于给定图像的URL，您获得的请求越多，发出请求的设备将分散得越多：在180个请求时，您将超过11个断点。在1,000个图像请求中，您将超过20个断点。
网站建设
请注意，本实验仅涵盖图像大小。特别是对于响应式图像，您还应考虑替代图像格式（如GIF，JPG，PNG和WebP），以实现更高效的文件压缩。例如，您可以将WebP发送给支持它的设备和PNG。这意味着您需要为每个图像大小渲染一些格式。您可以看到如何快速地乘以图像版本，并需要额外的逻辑来提供相应的版本。
该实验进一步解释，使用媒体查询和断点服务于三种不同的图像，不同的设备尺寸的策略降低了有效载荷送达下降到只有一个尺寸提供给所有设备的原始方案的63％。但是我们可以进一步：介绍内容协商和服务器端映像优化和调整大小可以将有效载荷减少到16％！
网站建设
根据上述实验，动态优化任何设备和屏幕尺寸的图像，与使用三个静态断点相比，将有效载荷减少约75％。
智能内容交付网络
如我们所见，在网页上显示图像可能不会像您的性能预算紧张一样容易。有很多因素要解决。选择最佳的断点，图像格式，图像大小，压缩率和实施方式是足够的挑战，但解决方案也应该是未来友好的。随着新设备和形式因素被推向已经多样化的环境中，支持传统设备变得与支持最新时尚一样重要。自动化这个过程似乎值得认真考虑。
我们开始看到几种以这种方式优化图像的交钥匙解决方案。这些解决方案是智能内容传送网络（CDN），它们具有内置在网络边缘的智能。这些CDN通过组合设备检测，实时图像优化和地理上靠近最终用户的经典CDN缓存三个要素来提供设备感知图像优化。不像常规的CDNs对您的有效载荷最小化没有兴趣，智能CDN寻求通过调整您的有效载荷到设备的能力甚至网络条件来提高网络性能。
如果您想在您的网站上实现动态图像优化CDN，您有什么选择？请注意，有许多图像处理服务用于执行静态操作，如调整大小，裁剪和过滤。这不是我们要找的。我们也没有寻找使用JavaScript来确定图像的最佳尺寸和格式的服务。
我们正在寻找实现服务器端逻辑的CDN或“边缘逻辑”，使用客户端提示或设备检测来确定最佳图像大小和格式。这被称为内容谈判。这使得列表显着缩短。我们来比较最突出的竞争对手：
| 客户提示 | 设备检测 | 推或拉 | 免费层 | |
|---|---|---|---|---|
| 多云 | 是 | 没有 | 推拉 | 是 |
| imgix | 是 | 没有 | 推 | 没有 |
| ImageEngine | 是 | 是 | 拉 | 是 |
以上所有使用客户端提示来确定最佳尺寸。客户端提示是一项相当新的计划，目前仅在基于Blink的浏览器中实现，并且还包含有关HTTP请求中的首选图像大小的一些其他信息。服务器可以使用此信息来生成正确大小的图像。尽管客户提示的支持和采用日益增加，但只有约3％的图像请求带有客户端提示。这个数字有望增长。然而，在不久的将来，内置设备检测的CDN将是一个好主意，因此所有图像都被优化。如果你想玩这个概念有一点，寻找一个基于拉式的CDN（需要较少的配置）与一个免费的层。
上述所有CDN都需要注册。ImageEngine和Cloudinary有一个免费的层次，如果你想在购买之前尝试，这是很方便的。我们来看看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”上的文章“ Leaner Responsive Images With Client Hints ” 中有更详细的介绍。
结论链接
从各种设备的图像到普通的单尺寸尺寸因子方法肯定是正确的一步。缺点是，从性能的角度来看，这种做法太笼统。有更多的果汁被挤压。然而，从开发和维护的角度来看，这可能是有意义的，因为三个图像大小或断点是可管理的。物流依然比较容易维护。但我们不能忘记为什么我们这样做。我们不是为了自己作为开发人员，而是为了我们的最终用户。因此，如果我们有意义，自动化这个过程。这不是人类的工作。卸载此任务是双赢的：更容易的维护和更少的数据传输。
智能CDN通过在网络边缘使用客户端提示和设备检测，为您提供核心CDN功能，以及任何大小和形状因素的动态和自动图像优化。实验表明，与提供一个静态图像相比，有效载荷节约可以运行高达84％，与常规的单尺寸形状因子方法相比，运行大约75％。
幸运的是，有几个智能CDN已经在那里了。开始并测量差异是相当容易的。一旦你创建了一个帐户，你可以建立一个简单的页面，并通过WebPagetest来运行它来看看它的区别。
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/260650.html