自从EthanMarcotte在2010年开始讨论响应式网页设计以来，开发人员和设计人员就竞相寻找处理响应式图片的方法。这确实是一个棘手的问题，因为我们在多个设备宽度上为同一网站使用相同的图像源。您是否愿意在大型显示器上显示模糊、马赛克式的图像？你愿意在你的手机上加载一个巨大的（虽然更漂亮）图像吗？这个问题是两难的。一群来自响应问题社区组(RICG)的聪明人致力于通过将图片元素和srcset以及sizes属性作为HTML5.1规范草案的一部分来解决这个难题。因为我们无法预测用户将在何处以及如何访问我们的网站，所以我们需要浏览器本身根据情况选择最佳图像。新规范将解决以下问题：Selectionbasedondevice-pixel-radioSelectionbasedonviewportSelectionbasedonArtdirection（艺术设计）Selectionbasedonimageformat在这个规范中，img元素添加了两个新属性：srcset和sizes.srcset用于声明一组图像源，浏览器根据我们用描述符指定的标准选择图像。描述符x表示图像的像素密度，描述符w表示图像的宽度；浏览器使用此信息从列表中选择合适的图像。sizes属性为浏览器提供了要显示的图像的尺寸信息。当srcset使用w描述符时，必须包含此属性。这种方法特别适用于可变宽度的图像，稍后我将对此进行更详细的讨论。我们现在可以根据用户的视口提供不同质量或艺术方向的图像，而无需求助于复杂的服务器端设置。响应式图像将成为HTML规范的重要组成部分，所有浏览器最终都会支持这一解决方案。固定宽度图像：基于设备像素比的视网膜屏幕选择的广泛采用使得不仅需要考虑屏幕分辨率，还需要考虑像素密度。视网膜屏幕、4K显示器、UltraHD——它们都比相同尺寸的标准分辨率显示器包含更多像素。更多像素=更清晰的图像。有些图像无论屏幕大小如何，总是以固定宽度显示——比如网站标志或人物头像，也就是说，需要根据设备像素比来选择。浏览器会根据设备像素比选择加载哪张图片。srcset属性列出了浏览器可以选择加载的源图像池，并且是一个逗号分隔的列表。x描述符表示图像的设备像素比。浏览器使用此信息根据操作环境选择适当的图像。不理解srcset的浏览器会直接加载src属性声明的图片。网站logo固定宽度一个无论视口的宽度如何，始终保持相同宽度的图像示例。然而，与内容相关的图像通常需要响应，并且它们的大小通常会随着视口而变化。对于这样的图像，有更好的处理方法。可变宽度图像：基于视口选择对于可变宽度图像，我们使用带有w描述符和sizes属性的srcset。w描述符告诉浏览器列表中每个图像的宽度。sizes属性是两个值的逗号分隔列表。根据***规范，如果srcset中的任何图像使用w描述符，则必须设置sizes属性。sizes属性有两个值：第一个是媒体条件；第二个是源图像大小值，它决定了图像在特定媒体条件下的宽度。需要注意的是，源图片大小值不能使用百分比，vw是唯一可用的CSS单位。在上面的例子中，我们告诉浏览器让图片的宽度等于视口的宽度，当视口的宽度小于400像素宽度。当视口宽度小于960px时，使图像宽度为视口宽度的75%。当视口大于960px时，使图像的宽度为640px。如果你对vw不熟悉，可以看看TimSeverien对viewportunits的详细解释。浏览器使用srcset和sizes信息来选择具有指定条件的图像。如果浏览器的视口为600px，则图像最有可能以75vw的宽度显示。浏览器会尝试加载第一张大于450像素（600*0.75）的图片，即uswnt-480.jpg。如果我有一个dpr为2的Retina显示器，浏览器将尝试加载大于900像素(600*0.75*2)的第一张图像，即uswnt-960.jpg。我们无法确定要显示哪个图像，因为每个浏览器都有不同的算法来根据我们提供的信息选择合适的图像。（译者注：srcset和size列表是给浏览器的建议（hint），不是指令。比如设备像素比（dpr）为1.5的设备也可以使用1x或者2x的图片，这取决于浏览器它的能力、网络等）前两个例子显示了不同质量的相同图像，只有srcset属性就足够了。不要担心旧浏览器，旧浏览器会将其视为普通图像并从src加载它。如果你想以不同的宽度显示略有不同的图像，例如在较窄的屏幕上只显示图像的关键部分，请使用picture元素。picture:SelectbasedonArtdirection（艺术设计）picture元素就像一个图像及其来源的容器。浏览器仍然需要img元素来表示需要加载图像，如果没有img，则不会渲染任何内容。source为浏览器提供了要显示的图像的替代版本。基于美术设计选择的适用场景是：需要在特定的断点显示特定的图像。使用picture元素可以毫无歧义地选择图像。在此示例中，当视口大于960像素时，它将加载图像的横向版本(ticker-tape-large.jpg)。当视口宽度大于575像素时，浏览器加载图像的裁剪纵向模式版本(ticker-tape-medium.jpg)。当宽度小于575px时，加载的图像(ticker-tape-small.jpg)已被裁剪以仅聚焦于一名玩家。像素向后兼容；不支持图片元素的浏览器将显示img。图片的所有标准属性（比如alt），都应该作用于img而不是picture。来源：基于图像格式的选择近年来，出现了一些新的图像格式。这些新的图像格式保证了更好的图像质量和更小的文件大小。听起来不错，但残酷的事实是所有浏览器都不支持任何新格式。Google的WebP运行良好，但只有Chrome和Opera原生支持它。JPEG-XR，最初被称为高清照片，是微软发布的一种专有图像格式，只有InternetExplorer支持。如果您想了解更多信息，可以查看ZoltanHawryluk对这些新格式的深入了解。source的type属性用于指定每张图片的MIME类型，浏览器将选择具有受支持的MIME类型的第一个源。源的顺序很重要，如果浏览器不能识别所有图像类型，它将回退到原始img元素。这些东西现在还能用吗？在撰写本文时，Firefox、Chrome和Opera的最新稳定版本均支持图片。Safari和IE本身都不支持图片。srcset的情况稍微好一些，Firefox、Chrome和Opera最新稳定版完全支持，Safari8和InternetExplorerEdge部分支持，x描述符可以根据分辨率切换，w描述符不行支持的。Safari9已经完全支持srcset（译者注）。有很多polyfill可以解决支持问题，最著名的可能是ScottJehl的picturefill。目前我（原作者）在我自己的网站上使用AlexanderFarkas的respimage。目前的情况是，我们已经就响应式图片的解决方案达成了共识，并且这些解决方案正在逐步被各大浏览器实现。尽管规范仍在完善中，但原生响应式解决方案越来越近了。原文地址：UsingResponsiveImages(Now)感谢阅读。本文版权归腾讯ISUX所有。转载请注明出处。违者将受到调查。谢谢您的合作。注明来源格式：腾讯ISUX（https://isux.tencent.com/responsive-image.html）
