艺术指导和分辨率切换（响应式图像）的 HTML 实现之间的区别

Question

我已经阅读了以下文章https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images 和一些类似的资源。

我无法理解为什么 - 从程序化的角度来看 - 艺术指导和分辨率切换之间有任何区别。对两者的解释不同，用于解决问题的 HTML 也不同。引自文章：

艺术指导：您希望为不同布局提供裁剪图像的问题...这可以使用<picture> 元素解决。

和：

分辨率切换：您希望将较小的图像文件提供给窄屏幕设备的问题，因为它们不需要像桌面显示器那样的大图像 这可以使用矢量图形（SVG 图像）和srcset 来解决和sizes 属性。

假设我有一个“横向”横幅，例如 2000 * 500 像素的图片，例如http://placehold.it/2000x500

在台式机/笔记本电脑屏幕上看起来不错。但在移动设备上，它看起来不正确，因为中心的内容（在本例中为文本，但可能是一组人的照片）不可见。所以我想这是艺术指导问题的一个例子？但它也属于分辨率切换的范畴，因为当一个较小的设备可以工作时，为什么有人想将一个 2000 像素宽的图像（具有大文件大小）下载到移动设备上？

那么就实现而言，我可以使用EITHER艺术指导或分辨率切换实现来解决它吗？为什么我需要两种不同的解决方案来做同样的事情？

例如-

<img srcset="banner-320w.jpg 320w,
         banner-480w.jpg 480w,
         banner-2000w.jpg 800w"
 sizes="(max-width: 320px) 280px,
        (max-width: 480px) 440px,
        800px"
 src="banner-2000w.jpg" alt="Banner">

这将在宽度超过 800 像素的任何物体上使用 banner-2000w.jpg 横幅，例如台式机/笔记本电脑和不同比例的图像（解决艺术指导问题）以及不同文件大小（解决分辨率切换问题）。

但同样的事情也可以使用picture 属性来完成，文章将其描述为艺术指导问题的解决方案：

<picture>
      <source media="(max-width: 320px)" srcset="banner-320w.jpg">
      <source media="(max-width: 480px)" srcset="banner-480w.jpg">
      <img src="banner-2000w.jpg" alt="Banner">
</picture>

谁能解释在什么情况下一种实现比另一种更好？在我看来，这两种实现都解决了这两个问题 - 还是不是这样？

Answer 1

虽然两者都做同样的事情（选择不同的图像来获取和显示），但每个用例的最佳语法是不同的。

分辨率切换

分辨率切换可优化具有较低分辨率显示器的用户的带宽消耗。 一个用例是当您有一个图片库时：使用桌面显示器（高分辨率）的用户获取大（以带宽字节为单位）图像，而移动用户（低分辨率）获取较小的图像。 对于移动用户来说，高分辨率图像并没有什么不同，因此他们通过网络提取的字节数更少。

你提到的页面有这个sn-p，它使用改进的语法进行分辨率切换：

<img srcset="elva-fairy-320w.jpg,
             elva-fairy-480w.jpg 1.5x,
             elva-fairy-640w.jpg 2x"
     src="elva-fairy-640w.jpg" alt="Elva dressed as a fairy">

srcset 属性的NUMBERx 部分是实际显示像素与 CSS 像素的比率（越高表示显示效果越好）。

艺术指导问题

在艺术指导问题中，您针对用户体验（而不是带宽）进行优化：您有几张图像，可能具有相同的分辨率，但裁剪不同或具有不同的纵横比。

这用于强调不同显示器上的内容：如果您有一张风景图像，中间有一只狗，桌面用户可能不会有看到狗的问题。 然而，移动用户的屏幕更小，所以狗可能只是一个小点。 这类似于使用投影仪呈现计算机屏幕时通常发生的情况，您需要调整字体大小而不是分辨率。

再次使用链接文章中的示例：

<picture>
  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>

请注意，这使用媒体查询根据视口选择图像（不是显示与 CSS 像素的比率）。

初始img 示例

虽然可以解决这两个问题，但解决方案并不明显。 但是，使用 <picture> 元素可以提供更容易理解的语法：

<picture>
  <source media="(max-width: 799px)"
          srcset="elva-480w-close-portrait.jpg
                  elva-480w-close-portrait-medium.jpg 1.5x
                  elva-480w-close-portrait-medium.jpg 2x">
  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>

Answer 2

使用<img> 和srcset 属性将为浏览器提供信息以决定选择什么图像。这有助于显示 不同尺寸的相同图像内容（分辨率切换）原因Jason Grisby states in a blog post for Cloud Four：

当您在<img> 元素上使用srcset 和sizes 属性时，您提供的信息是浏览器可以用来根据一系列因素做出明智的决定，决定哪种图像适合用户你不知道的。

作为网页设计师或开发人员，您无法知道用户当前拥有多少带宽，或者他们是否声明了对所需图像密度的某种偏好。如果我们通过srcset 和sizes 向浏览器提供信息，那么浏览器可以就适当的图像源做出更明智的决定。

但是，如果使用<picture> 和媒体查询，浏览器别无选择来选择要显示的图像。更多来自 Grigsby 的博文：

当您为来源指定媒体查询时，您是在向浏览器提供必须遵循的规则。浏览器无权根据用户偏好、网络等因素对下载内容做出明智的决定。

您应该使用权力来指定要谨慎下载的图像。事实上，你应该只在解决艺术指导时使用它，而不是在分辨率切换时使用它。

Answer 3

我认为这个答案会让你的想法变得清晰。正如 Chris Coyier 在他的推特页面中所说：srcset/sizes = 帮助浏览器决定哪个最好的信息。图片 w 媒体属性 = 明确 只做这个。我在这里看到的主要区别是这条评论。您可以从此链接获得更多内容 - https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/