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

Question

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

我不明白为什么 - 从编程的角度来看 - Art Direction和Resolution Switching之间有什么区别。对两者给出的解释不同，用于解决问题的 HTML 也是如此。引自文章：

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

和：

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

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

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

因此，在执行方面，我可以使用无论是艺术指导或分辨率切换的实现来解决它？为什么我需要两种不同的解决方案来做同样的事情？

例如 -

<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">

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

但同样的事情也可以用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

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

分辨率切换

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

您提到的页面有以下代码段，它使用改进的语法进行分辨率切换：

<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">

该属性的NUMBERx部分srcset是实际显示像素与 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>