HTML5 srcset、尺寸和艺术指导
HTML5 srcset, sizes & Art Direction
据我所知，srcset 和 sizes 属性更侧重于根据设备的尺寸和分辨率应用适当缩放的图像。
似乎无法将这些属性用于 select 基于屏幕尺寸的替代图像，例如裁剪或方向不同的图像。
这样理解正确吗？这是否意味着我们必须等待 picture 元素得到广泛支持才能完成此任务？
你是对的，srcset 和 sizes 只是为 "same" 图像提供不同的分辨率替代方案 - 不保证将选择哪个资源。
如果您想提供经过裁剪或按比例不同的替代方案，保证与您的响应断点相匹配，那么 <picture> 就是您要找的。
就支持而言，<picture> 在 Chrome 和 Firefox 中得到完全支持，很快在 MS Edge 中得到支持，但在 Safari 9 中尚不支持。
同时，您可以使用 picturefill 将该支持添加到不支持的浏览器。
就个人而言，我已经使用 w-描述符和 srcset 根据可用 space 的宽度显示各种图像。
它可能看起来相当粗糙，但它对我有用 - 我编辑图像，使其成为 "art-directed" 一些常见的断点 - 有效地将它变成许多不同的图像。
然后，根据代理屏幕的大小，浏览器几乎总是会选择我之前确定的最合适的图像。
对于我的方法，我没有使用 size、picture 或任何其他 属性。
像这样简单的代码似乎有效：
<img srcset="room-and-person.jpg 3200w, person-face-only.jpg 1600w" src="image.jpg" alt="an image" />
据我所知，srcset 和 sizes 属性更侧重于根据设备的尺寸和分辨率应用适当缩放的图像。
似乎无法将这些属性用于 select 基于屏幕尺寸的替代图像，例如裁剪或方向不同的图像。
这样理解正确吗？这是否意味着我们必须等待 picture 元素得到广泛支持才能完成此任务？
你是对的，srcset 和 sizes 只是为 "same" 图像提供不同的分辨率替代方案 - 不保证将选择哪个资源。
如果您想提供经过裁剪或按比例不同的替代方案，保证与您的响应断点相匹配，那么 <picture> 就是您要找的。
就支持而言，<picture> 在 Chrome 和 Firefox 中得到完全支持，很快在 MS Edge 中得到支持，但在 Safari 9 中尚不支持。
同时，您可以使用 picturefill 将该支持添加到不支持的浏览器。
就个人而言，我已经使用 w-描述符和 srcset 根据可用 space 的宽度显示各种图像。
它可能看起来相当粗糙，但它对我有用 - 我编辑图像，使其成为 "art-directed" 一些常见的断点 - 有效地将它变成许多不同的图像。
然后，根据代理屏幕的大小，浏览器几乎总是会选择我之前确定的最合适的图像。
对于我的方法，我没有使用 size、picture 或任何其他 属性。
像这样简单的代码似乎有效：
<img srcset="room-and-person.jpg 3200w, person-face-only.jpg 1600w" src="image.jpg" alt="an image" />