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

问题描述 投票：1回答：2

我已经阅读了以下文章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

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

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

例如 -

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

有人可以解释在什么情况下一个实现比另一个好？在我看来，两种实现都解决了这两个问题 - 或者情况并非如此？

html css responsive-design
2个回答
2
投票

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

Resolution Switching

分辨率切换可优化具有较低分辨率显示的用户的带宽消耗。一个用例是当你有一个图像库时：具有桌面显示（高分辨率）的用户获取大（带宽字节）图像，而移动用户（低分辨率）获取较小的图像。对于移动用户来说，高分辨率图像没有什么区别，因此它们在网络上消耗的字节更少。

您提到的页面包含使用改进的语法进行分辨率切换的代码段：

<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像素的比率（更高意味着更好的显示）。

Art Direction Problem

在艺术方向问题中，您可以针对用户体验进行优化（与带宽相对）：您有多个图像，可能具有相同的分辨率，但裁剪方式不同或纵横比不同。

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

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

<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像素比率）。

The initial img example

虽然有可能用这个来解决这两个问题，但解决方案并不明显。但是，使用<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>
0
投票

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

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

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

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

为源指定媒体查询时，您将为浏览器提供必须遵循的规则。浏览器无权根据用户偏好，网络等做出有关下载内容的明智决定。

您应该使用权力来决定下载哪些图像。事实上，你应该只在解决艺术方向时使用它，而不是用于分辨率切换。

-2
投票

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.