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

Question

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

我无法理解为什么 - 从编程的角度来看 - 艺术指导与解决方案切换之间存在任何差异。给出的解释与用于解决问题的HTML不同。引自文章：

  

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

和

  

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

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

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

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

例如 -

sizes

这将在超过800像素宽的任何地方使用<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属性来完成，这是文章描述的艺术方向问题的解决方案：

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>

Answer 2

使用<img>和srcset属性将为浏览器确定要选择的图像提供信息。这有助于显示 由于Jason Grisby states in a blog post for Cloud Four：

而在不同尺寸（分辨率切换）上显示相同的图像内容

  

当您在srcset元素上使用sizes和<img>属性时，将提供浏览器可用来做出明智决定的图像，以供用户做出决定基于您不知道的一系列因素。

     

作为一名Web设计人员或开发人员，您无法知道用户当前拥有多少带宽，或者他们是否针对他们想要的图像密度声明了某种偏好。如果我们通过srcset和sizes向浏览器提供信息，则浏览器可以对相应的图像源做出更明智的决定。

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

  

当您指定媒体查询源时，您正在为浏览器提供必须遵循的规则。浏览器无权根据用户的喜好，网络等情况明智地决定要下载的内容。

     

您应该使用电源来指示要少量下载的图像。实际上，您仅应在解决美术指导时使用它，而不要在分辨率切换上使用。

Answer 3

我认为这个答案将使您的想法更清楚。正如克里斯·科耶尔（Chris Coyier）在Twitter上的页面所说：srcset / sizes =帮助浏览器确定最佳选择的信息。带有媒体属性的图片=明确的仅此内容。我在这里看到的主要区别是此评论。您可以从此链接获得更多内容-https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/