"回应"这个词是从哪里来的？伊桑·马科特在其《变革的海洋》一文中解释道：最近，一门叫做"响应式建筑"的新兴学科已经开始研究物理空间如何对通过它们的人的存在做出反应。通过嵌入式机器人技术和拉伸材料的结合，建筑师们正在试验艺术装置和墙壁结构，当人群接近时，这些装置和结构会弯曲、弯曲和扩张。…而不是创造不变的，不变的空间…居住者和结构可以而且应该相互影响其他。这个是我们前进的方向。这是一个伟大而令人兴奋的愿景！在确定了他希望解决的问题之后，Ethan开始勾勒出一个解决方案，他将未来"反应迅速"的网站比作机器人、灵活、庞大和智能的结构，这些结构可以在我们眼前改变形状，以适应我们不断变化的需求。谁不想建立这个数字版本呢？一个编码员，弓着腰，拼命地打字当我们开始我们的一系列调查，这意味着什么是图像的"反应"，我希望你花一点时间在这个愿景-巨大的，创造性的雄心壮志。享受它，珍惜它。然后把它放在架子上，当我们通过一个更普通的隐喻入口进入反应图像的世界。办公椅我想谈谈办公椅，但我们的故事从座舱开始。1在20世纪40年代，美国开始制造数千架飞机。飞机设计使用了一个庞大的数据集-平均服务人员的测量，为平均水平打造完美的驾驶舱伙计。但是随着战争的开始，这些一刀切的飞机开始以惊人的速度坠毁。一位名叫吉尔伯特•S•丹尼尔斯（Gilbert S Daniels）的研究人员发现了原因："一般"的驾驶舱几乎没有人适合——准确地说，不到5%的飞行员。在很短的时间内，驾驶舱被调整，这样飞行员就可以通过棘轮来滑动他们的座位和控制装置。飞机坠毁率下降，飞行员停止死亡，全新的阶层（矮人！高个子！女人！）能够飞起来。""平等匹配"在性能和机会。因此"人类工效学"诞生了，战后，我们应该在大量生产的人工制品中植入人类多样性的理念传播开来，一直延伸到简陋的办公椅上。我们的编码器调整他们的椅子-啊！这样更好！反应灵敏的图像就像桌椅。虽然创造机器人、变形空间的想法很吸引人，但反应灵敏的图像并没有那么壮观。他们的目标是谦虚而真实的：平等的适合和人体工程学。大多数时候，反应灵敏的图像是看不见的；就像你的椅子一样容易被遗忘和不可缺少。视觉上"无聊"，但服务的目标反映了什么是真正和深刻的在网上创建：提高性能和扩展机会。一个大小不一样的时候，大多数浏览器都在同样大小的屏幕上运行。像960一样，设计师们接受了"平均尺寸"的屏风。同y屏幕上的静态布局意味着调整图像大小非常简单。人们只需精确地测量一幅图像在一个布局中占据了多少像素，并以这个大小"保存到web上"。然后每个访问者都会收到完全相同的资源，这些资源精确地提供了他们所需的数据量——不再是，也不再是少一点。完毕在过去的十年里，这种一刀切的做法已经成了问题。网络的触角已经超过了1027×768个显示器，扩展到了手机、电视、电子墨水屏幕，甚至还有一些勇敢的智能手表——各种形状和尺寸的硬件。高DPI屏幕意味着像素不再是像素；低功耗和高性能硬件以及最新和最老浏览器之间的差距继续扩大；而一场新的革命——网络上的大色域色彩，就在眼前地平线。到为了应对这种日益增长的多样性，业界接受了Ethan的响应式设计理念。CSS媒体查询使响应式布局成为可能，但图像（其资源在高度、宽度、颜色深度和内容上本质上是固定的）一直停留在固定的、一刀切的模式中过去。只是因为单一尺寸的座舱无法应付人类的多样性，单一资源图像无法容纳新的多样化设备景观。最差-案例场景他们失败得惊人！你看，我们，在网络上，不仅仅是针对一个平均值，我们已经针对一个极端进行了优化。多年来，利用新的高端硬件——视网膜显示器、巨大的监视器——的唯一方法就是制造大量资源，并将这些资源发送给每个人。结果呢？慢动作表演灾难：带来了什么直到今天。在撰写本文时，图像占平均页面总字节大小的64%。以重量衡量，大部分的网络都是图像。从一个角度看，这是一场灾难——网络上普遍获取信息的美好承诺，被100亿张人们对着沙拉微笑的照片给毁了。但从另一个角度来看，这是灾难性的灾难！如果我们想让网络变得更快，图像是膨胀的一块低垂的果实：成熟了采摘。所以：如何提高图像性能？用防火墙灭火机器人建筑、符合人体工程学的椅子、反应灵敏的设计和反应灵敏的图像有什么共同点吗？所有人：……拿一些静态的东西，使之适应；变化…导致产品比静态前辈更复杂…是对新发现的产品如何使用或可以使用的可变性的反应和应对策略。简言之，它们都是通过可变性。什么当涉及到图像时，人们谈论的是各种各样的变化？最明显的分类是可变大小。响应式布局会在断点处进行重组，并在它们之间进行拉伸和挤压，以在各种尺寸下看起来很好。在2009年，以你的观众所需要的唯一规模"为网络节省"是完全有意义的。2016年，我们的图像需要像我们的布局。复合这，我们关于像素本身的静态假设已经崩溃了。高密度（又名"视网膜"）显示器军团。这些第二，新变化的环境——灵活的布局尺寸和多样的屏幕密度——都有相同的解决方案。我们需要提供可变分辨率的图像。我们下一步会讲这个，在第二部分系列变量-分辨率图像是最常见的响应图像用例。但是，一旦我们打开了一扇大门，让图像的资源可以根据不同的环境而变化，我们就可以做更多的事情另外，在本系列的第三部分，我们将探讨不连贯的浏览器格式支持环境（我们可以通过提供具有可变格式的图像来解决这一问题），以及网络速度的巨大差异（我们可以通过动态调整对图像应用的有损压缩量来解决这一问题）。这两种技术都属于为图像提供变量的保护伞压缩。最后在第四部分中，我们将打破我们看不见的、符合人体工程学的模式，思考如何使用一种称为艺术指导的技术，使我们的图像在视觉上具有响应性。当我们直接创作时，我们会改变图像的实际、可见的内容，以便使它们适应特定的环境。当我们进行艺术指导时，我们不仅仅是为了提高性能而整合可变性；我们还利用它来解决设计。和这就是一个高层次的图像"响应"意味着什么。响应图像是可变的，我敢说是人体工程学，图像，它们努力提供相等的配合，以提高性能和扩展机会。下一个到时候，我们将深入研究最常见的响应图像用例：可变分辨率图像。这个关于普通人、桌椅和座舱的故事来自于《神奇的播客》的平均一集，99%是无形的。↩︎关于响应图像的进一步阅读具有Cloudinary的响应图像自动裁剪图像，实现响应式设计，提高图像质量响应图像：srcset和size HTML图像属性通过3个简单的步骤使网站上的所有图片都能响应响应式Web设计的最佳实践