广东企业网站开发:响应式图像完成正确的指南和srcset

2019.08.12 mf_web

186

图像是网络上最重要的信息之一,但在网络的25年历史中,它们根本不具备适应性。关于它们的一切都固执地固定了:它们的大小,形式和作物都是一成不变的src。

“到目前为止我所说的一切都可以概括为:制作适应性强的页面......设计适应性强的页面是设计可访问的页面。也许网络的巨大潜力远未实现,无论是否存在困难,都可以获取信息。“

- John Allsopp,网页设计之道

当高分辨率屏幕和响应式布局像网络一样冲击网页时,HTML作者开始真正感受到这些限制。作者 - 希望他们的图像在巨大的布局和高分辨率的屏幕上看起来清晰 - 开始向每个人发送越来越大的资源; 图像文件的平均大小膨胀 ; 非常聪明的人称响应式网页设计“工作缓慢 ”。

广东企业网站开发图像是实现真正适应性和高性能响应页面的头号障碍 - 可以向上和向下扩展的页面,有效地根据手头的浏览上下文的约束和可供性来定制自己。

那即将改变。

该元素的最新规范<picture>是多年来关于如何使图像适应的争论的结果。它为作者提供了语义方法来对同一图像的多个版本进行分组,每个版本都具有使其或多或少适合特定用户的技术特征。新规范已达成广泛共识,并在我输入时在Chrome,Opera和Firefox以及Edge(链接)中实施。

现在是时候开始学习这些东西了!

在我们获得任何(闪亮的!新!)标记之前,让我们看一下浏览环境变化的相关方式,即我们希望图像适应的方式。

  1. 我们的图像需要能够在不同的device-pixel-ratios上清晰呈现。我们希望高分辨率屏幕能够获得高分辨率图像,但我们不希望将这些图像发送给不会看到所有这些额外像素的用户。我们称之为device-pixel-ratio用例。

  2. 如果我们的布局是流动的(即响应),那么我们的图像将需要挤压和拉伸以适应它。我们称之为流体图像用例。

  3. 请注意,这两个用例密切相关:为了解决这两个问题,我们希望我们的图像可以多种分辨率使用,以便有效地扩展。我们将调用同时处理可变大小图像用例的两个问题

  4. 有时我们会想要以超越简单缩放的方式调整我们的图像。我们可能想要裁剪图像,甚至巧妙地改变它们的内容。我们称之为艺术指导用例。

  5. 最后,不同的浏览器支持不同的图像格式 我们可能希望向可以呈现它的浏览器发送一个花哨的新格式(如WebP),并在没有的浏览器中回退到可靠的旧JPEG。我们称之为类型切换用例。

新<picture>规范包括所有这些情况的功能。我们一个一个地看看它们。

使用srcset的响应式图像
在各种分辨率下重新排列图像相对容易,但是,根据用户的分辨率加载不同的图像(并且仅加载它们)是非常困难的。好了,不再了。(图片来源)

该device-pixel-ratio用例

让我们简单地开始,使用固定宽度的图像,我们想要适应不同的device-pixel-ratios。为此,我们将使用新规范为我们分组和描述图像源的第一个工具:srcset属性。

假设我们有两个版本的图像:

  • small.jpg (320×240像素)

  • large.jpg (640×480像素)

我们只想发送large.jpg给具有高分辨率屏幕的用户。使用srcset,我们会像这样标记我们的图像:

<img srcset="small.jpg 1x, large.jpg 2x"
   src="small.jpg"
   alt="A rad wolf" />
复制

该srcset属性采用以逗号分隔的图像URL列表,每个图像URL都有一个x描述device-pixel-ratio该文件所针对的描述符。

那src是不明白的浏览器srcset。的alt,当然,包括对于完全不渲染图像的浏览器。一个元素和三个属性为我们提供了一个在高分辨率设备上看起来清晰的图像,并且一直有效地降级到文本。不是太寒酸!

流体和可变大小的图像用例

标记不会做的是在流畅的布局中有效地挤压和拉伸我们的图像。在解决这个流体图像用例之前,我们需要了解浏览器如何工作的一些背景知识。

根据Steve Souders的说法,图像预加载是“ 浏览器有史以来最大的性能提升。”图像通常是页面上最重的元素; 尽快加载它们符合每个人的最佳利益。因此,浏览器对页面执行的第一件事就是扫描HTML以查找图像URL并开始加载它们。浏览器在构建DOM,加载外部CSS或绘制布局之前就已经做了很久。解决流体图像用例是棘手的; 我们需要浏览器在知道图像的渲染大小之前选择一个源。

浏览器在任何时候都知道它所呈现的环境:视口的大小,用户屏幕的分辨率,这类事物。当我们使用媒体查询时,我们会使用此信息,这会根据特定的浏览环境定制我们的布局。

因此,为了解决预加载问题,流体图像特征的第一个提议建议将媒体查询附加到源。我们的源拾取机制基于视口的大小,浏览器在拾取时知道,而不是图像的最终渲染大小,而不是。

处理响应式图像变成了一场噩梦。向浏览器提供有关其环境的详细信息的更好方法是简单地告诉浏览器渲染图像的大小。有点明显,真的。(图片来源)

由于它原来,这是一个坏主意。虽然它在技术上可行,但计算所需的媒体查询是繁琐且容易出错的。更好的想法是简单地告诉浏览器渲染图像的大小!

一旦我们告诉浏览器它需要多少像素(通过一个新属性sizes),以及每个源有多少像素(通过w描述符srcset),选择一个源变得微不足道。浏览器选择在其容器内看起来仍然相当清晰的最小源。

让我们通过开发前面的例子来具体化。假设我们现在有三个版本的图像:

  • large.jpg (1024×768像素)

  • medium.jpg (640×480像素)

  • small.jpg (320×240像素)

我们希望将它们放在一个灵活的网格中 - 一个以单列开始但在较大视口中切换到三列的网格,如下所示:

响应式网格示例。(见演示)

以下是我们如何标记它:

<img srcset="large.jpg  1024w,
      medium.jpg 640w,
      small.jpg  320w"
   sizes="(min-width: 36em) 33.3vw,
      100vw"
   src="small.jpg"
   alt="A rad wolf" />
复制

我们srcset再次使用,但x我们将w描述符附加到描述符而不是描述符。这些描述了引用文件的实际宽度(以像素为单位)。因此,如果您以1024×768像素“保存为Web ...”,则将该源标记srcset为1024w。

你会注意到我们只指定了图像宽度。为什么不是高度呢?我们布局中的图像是宽度约束的; 它们的宽度由CSS明确设置,但它们的高度不是。野外的绝大多数响应图像也是宽度约束的,因此规范通过仅处理宽度来保持简单。包括高度也有一些很好的 理由 - 但还没有。

所以,这是w中srcset,它描述了像素多少,我们每一个来源有。接下来,sizes属性。该sizes属性告诉它有多少像素的浏览器需要通过描述我们的形象的最终呈现的宽度。可以想象sizes一种方法是提前向浏览器提供有关页面布局的一些信息,以便它可以在解析或呈现任何页面的CSS之前选择一个源。

我们通过向浏览器传递描述图像渲染宽度的CSS长度来实现此目的。CSS长度可以是绝对的(例如,99px或16em)或相对于视口(33.3vw如我们的示例中所示)。“相对于视口”部分是使图像弯曲的原因。

如果我们的图像占据视口的三分之一,那么我们的sizes属性应该如下所示:

sizes="33.3vw"
复制

我们的例子并不那么简单。我们的布局断点为36 ems。当视口窄于36 ems时,布局会发生变化。在该断点下方,图像将填充视口宽度的100%。我们如何在sizes属性中编码该信息?

 

我们通过将媒体查询与长度配对来实现:

sizes="(min-width: 36em) 33.3vw,
   100vw"
复制

这是它的格式:

sizes="[media query] [length],
   [media query] [length],
   etc…
   [default length]"
复制

浏览器遍历每个媒体查询,直到找到匹配的查询,然后使用匹配查询的配对长度。如果没有媒体查询匹配,则浏览器使用“默认”长度,即它遇到的没有配对查询的任何长度。

通过sizes长度和一组具有w描述符的源srcset可供选择,浏览器具有在流畅,响应式布局中高效加载图像所需的一切。

奇妙的是,sizes并且w在srcset也给浏览器足够的信息以图像适应不同device-pixel-ratio秒。转换CSS长度,我们将其sizes赋予CSS像素; 并且,通过用户的乘法,device-pixel-ratio浏览器知道它需要填充的设备像素的数量 - 无论用户device-pixel-ratio是什么。

因此,虽然在我们的例子中device-pixel-ratio使用的情况下,仅适用于固定宽度图像和仅涵盖倍和2倍的屏幕,这srcset和sizes例子不仅涵盖流体图像的使用情况,同时也适应任意屏幕密度。

我们马上解决了这两个问题。在说法列明在本文的开头,w在srcset和sizes覆盖可变大小的图像使用情况。

更奇妙的是,这个标记也为浏览器提供了一些摆动空间。将特定浏览条件附加到源意味着浏览器基于一组严格的条件进行选择。“如果屏幕为高分辨率,”我们说的浏览器“那么你必须使用此源。”通过简单的描述与资源维度w中srcset,他们会与被占用的面积sizes,我们启用了浏览器的应用它对给定用户环境的源拣选问题有丰富的额外知识。该规范允许浏览器在带宽缓慢或昂贵时可选地加载较小的源。

还有一件事。在我们的示例中,图像的大小始终是视口宽度的简单百分比。如果我们的布局结合了绝对长度和相对长度,比如在三列布局中添加一个固定的12-em侧边栏,怎么样呢?

布局结合了绝对长度和相对长度。(见演示)

我们在属性中使用了令人惊讶的良好支持的 calc()函数sizes。

sizes="(min-width: 36em) calc(.333 * (100vw - 12em)),
   100vw"
复制

并做了!

艺术指导用例

现在我们用煤气做饭!我们已经学会了如何标记可变大小的图像,这些图像可以有效地向上和向下缩放,在任何和所有布局,视口和屏幕上呈现清晰。

但是,如果我们想要更进一步呢?如果我们想要更多地适应怎么办?

当Apple去年推出iPad Air时,其网站上展示了该设备的巨大图像。这可能听起来相当不起眼,除非你 - 像网页设计爱好者那样做 - 强制调整你的浏览器窗口大小。当视口足够短时,iPad做了一件非凡的事情:旋转以更好地适应视口!

我们把这种事称为“艺术指导”。

苹果艺术通过滥用HTML和CSS指导其形象:将其图像 - 显然是内容 - 标记为空,div并background-image用CSS 切换。新<picture>规范允许作者完全用HTML来完成这种基于断点的艺术指导。

该规范通过在源代码上层叠另一种源分组方法来促进这一点srcset:<picture>和source。

让我们回到我们的例子。假设我们不是让我们的图像在小屏幕上填充视口的整个宽度,而是裁剪图像方块,放大主体最重要的部分,然后呈现固定大小的小方形裁剪向左浮动,为描述性文本留下了大量空间,如下所示:

图像与描述性文本相结合的示例。(见演示)

为此,我们需要一些额外的图像源:

  • cropped-small.jpg (96×96像素)

  • cropped-large.jpg (192×192像素)

  • small.jpg (320×240像素)

  • medium.jpg (640×480像素)

  • large.jpg (1024×768像素)

我们如何标记它们?像这样:

<picture>
   <source media="(min-width: 36em)"
      srcset="large.jpg  1024w,
         medium.jpg 640w,
         small.jpg  320w"
      sizes="33.3vw" />
   <source srcset="cropped-large.jpg 2x,
         cropped-small.jpg 1x" />
   <img src="small.jpg" alt="A rad wolf" /></picture>
复制

使用我们到目前为止所涵盖的每个功能,此示例都非常复杂。让我们分解吧。

该<picture>元素包含两个sources和一个img。的sources为图像的两个单独的艺术指导版本(方作物和作物满)。(必需)img作为我们的后备。正如我们很快就会发现的那样,它完成了幕后的大部分实际工作。

首先,让我们仔细看看第一个source:

<source media="(min-width: 36em)"
   srcset="large.jpg  1024w,
      medium.jpg 640w,
      small.jpg  320w"
   sizes="33.3vw" />
复制

这source代表了我们图像的完整未剪切版本。我们只想在三列布局中显示完整图像 - 也就是说,当视口宽度超过36 ems时。这里的第一个属性media=“(min-width: 36em)”使这种情况发生。如果media属性中的查询求值为true,则浏览器必须使用该值source; 否则,它被跳过了。

该source的另外两个属性- srcset和sizes-大多是从我们以前的可变大小的图像复制的例子。一个区别:因为source只选择三列布局,我们的sizes属性只需要一个长度33.3vw。

当视口小于36 ems时,第一个source媒体查询将评估为false,我们将继续第二个:

<source srcset="square-large.jpg 2x,
                square-small.jpg 1x" />
复制

这代表了我们的小方形作物。此版本以固定宽度显示,但我们仍希望它在高分辨率屏幕上呈现清晰。因此,我们提供了1x和2x版本,并用简单的x描述符标记它们。

最后,我们来到了令人惊讶的重要(确实是必需的!)img。

任何非元素的元素audio或video元素source都被视为后备内容并隐藏在支持的浏览器中。因此,您可能会对img此处采取相同的措施。错误!用户实际上img在我们使用时会看到该元素<picture>。没有img,没有形象; <picture>它source的所有东西都只是为它提供了一个来源。

为什么?关于第一个<picture>规范的一个主要抱怨是它重新发明了轮子,提出了一个全新的HTML媒体元素,沿着audio和video,大多数复制了功能img。重复的功能意味着重复的实施和维护工作 - 浏览器供应商不热衷的工作。

因此,新规范的重用img。它<picture>本身是看不见的,有点像魔法span。它source只是用于浏览器从中绘制替代版本的图像。选择源URL后,该URL将被提供给img。实际上,这意味着您想要应用于渲染图像的任何样式(比如说max-width: 100%)都需要应用于img,而不是应用于<picture>。

好的,关于我们的最后一个功能。

类型转换用例

让我们说,我们只是想让一个新的文件格式旋转,并为不支持的浏览器提供后备,而不是完成所有这些压扁,拉伸和适应无数视口条件。为此,我们遵循以下模式:audio和。videosource type

<picture>
   <source type="image/svg" src="logo.svg" />
   <source type="image/png" src="logo.png" />
   <img src="logo.gif" alt="RadWolf, Inc." /></picture>
复制

如果浏览器不理解image/svg 媒体类型,那么它会跳过第一个source; 如果它无法做出正面或image/png反面,那么它就会回归到imgGIF。

在非常痛苦的GIF到PNG过渡期间,网页设计师会为这样的功能而死。该<picture>元素赋予了我们,为未来几年轻松采用的新图像格式奠定了基础。

而已!

这就是一切:新<picture>规范中的每个功能以及每个功能背后的基本原理。总而言之,srcset,x,w,sizes,<picture>,source,media并type给我们一个丰富的,用以使图像真正适应工具-图像可以(终于!)有效地灵活布局和各种设备的流动。

规范尚未最终确定。

广东企业网站开发

最新案例

寒枫总监

来电咨询

400-6065-301

微信咨询

寒枫总监

TOP