谈话总结花了将近四年的时间，提出了四项标准，成立了一个社区团体，并发起了一场资助开发的活动，但我们终于得到了我们一直以来所要求的——一个将响应图像放入浏览器的解决方案。现在辛苦了开始。杰森Grigsby是cloudfour的联合创始人，cloudfour是俄勒冈州波特兰市可爱的一家小型网络代理公司。他与O'Reilly合著了Head First Mobile Web，是奥巴马08版iPhone应用程序开发团队的一员，与第一个开放设备实验室一起创建了Mobile Portland；他还是"未来友好网络"的签约人宣言。什么时候他还年轻，杰森吹着1200波特的口哨，当他第一次被介绍给马赛克时，他一点也不感兴趣，被咬了一口2000年的手机窃听，当时WAP是垃圾。他参加了responsiveimages社区小组，并撰写了大量关于如何使用responsiveimages的文章。他目前正沉迷于进步网络的潜力应用程序。响应经过五年多的规范，一些激化的Twitter争论和其他的对话，响应图像终于登陆，并且有了声音。这真的很刺激对吧？人们一直在为此努力奋斗一段时间，我们已经达到了在现代浏览器中可以使用它们的程度。所以人们很兴奋，他们想去使用它，这是设计师和开发人员长期以来的一个挫败点。然而，当我看着它的反应，它实际上让我想起了我最喜欢的卡通人物，怀尔·E·土狼。我爱狼有很多原因。他坚持对吗？坚持现在是件大事。坚持和追逐跑路者，尽管事实上他从来没有追上跑路者，除了一次，那是我认为人们不知道的事情。1980年，在一部名为《汤或音速》的漫画中，怀尔·E·郊狼在追了51年后，终于抓住了他，但没有成功。我想让你看看那一刻现在。是的! 51年了！所以我确实觉得这就是网页设计师和开发人员在多年来为响应图像寻找某种解决方案之后的感受。突然间，他们开始看着它，他们就像"我们做了什么"，对吗？就像看所有这些加价，这是一个巨大的公路赛跑者，我们刚刚抓到。你可以在博客上看到这一点，人们说"这太复杂了。你能想象在300张图片上这样做吗？"或者"这些新的响应图像系统有很多问题。我没有时间去列举这些错误的方式？就像这就是反应，我明白了。我明白这一点是因为谁能忘记背景渐变和渐变是多么的复杂，事实上它们如此复杂意味着它们永远不会被采用，我们只是不在上面使用CSS渐变网络。实际上是的，对吧？就像我们最终吸收了这种复杂性。我认为我们的直觉反应和对图像的排斥并不是因为它很复杂，因为任何时候有新的加价，我们都需要时间去学习。我认为这是因为我们认为图像非常简单。图像从来就不简单。从网络诞生之初起，它们就一直很困难。回到我们刚开始设计网页的时候，我们不得不担心Windows和Mac共享颜色空间中的216种网络安全颜色，我们必须确保图像适合这个颜色空间，否则它们将无法正确显示。这促使林达·温曼Weinman.com网站1996年写了一本关于如何通过网络传递图像的书。当时是258几页。那个第二年，这还不够，所以她创作了第二版447页。她从这幢楼走了林达网然后以数百万美元或数十亿美元的价格卖给LinkedIn。所以我很有希望在这里我也能开创同样的亿万富翁之路。但图像总是很复杂的。即使是现在，我们的图像压缩方式，以及基于是否存在大量视觉渐变或线与线之间的差异（无论是垂直还是水平）而进行的不同压缩，都会产生很大的差异。我们必须承认事情有点复杂。但今天我想说的是，你可以用这些工具来决定你的图像应该如何工作，以及如何从我们现有的响应图像中选择正确的工具。为了做到这一点，我们必须首先讨论一些用例。因此，负责这项工作的responsiveimages社区小组创建了一系列与responsive images相关的用例，但我只是将其缩小到两个。分辨率切换我认为最重要的两个用例是分辨率切换，这是一个想法，你有一个单一的图像，你想显示不同的大小，根据视图端口的大小，基于设计，基于显示密度。这些特征。但图像本身本质上是同样。艺术第二个用例是我们所说的艺术指导，有几个不同的例子。例如，这张奥巴马总统的照片是在汽车救助之后拍摄的，他在谈论汽车救助的成功。所以，如果我们在一个足够大的屏幕上，显示这个背景，知道他在一家工厂讲话，是很有意义的。但如果我们简单地缩小这个形象，就很难认出是谁在说话。如果我们真的离演讲者近一点，这样你就可以了解细节了。这是艺术指导的一种形式。但它不一定要修剪。不仅仅是裁剪这是诺基亚浏览器网站。实际上，它与波士顿环球网站（bostonglobe）在同一周发布，我认为它是响应式设计工作的开创性作品之一。设计师Bryan和Stephanie Rieger谈到他们希望能够展示诺基亚浏览器的chrome。所以当他们在一个足够宽的屏幕上时，他们会使用图像的横向版本，对吧？他们想展示所有这些作品。但是当图像缩小时，这个版本会变得非常小以至于你看不到chrome。你看不到细节，所以他们最终制作了一个裁剪过的肖像版。这是艺术指导的另一个版本。艺术指导：带有文本的图像我们看到的最常见的艺术指导例子是在图像中嵌入了文本。CB2从他们的主页上得到了这张图片，他们在宽屏上有三张照片，还有邮票和一些文字，还有一些商标，但在小屏幕上，他们把照片换成了两张照片，只有商标，没有文字。如果他们缩小它会变得太小。现在这不是一个响应式的设计，但是你可以看到他们如何改变小屏幕上的图像。自由人是一个购物网站，花了很多时间在艺术指导上。每天他们的网站上都有新的图片。他们的所作所为有点疯狂。正因为如此，他们实际上无法花时间去弄清楚如何在图片上覆盖文本。所以他们每天都会创建这些新的图像，但是如果他们只是简单地缩小它，你就无法阅读文本，所以他们创建了图像的另一个版本。我们知道你不能阅读文本，因为如果你真的点击那张照片或点击那张照片，你会被带到这个页面，他们实际上只是缩小了它，你无法阅读。

总是被要求的，所以尽管他们在主页上做的不同，实际上在实际的目录页面上他们做的不同显示出这个问题。这是两个用例。人们所拥有的用例中90%的时间是分辨率转换用例。所以我想谈谈你如何决定何时使用哪种响应图像标准。首先我们要从一个图像元素开始。始终需要图像元素。我对图像元素的看法是，它是一个盒子，所有这些新的响应图像标准都放在这个盒子里。不管是图片、源集或大小，不管应用了哪些规则，它们最终都会最终出现在图像元素上。事实上，如果您查看source属性并观察当前源代码的变化，您可以在JavaScript中看到这一点。在这种情况下，picture元素中的媒体查询正在应用。现在我要问的第一个问题是，如果你有一个图像元素，你还需要什么吗？如果你有一个固定宽度的设计，你没有，对吗？图像元素足够。或者在某些情况下，甚至在一个反应灵敏的设计这是彩虹托儿所，这真的伟大和美丽的英国托儿所。他们有一个伟大的设计和响应的设计，他们有我们在许多网站上看到的东西，对吗？底部的小图标代表所有的社交订阅源。现在有三个图标是SVG，其中一个是PNG。它们从最小的版本到最大的版本都没有明显的不同。在这种情况下，我们只需要一个来源。当我们开始看高密度显示器的时候，事情就不同了，对吧？这就是srcset的作用，定义多个源的能力。所以srcset会将一个属性添加到image元素中，一个逗号分隔的源列表。第一个处理高密度显示器的版本之一是处理他们称之为"x"描述符或显示密度描述符，因此在本例中我们有两个图像。一个是1x图像，一个是2x图像，基本上浏览器根据显示密度进行选择。别紧张，对吧？好吧，那我们就开始这样了。现在这个页面有一个巨大的图像。实际上1x是256k，2x是508k，所以如果这就是我们提供的全部，对于移动设备上的人来说就太大了。我们需要更多的源文件。谢天谢地srcset实际上解决了这个问题