我已经多次阅读了关于这个问题的内容，而且它也发生在我的项目中。以下是我目前对srcset和sizes属性所了解到的介绍。
有两种不同的可能性来使用srcset属性（来源w3c：http://w3c.github.io/html/semantics-embedded-content.html#device-pixel-ratio）：
- 基于设备像素比选择当图像的渲染尺寸固定时
这是一种简单可靠的使用srcset的方式。您只需要说：如果目标设备的设备像素比大于x，则显示具有以下更高分辨率的图像。
x描述符不适用于图像的渲染尺寸取决于视口宽度（基于视口的选择），但可以与艺术方向一起使用。
例如：
<img src="/uploads/100-marie-lloyd.jpg"
srcset="/uploads/150-marie-lloyd.jpg 1.5x, /uploads/200-marie-lloyd.jpg 2x"
alt="" width="100" height="150">
- 基于视口的选择
这种方法允许您根据视口的大小显示不同的图像大小。这是您在示例中主要使用的方法。
可以使用 srcset 和 sizes 属性，使用 w 描述符， 提供多个仅在大小上有所不同的图像（较小的图像是较大图像的缩小版本）。
简单示例：
<h1><img sizes="100vw" srcset="wolf-400.jpg 400w, wolf-800.jpg 800w, wolf-1600.jpg 1600w"
src="wolf-400.jpg" alt="The rad wolf"></h1>
更进一步：使用大小属性
Viewport-based选择和srcset的默认设置是，图像始终具有100%的宽度（100vw）。sizes属性提供了一个很好的可能性，可以告诉浏览器，在特定的屏幕宽度下，图像的宽度是多少。
sizes属性在30em和50em处设置布局断点，并声明这些断点之间的图像大小为100vw、50vw或calc(33vw - 100px)。这些大小不一定要与CSS中指定的实际图像宽度完全匹配。
用户代理将从sizes属性中选择一个宽度，使用第一个具有true值的项（括号中的部分），或者如果所有项都评估为false，那么使用最后一个项目（calc(33vw - 100px))。
示例:
<img sizes="(max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 100px)"
srcset="swing-200.jpg 200w, swing-400.jpg 400w, swing-800.jpg 800w, swing-1600.jpg 1600w"
src="swing-400.jpg" alt="Kettlebell Swing">
我希望有人能够为我解答一个问题：
如果使用srcset，客户端是否总是能够加载正确的图片？还是实际加载的图片也取决于处理能力和网络连接速度，正如一些人所说？我收到了有关在视网膜设备上加载低分辨率图像的投诉。
如何同时使用基于设备像素比和基于视口大小的选择？因为对于sizes中每个可能的大小，我可能需要定义一个200％尺寸的Retina图像以及一个非Retina图像。
而且：在srcset中使用不同的图像来适应不同的视口大小是否有意义，或者这是滥用srcset属性？如果可以同时使用基于设备像素比和基于视口大小的选择，则应该可以做到这一点。