Responsive images

 

在本文中,我们将学习响应式图像的概念-响应式图像在具有不同屏幕尺寸,分辨率和其他此类功能的设备上可以很好地工作-并研究HTML提供了哪些工具来帮助实现它们. 这有助于提高不同设备之间的性能. 响应式图像只是响应式设计的一部分, 响应式设计是您将来学习的CSS主题.

Prerequisites: 您应该已经了解HTML基础知识以及如何向网页添加静态图像 .
Objective: 了解如何使用srcset<picture>元素之类的功能在网站上实现响应式图像解决方案.

Why responsive images?

让我们研究一个典型的场景. 典型的网站可能包含标题图片和标题下方的一些内容图片. 标头图像可能会跨越标头的整个宽度,而内容图像将适合内容列内的某个位置. 这是一个简单的示例:

Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center.

这在宽屏幕设备(例如笔记本电脑或台式机)上效果很好(您可以网上实时查看示例并在Github上找到源代码 .)我们在本课程中不会过多讨论CSS,只是说:

  • 主体内容已设置为最大宽度1200像素-在大于该宽度的视口中,主体保持在1200px并在可用空间中居中. 在小于该宽度的视口中,主体将保持在视口宽度的100%.
  • 标题图像已设置为无论标题设置为什么宽度,其中心始终位于标题的中心. 如果在较窄的屏幕上查看站点,则仍可以看到图像中心(人员)的重要细节,并且多余的部分将从两侧丢失. 高200像素.
  • The content images have been set so that if the body element becomes smaller than the image, the images start to shrink so that they always stay inside the body, rather than overflowing it.

但是,当您开始在窄屏设备上查看站点时,会出现问题. 下方的标题看起来不错,但开始占用移动设备的很多屏幕高度. 并且以这种尺寸,很难在第一内容图像中看到人.

Our example site as viewed on a narrow screen; the first image has shrunk to the point where it is hard to make out the detail on it.

一种改进是显示图像的裁剪版本,当在狭窄的屏幕上查看站点时,该版本显示图像的重要细节. 可以为中等宽度的屏幕设备(如平板电脑)显示第二张裁剪的图像. 这通常被称为艺术指导问题 .

另外,如果在移动屏幕上查看页面,则无需在页面上嵌入如此大的图像. 相反,当显示的小光栅图像大于其原始大小时,它开始显得粗糙(光栅图像是固定宽度的像素数和固定高度的像素数,正如我们在查看矢量图形时所看到的). 这称为分辨率切换问题 .

相反,没有必要在屏幕上显着小于其原本打算的尺寸显示大图像. 这样做会浪费带宽. 尤其是,移动用户不希望通过下载用于桌面的大图像来浪费带宽,而小图像会为他们的设备带来麻烦. 理想情况下,您将拥有多种分辨率,并根据访问网站上数据的设备提供适当的大小.

为了使事情变得更复杂,某些设备具有高分辨率的屏幕,这些屏幕需要的图像要比您期望的显示效果好. 这本质上是相同的问题,但是背景稍有不同.

您可能会认为矢量图像可以解决这些问题,并且在一定程度上确实可以解决这些问题-它们的文件大小较小且缩放比例很好,因此应尽可能使用它们. 但是,它们并不适合所有图像类型. 矢量图像非常适合简单的图形,图案,界面元素等,但是创建具有矢量细节的基于矢量的图像开始变得非常复杂,例如您在照片中会发现的那种细节. 诸如JPEG之类的栅格图像格式更适合我们在上面的示例中看到的图像类型.

在90年代初至中期,当网络首次出现时,这种问题就不存在-当时存在的唯一可以浏览网络的设备是台式机和笔记本电脑,因此浏览器工程师和规范作者甚至都没有想到要实现解决方案. 响应式图像技术最近已实现,可以通过为浏览器提供多个图像文件来解决上述问题,这些图像文件要么全部显示相同的内容,但包含不同数量的像素( 分辨率切换 ),或者提供适合不同空间分配的不同图像( 艺术指导) ).

:本文中讨论的新功能- srcset / sizes / <picture> -都支持现代桌面和移动浏览器的发布版本(包括微软的浏览器边,虽然不是Internet Explorer)

How do you create responsive images?

在本节中,我们将研究上面说明的两个问题,并展示如何使用HTML的自适应图像功能解决它们. 您应该注意,如上例的内容区域所示,本节将重点介绍HTML <img> -网站标题中的图像仅用于装饰,因此使用CSS背景图像实现. 可以说CSS具有比HTML 更好的用于响应式设计的工具 ,我们将在以后的CSS模块中讨论这些工具 .

Resolution switching: Different sizes

那么,我们要解决的分辨率转换问题是什么? 我们希望显示相同的图像内容,根据设备的不同而有所不同–这就是我们示例中第二个内容图像的情况. 传统上,标准<img>元素仅允许您将浏览器指向单个源文件:

<img src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

不过,我们可以使用两个新的属性- srcsetsizes -与提示,以帮助浏览器选择一个正确的一起提供一些额外的源图像. 你可以看到在我们这样一个例子responsive.html在Github上的例子(见源代码 ):

<img srcset="elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 600px) 480px,
            800px"
     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

srcsetsizes属性看起来很复杂,但是如果您按照上面所示的格式设置它们,并不太难理解,每一行的属性值都有不同的部分. 每个值都包含一个逗号分隔的列表,并且这些列表的每个部分都由三个子部分组成. 现在让我们遍历每个内容:

srcset定义了我们将允许浏览器选择的图像集,以及每个图像的大小. 每组图像信息都与前一组图像信息分开, 逗号. 对于每个,我们写:

  1. An 图片文件名 (elva-fairy-480w.jpg)
  2. 空间
  3. 图像的固有宽度,以像素为单位480w )—请注意,它使用w单位,而不是您期望的px . 这是图像的实际大小,可以通过在计算机上检查图像文件来找到(例如,在Mac上,您可以在Finder中选择图像,然后按Cmd + I弹出信息屏幕).

sizes定义了一组媒体条件(例如,屏幕宽度),并指示当某些媒体条件为真时,最好选择哪种图像尺寸-这些是我们之前讨论的提示. 在这种情况下,在每个逗号之前,我们写:

  1. A 媒体状况 ((max-width:600px)) — you'll learn more about these in the CSS topic, but for now let's just say that a media condition describes a possible state that the screen can be in. In this case, we are saying "when the viewport width is 600 pixels or less".
  2. 空间
  3. 当媒体条件为true时,图像将填充的插槽宽度480px

注意 :对于插槽宽度,您可以提供绝对长度( pxem )或相对于视口的长度( vw ),但不能提供百分比. 您可能已经注意到,最后一个插槽宽度没有介质条件(这是在没有介质条件为真时选择的默认值). 浏览器将忽略第一个匹配条件之后的所有内容,因此请注意如何订购媒体条件.

因此,有了这些属性,浏览器将:

  1. 看它的设备宽度
  2. 找出sizes列表中哪种介质条件是第一个正确的条件
  3. 查看赋予该媒体查询的广告位大小
  4. 加载srcset列表中引用的与所选插槽大小匹配的映像

就是这样! 此时,如果支持的浏览器以480px的视口宽度加载页面,则(max-width: 600px)媒体条件将为true,因此浏览器选择480px插槽. elva-fairy-480w.jpg将被加载,因为其固有宽度( 480w )最接近插槽尺寸. 800px的图片在磁盘上为128KB,而480px的版本仅为63KB,节省了65KB. 现在,假设该页面上有很多图片. 使用此技术可以为移动用户节省大量带宽.

注意 :在使用桌面浏览器进行测试时,如果在将窗口设置为最窄宽度时浏览器无法加载较窄的图像,请查看视口是什么(您可以通过进入浏览器的窗口进行近似JavaScript控制台和打字document . querySelector ( 'html' ). clientWidth ). 不同的浏览器具有最小的尺寸,可让您将窗口宽度减小到最小,并且它们可能比您想象的要宽. 在移动浏览器上进行测试时,可以使用Firefox的about:debugging页面之类的工具来检查使用桌面开发人员工具在移动设备上加载的页面.

要查看加载了哪些图像,可以使用Firefox DevTools的" 网络监视器"选项卡.

不支持这些功能的旧版浏览器将忽略它们. 相反,这些浏览器将继续正常加载src属性中引用的图像.

注意 :在上面链接的示例的<head>中,您会找到<meta name="viewport" content="width=device-width"> :这迫使移动浏览器采用其实际视口宽度来加载Web页面(某些移动浏览器围绕其视口宽度放置,而是以较大的视口宽度加载页面,然后将加载的页面缩小,这对于响应式图像或设计不是很有帮助).

Resolution switching: Same size, different resolutions

如果您支持多种显示分辨率,但是每个人都可以在屏幕上看到相同大小的图像,则可以允许浏览器通过使用带有x描述符且不带sizes srcset选择合适的分辨率图像-稍微容易一些句法! 您可以在srcset-resolutions.html中找到一个类似示例的示例(另请参见源代码 ):

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

一个小女孩的照片装扮成仙女,并在图像上应用了旧的相机胶卷效果 在此示例中,以下CSS应用于图像,以使其在屏幕上的宽度为320像素(也称为CSS像素):

img {
  width: 320px;
}

在这种情况下,就不需要sizes -浏览器只需弄清楚显示器所显示的分辨率,并提供srcset引用的最合适的图像. 因此,如果访问页面的设备具有标准/低分辨率显示,每个CSS像素代表一个设备像素,则将加载elva-fairy-320w.jpg图像(隐含1x,因此您无需包括如果该设备的高分辨率每个CSS像素elva-fairy-640w.jpg两个设备像素,则将加载elva-fairy-640w.jpg图像. 640px的图像为93KB,而320px的图像仅为39KB.

Art direction

概括地说, 艺术指导问题涉及想要改变显示的图像以适合不同的图像显示尺寸. 例如,网页包含一个大型景观,在桌面浏览器上查看时,中间有一个人. 在移动浏览器上查看时,该图像会缩小,从而使图像中的人很小,很难看见. 最好在手机上显示较小的人像图像,以放大人物. <picture>元素允许我们实施这种解决方案.

回到我们最初的not-sensitive.html示例,我们有一张图像急需艺术指导:

<img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">

让我们用<picture>修复它! 与<video><audio><picture>元素是一个包装,其中包含多个<source>元素,这些元素为浏览器提供不同的来源供您选择,其后是最重要的<img>元素. 在代码responsive.html看起来就像这样:

<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>
  • The <source> elements include a media attribute that contains a media condition — as with the first srcset example, these conditions are tests that decide which image is shown — the first one that returns true will be displayed. In this case, if the viewport width is 799px wide or less, the first <source> element's image will be displayed. If the viewport width is 800px or more, it'll be the second one.
  • srcset属性包含要显示的图像的路径. 就像我们在上面的<img>看到的那样, <source>可以采用srcset属性,其中引用了多个图像,以及一个sizes属性. 因此,您可以通过<picture>元素提供多个图像,但是每个<picture>可以提供多种分辨率. 实际上,您可能不想经常做这种事情.
  • 在所有情况下,都必须在</picture>之前提供一个<img>元素,其中包含srcalt ,否则将不会显示图像. 这提供了一个默认情况,该情况适用于所有媒体条件都未返回true的情况(在此示例中,您实际上可以删除第二个<source>元素),以及对不支持<picture>元素的浏览器的后备功能.

此代码使我们能够在宽屏和窄屏显示器上显示合适的图像,如下所示:

Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center.Our example site as viewed on a narrow screen with the picture element used to switch the first image to a portrait close up of the detail, making it a lot more useful on a narrow screen

注意 :仅应在美术指导方案中使用media属性; 当您使用media ,也不要在sizes属性内提供媒体条件.

Why can't we just do this using CSS or JavaScript?

当浏览器开始加载页面时,它开始下载(预加载)任何图像,然后主解析器开始加载并解释页面的CSS和JavaScript. 这是一项有用的技术,已将页面加载时间平均缩短了20%. 但是,它对于响应图像没有帮助,因此需要实现srcset解决方案. 例如,您无法加载<img>元素,然后使用JavaScript检测视口宽度,然后根据需要将源图像动态更改为较小的图像. 到那时,原始图像将已经被加载,您也将加载较小的图像,这在响应图像方面更加糟糕.

Use modern image formats boldly

有几种令人兴奋的新图像格式(例如WebP和JPEG-2000)可以同时保持较小的文件大小和高质量. 但是,浏览器支持参差不齐.

<picture>让我们继续迎合较旧的浏览器. 您可以在type属性中提供MIME类型,以便浏览器可以立即拒绝不支持的文件类型:

<picture>
  <source type="image/svg+xml" srcset="pyramid.svg">
  <source type="image/webp" srcset="pyramid.webp"> 
  <img src="pyramid.png" alt="regular pyramid built from four equilateral triangles">
</picture>
  • 不要使用media属性,除非你还需要艺术指导.
  • <source>元素中,您只能引用在type中声明的type图像.
  • 用逗号分隔的使用列表srcsetsizes ,按需要.

Active learning: Implementing your own responsive images

对于这种积极的学习,我们希望您勇于尝试,独自一人……主要是. 我们希望您使用<picture>实现自己适合的艺术指导的窄屏/宽屏截图,并使用srcset实现分辨率切换示例.

  1. 编写一些简单的HTML来包含您的代码(如果愿意,请使用not-responsive.html作为起点).
  2. 找到一个不错的宽屏风景图像,其中包含一些细节. 使用图形编辑器创建一个Web尺寸的版本,然后对其进行裁剪以显示放大细节的较小部分,并创建第二个图像(约480像素宽对此很有用).
  3. 使用<picture>元素实现艺术指导图片切换器!
  4. 创建多个不同大小的图像文件,每个文件显示相同的图片.
  5. 使用srcset / size创建一个分辨率切换器示例,以便以不同的分辨率提供相同大小的图像,或者以不同的视口宽度提供不同的图像大小.

Test your skills!

您已经到了本文的结尾,但是您还记得最重要的信息吗? 您可以在模块末尾找到详细的评估,以测试这些技能. 参见Mozilla启动页面 .

Summary

这是响应式图像的包装-我们希望您喜欢这些新技术. 作为回顾,我们在这里讨论了两个不同的问题:

  • 艺术指导 :要为不同布局提供裁切图像的问题-例如,横向图像显示桌面布局的完整场景,而纵向图像则显示主要主题的移动布局. 您可以使用<picture>元素解决此问题.
  • 分辨率切换 :您希望将较小的图像文件提供给窄屏设备的问题,因为它们不需要像台式机显示器一样需要大图像,并且还可以选择将不同分辨率的图像提供给高密度/低密度屏幕. 您可以通过使用矢量图形 (SVG图像)和具有sizes属性的srcset来解决此问题.

这也将关闭整个多媒体和嵌入模块! 在继续进行之前,现在唯一要做的就是尝试我们的多媒体评估,看看如何进行. 玩得开心!

See also