srcset元素的img属性可帮助作者调整其网站以进行高分辨率显示，以便能够使用代表同一图像的不同资源。
图片元素可帮助作者根据媒体查询和/或对特定图像格式的支持，控制用户代理向用户呈现的图像资源。
这两个都使作者能够控制基于设备分辨率显示图像;从而使图像响应。那么它们之间的主要区别是什么？
我确实在picture元素draft上找到了一些示例，但仍然无法理解其中的差异。以下是示例：
使用srcset属性：
<img src="pic1x.jpg" srcset="pic2x.jpg 2x, pic4x.jpg 4x"
alt="A rad wolf" width="500" height="500">
使用picture元素：
<picture>
<source media="(min-width: 45em)" srcset="large.jpg">
<source media="(min-width: 18em)" srcset="med.jpg">
<img src="small.jpg" alt="The president giving an award.">
</picture>
答案 0 :(得分：12)
free和srcset都做了大致相同的事情，但有一个微妙的区别：
picture 指示浏览器应使用的图片，而picture 为浏览器提供了一个选择。可以使用很多东西来选择此选项，例如视口大小，用户首选项，网络条件等。希望将来浏览器在选择合适的图像时会变得更聪明，更智能。对srcset的支持非常好，almost all current browsers或多或少支持它。 srcset元素的情况为little bit worse。
答案 1 :(得分：10)
来自http://usecases.responsiveimages.org/：
srcset属性允许作者定义各种图像资源和“提示”，以帮助用户代理确定要显示的最合适的图像源。给定一组图像资源，用户代理具有选项，可以跟随或覆盖作者的声明，以根据显示密度，连接类型，用户首选项等条件优化用户体验
picture元素在srcset的基础上，该规范定义了一种声明性解决方案，用于根据不同的特征（例如，格式，分辨率，方向等）对图像的多个版本进行分组。这允许用户代理基于用户代理的环境条件选择最佳图像以呈现给最终用户，同时还提供直接＆＃34;艺术直接＆＃34; ;图像。
环境条件是CSS媒体特征（例如，像素密度，方向，最大宽度）和CSS媒体类型（例如，打印，屏幕）。
艺术指导意味着将图像转换为最佳匹配可用空间。例如，在房子前面的狗的风景图像可以保留在典型的桌面屏幕上，但在狭窄的人像移动屏幕上，我们可能想要裁剪房子的侧面并专注于狗。
picture使用CSS媒体查询，而srcset使用image candidate strings：宽度描述符，例如1024w或像素密度描述符，例如2x。
目前的浏览器广泛支持这两种规格，IE，旧Android浏览器和Opera mini除外。过时的浏览器（即Safari 7到9.2）更好地支持srcset，请参阅http://caniuse.com/#feat=srcset。
答案 2 :(得分：3)
图片元素草案的第1.3条Relation to srcset中描述了这种关系。描述有点模糊，因为它没有说明它与之比较的内容，但是出于实际目的，W3C编辑的草案The srcset attribute将srcset的设计描述为一个单独的属性（作为对立面）它在提议的picture元素中的不同作用。
这两份草案旨在以不同的方式解决同样的问题。 srcset属性允许您指定带有特殊符号的图像URL列表，用于指示它们的宽度或像素密度。 picture元素使用CSS媒体查询用于相同目的。
答案 3 :(得分：0)
我喜欢reddit的incompletebreadstick中的以下解释：
<picture>将始终根据需要下载所有图像源，并动态显示当时正确的图像源（即使用户更改了页面尺寸），而<img>则使开发人员的需求略微减少灵活使用哪种浏览器，使浏览器可以决定最佳选择。尽管<picture>和<img>的行为在今天可能非常相似，但目的是<img>的字段建议正确的选择，但浏览器可能会将带宽和用户偏好等其他因素纳入考虑范围帐户。也许将来，浏览器可能会为用户提供“通过下载最小的源映像来节省带宽”的选项。这会影响<img>，但不会影响<picture>。
<pictures>的主要用途是 Art Direction 。这是您要在不同条件下显示形状不同的图片的时候。也许您想在移动设备上显示正常风景图片的裁剪后的正方形版本，或者仅在较小的屏幕上缩小图片不起作用（例如，它包含的小文本在缩放时将变得不可读）。如果您尝试使用<img>完成此操作，而用户尝试调整浏览器的大小或旋转手机，则可能无法下载新图像可能，而且看起来很恐怖。
例如，您还可以尝试向支持它们的浏览器显示更现代的图像格式。
<picture>
<source type="image/svg+xml" srcset="pyramid.svg">
<source type="image/webp" srcset="pyramid.webp">
<img src="pyramid.png" alt="regular pyramid built from four equilateral triangles">
</picture>
编辑：我以前曾暗示过<img>不会在调整浏览器大小时更新源图像。应该，但不能保证它像<picture>一样。