到目前为止，我已经经常阅读这个问题，这也适用于我自己的项目。以下介绍了迄今为止我发现的关于srcset和尺寸属性的内容。
如何使用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">
此方法允许您根据视口的大小显示不同的图像大小。这是您在示例中主要使用的方法。
使用w描述符可以使用srcset和sizes属性， 提供仅在尺寸上变化的多个图像（较小的图像） 图像是较大图像的缩小版本。）
简单示例：
<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>
更进一步：使用尺寸属性
基于视口的选择和srcset的默认设置是，图像的宽度始终为100％（100vw）。 sizes属性可以告诉浏览器，在某个屏幕宽度下图像的宽度是如何。
sizes属性设置30em和50em的布局断点， 并声明这些断点之间的图像大小为100vw， 50vw，或calc（33vw - 100px）。这些尺寸不一定非必须 与CSS中指定的实际图像宽度完全匹配。
用户代理将使用size从sizes属性中选择一个宽度 带有（括号中的部分）的第一个项目 评估为真，或使用最后一项（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客户端始终加载正确的图像吗？或者实际加载的图像还取决于处理能力和互联网连接速度，正如一些人所说的那样？我抱怨视网膜设备会加载分辨率较低的图像。
如何同时使用：基于设备像素比和基于视口的选择？因为对于每种可能的尺寸大小，我可能想要定义 具有200％尺寸的视网膜图像以及非视网膜图像 。
此外：在srcset中为不同的视口大小使用不同的图像是否有意义，或者是否误用了srcset属性？如果可以组合基于设备像素比率和基于视口的选择，这也应该是可能的。
答案 0 :(得分：1)
我可以依赖srcset客户端总是加载正确的图像吗？ 答案是不。此外，您永远不会知道用户将上传的图像的尺寸，除非您想使用Javascript代码检查，然后限制用户上传正确的尺寸。但这不会太用户友好。
同样，您可能希望实现一种算法，始终将图像大小调整为您想要的特定大小，而不会扭曲质量，因此您不必将不同的图像传递给srcset，只需使用src attr即可。对于网速较慢的用户来说，这可能是一个优势。
在srcset中为不同的视口大小使用不同的图像是否有意义，或者这是对srcset属性的误用？ 关键是你想要处理多少个设备Viewport。如果为不同的视图端口指定不同的图像大小和维度，则可能无法一次性全部定位，特别是当您在开发时没有处理的新设备可用时。