向观看者提供图像时，需要牢记几件事。

1. 保持图像比例与原始尺寸相同

我们这样做是为了防止图像歪斜并防止图像模糊。我们既可以保持尺寸比不变，也可以剪掉不合适的部分。

当使用一个<img>元素或类似的东西时，这是相当直接的，它只需要使用一个 setwidth或heightOR set max-widthor max-height。

然而，在全视口宽度图像的情况下，这有点复杂。有几种 CSS 方法可以做到这一点，其中最好的方法是background-size:cover文章中的第一个链接示例和Talkingrock 的回答秀。

此外，我们现在可以使用响应式图像规范中的功能，包括srcset和<picture>元素，这些功能非常有用。我稍后会在这个答案中讨论这个问题。

2. 仅向观看者提供他们需要的图像

为了更快地加载页面并防止用户需要传输更多数据，在最终用户需要时只为最终用户提供他们需要的图像非常重要。这意味着我们为他们提供与他们正在使用的视口大小相同或略大的图像，并等待加载在初始页面加载后才会立即看到的图像。

@media当我们使用背景图像时，我们可以通过使用查询来使用 CSS 提供更合适大小的图像。不在正在使用的媒体查询中的图像不会被加载。我建议使用至少三种照片尺寸（这意味着至少 3 次媒体查询），但多使用几张照片可能会提高性能。以下是一个示例，但它通常应该与站点布局的一些常规断点一致。

@media (max-width: 320px) { /* For phones (this breakpoint is the one I'm least sure about) */
    ... background-image(imageURLforPhones.png); ...
}
@media (min-width:501px) and (max-width: 1024px) { /* For tablets and such */
    ... background-image(imageURLforTablets.png); ...
}
@media (min-width: 1025px) { /* For large screens */
    ... background-image(imageURLforLargeScreens.png); ...
}

但是，让我们面对现实：我们不擅长选择断点，也不擅长在给定特定屏幕尺寸的情况下选择图像尺寸。如果我们能让有东西为我们“神奇地”做这件事，那不是很好吗？

好消息是，现在我们可以了！

使用响应式图像规范，我们可以让浏览器为我们决定所有这些，只要我们提供一点帮助。如此有用的srcset属性可以与一个<img>或一个<picture>元素一起使用。对于像我们在这里所做的分辨率切换，我们应该使用一个<img>元素。

srcset以下是完成其工作所需的 HTML 示例。有关更多信息，您可以阅读 Yoav Weiss 关于该主题的精彩文章。该示例是从中提取的。

<img src="cat_500px.jpg"
     srcset="cat_750px.jpg 1.5x, cat_1000px.jpg 2x"
     width="500" alt="lolcat">

_{旁注：如果您需要在某些视口尺寸下提供具有不同尺寸的相同图像，则可以使用该sizes属性。}

我并不是说使用srcset一定比使用 CSS 背景图像更好，我自己没有做足够的工作来肯定地说，但这可能是一种更好的方法。

此外，为了提高性能，我们可以“延迟加载”最初不可见的图像。这意味着我们会阻止它们最初加载，但在初始页面加载完成后立即开始加载它们。这样我们就可以让浏览者尽快看到页面，然后再填写一些细节。这是一种方法，我现在不会详细介绍。

3. 确保显示了您要显示的图像中的内容

如果我们有正确的尺寸和出色的性能，那就太棒了，但如果观众没有看到我们希望他们看到的东西，那就没有意义了。如果我们一直完整地显示图像，这不是问题，但如果我们必须裁剪图像，这可能是一个问题。

我们可以background-image使用 CSS 来裁剪 s ，方法是使用background-sizeand background-position（和排序的 using clip，但这通常用于更艺术、更复杂的形状）。具体细节会因图像而异，具体取决于其实施方式。

第二个选项是使用<picture>元素。当我们只希望显示图像的一部分时，我们会使用它，如此处所示，但这里有一个实践中的简单示例（摘自 Jason Grigsby关于此主题的精彩文章）。

<picture>
    <source media="(min-width: 45em)" srcset="large.jpg">
    <source media="(min-width: 32em)" srcset="med.jpg">
    <img src="small.jpg" alt="The president giving an award.">
</picture>

我想重申，如果你只需要做分辨率切换不要使用<picture>元素，只需使用<img>元素srcset。我们唯一需要这个<picture>元素的时候是为了这个艺术方向，意思是剪裁等。

还有可能在服务器端做一些裁剪，使用 SVG 蒙版，或者用 Canvas 做一些事情，但这有点超出了这个答案的范围。

其他一些注意事项

具体的断点不是那么重要。与所有响应式设计一样，尽我们所能为所有视口做到最好是很重要的，但是没有适合所有网站的媒体查询。

页面加载时间非常重要，图像可以大大减慢初始加载时间。确保您加载的图像将首先被立即看到，然后是其他图像。尝试防止图像（如 JPEG）在加载其余图像时显示图像的一部分。还要优化您的所有图像，使它们成为可能的最小文件大小，同时仍具有您所需的质量。

重要的是要记住，在大多数情况下，图像应该是附件，而不是必需品。我建议始终在没有图像的情况下测试网页的外观，以确保其可用。

注意：我们可以使用名为Picturefill的 polyfill来为不支持响应式图像规范的旧版浏览器提供服务。

阿斯普利拉，

虽然上述评论提出了非常好的技术要点，但我建议您针对特定客户定制您的工作，首先查看他们当前网站的 Google Analytics - 报告/技术/浏览器和操作系统/屏幕分辨率。这样，您将通过解决客户的特定需求而不是实施一般准则来明智地花费您的时间和客户的预算。实际上，我们有时不得不建议我们的客户不要仅仅因为他们的非桌面流量不能证明花费的合理性而进行完全响应式设计。

选择全宽浏览器图像尺寸的指南

我通过去年的研究以及过去几天针对这个特定用例的实验了解到了这些。

• 选择具有单个焦点或根本没有焦点的图像。

• 如果您想提供许多依赖于分辨率的图像，您的源图像文件将需要很大（至少 5000 x 5000）。

• 对于纵向版本，您应该使用9w:16h.

• 对于横向版本，您应该使用4w:3h.

• 在这两个图像中，都有一个内容安全区域，您可以保证可以看到图像的一部分，或者像克林贡语中所说的那样在首屏。

• 两个图像的内容安全区域，基于这五个纵横比：3:2、4:3、5:3、16:10& 16:9，大约是两个图像的前四分之三。

  

• srcset是实现响应式图像的圣杯。 <picture>将来可能会更好，但srcset现在是王道。查看Zach Saucier 的答案以获取更多信息。

这是我经过大量实验后创建的示例。

这些图像应覆盖几乎所有屏幕。调整预览面板的大小以查看不同的图像。后备应该是中档图像之一，但我链接到我获取图像的页面，而不是作为一种次要属性。

我试图保持这个答案简短（重写 3 次），即使我可以为我的断言提供理由，但我没有这样做，因为它会使这个答案膨胀很多。我希望您可以从上图中推断出理由，并从我的示例 jsFiddle 中查看证据。

在4:3屏幕上：

在超宽屏幕上：

在纵向手机上：

以下是一些您可能会觉得有用的附加信息。

屏幕尺寸统计

流行的屏幕尺寸各不相同，因此这里有一些统计网站按百分比、浏览器趋势、操作系统等列出屏幕尺寸使用情况。

1. http://www.w3schools.com/browsers/browsers_display.asp
2. http://www.netmarketshare.com/

英雄和大图像

对于 Hero 和其他大图像，存在一个很棒、简单的 CSS 解决方案。它是background-size:cover。它很有用，因为它覆盖了整个 div，而不会在不同的屏幕尺寸下扭曲图像，或者如果父 div 改变形状（更多/更少的文本......）。它通过剪切图像的位以保持适当的比例来工作，您还可以定位背景，以便始终显示重要部分（中心中心，右下角......）。

另一个优点是它将图像显示为背景，因此可以轻松地将文本和其他信息添加到 div 中。它也可以用作全尺寸背景。这是一个使用 background-size:cover 作为全屏背景的JSFiddle 示例，另一个使用Hero div的示例。调整 JSFiddle 窗口的大小，并编辑 CSS 定位以查看它是否有效。

background-image:url(http://i.imgur.com/OaE8VAj.jpg);
background-repeat:no-repeat;
background-position:bottom right;
background-size:cover;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;

对Background-size (CanIUse.com)的浏览器支持非常好，这里是针对IE7 和 IE8的修复。

对于所有不同的设备显示尺寸（台式机/平板电脑/手持设备），一种流行的解决方案是创建一个响应式站点，该站点可以重新定位以适应从大屏幕电视到手持设备的各种屏幕尺寸。如果您对此感兴趣，这里有一个很好的中级教程：http ://www.elated.com/articles/responsive-web-design-demystified/ 。

响应式设计适用于网格布局，如果网站是基于像素的，则有一个公式可以将像素大小转换为等效百分比。使用术语“响应式 12 列网格”和“响应式列网格计算器”进行快速搜索，可以找到许多有用的资源，例如响应式 12 列线框、计算器等。这是一个例子： http: //onepcssgrid.mattimling.com/