分辨率切换: 相同的尺寸, 不同的分辨率

如果你支持多种分辨率显示,但希望每个人在屏幕上看到的图片的实际尺寸是相同的,你可以让浏览器通过srcset和x语法结合——一种更简单的语法——而不用sizes,来选择适当分辨率的图片。你可以看一个例子srcset-resolutions.html:
在这个例子中,下面的CSS会应用在图片上,所以它的宽度在屏幕上是320像素(也称作CSS像素):
img { width: 320px; }
在这种情况下,sizes并不需要——浏览器只是计算出正在显示的显示器的分辨率,然后提供srcset引用的最适合的图像。因此,如果访问页面的设备具有标准/低分辨率显示,一个设备像素表示一个CSS像素,elva-fairy-320w.jpg会被加载(1x 是默认值,所以你不需要写出来)。如果设备有高分辨率,两个或更多的设备像素表示一个CSS像素,elva-fairy-640w.jpg 会被加载。640px的图像大小为93KB,320px的图像的大小仅仅有39KB。

美术设计

回顾一下,美术设计问题涉及要更改显示的图像以适应不同的图像显示尺寸。例如,如果在桌面浏览器上的一个网站上显示一张大的、横向的照片,照片中央有个人,然后当在移动端浏览器上浏览这个网站时,照片会缩小,这时照片上的人会变得非常小,看起来会很糟糕。这种情况可能在移动端显示一个更小的肖像图会更好,这样人物的大小看起来更合适。元素允许我们这样实现。
回到我们最初的例子not-responsive.html,我们有一张图片需要美术设计:
让我们改用!就像和,素包含了一些元素,它使浏览器在不同资源间做出选择,紧跟着的是最重要的元素。responsive.html 的代码如下:
元素包含一个media属性,这一属性包含一个媒体条件——就像第一个srcset例子,这些条件来决定哪张图片会显示——第一个条件返回真,那么就会显示这张图片。在这种情况下,如果视窗的宽度为799px或更少,第一个元素的图片就会显示。如果视窗的宽度是800px或更大,就显示第二张图片。srcset属性包含要显示图片的路径。请注意,正如我们在上面看到的那样,可以使用引用多个图像的srcset属性,还有sizes属性。所以你可以通过一个元素提供多个图片,不过也可以给每个图片提供多分辨率的图片。实际上,你可能不想经常做这样的事情。在任何情况下,你都必须在之前正确提供一个元素以及它的src和alt属性,否则不会有图片显示。当媒体条件都不返回真的时候(你可以在这个例子中删除第二个元素),它会提供图片;如果浏览器不支持元素时,它可以作为后备方案。
这样的代码允许我们在宽屏和窄屏上都能显示合适的图片,像下面展示的一样:
注意: 你应该仅仅当在美术设计场景下使用media属性;当你使用media时,不要在sizes属性中也提供媒体条件。

为什么我们不能使用 CSS 或JavaScript 来做到这一效果?

当浏览器开始加载一个页面, 它会在主解析器开始加载和解析页面的 CSS 和JavaScript 之前先下载 (预加载) 任意的图片。这是一个非常有用的技巧,平均下来减少了页面加载时间的20%。但是, 这对响应式图片一点帮助都没有, 所以需要类似 srcset的实现方法。因为你不能先加载好元素后, 再用 JavaScript 检测可视窗口的宽度,如果觉得大小不合适,再动态地加载小的图片替换已经加载好的图片,这样的话, 原始的图像已经被加载了, 然后你又加载了小的图像, 这样的做法对于响应式图像的理念来说,是很糟糕的。

大胆的使用现代图像格式

有很多令人激动的新图像格式(例如WebP和JPEG-2000)可以在有高质量的同时有较低的文件大小。然而,浏览器对其的支持参差不齐。
让我们能继续满足老式浏览器的需要。你可以在type属性中提供MIME类型,这样浏览器就能立即拒绝其不支持的文件类型:
不要使用media属性,除非你也需要美术设计。在元素中,你只可以引用在type中声明的文件类型。像之前一样,如果必要,你可以在srcset和sizes中使用逗号分割的列表。

主动学习:实现属于你的响应式图像

在这次主动学习中,我们希望你变得勇敢和自力更生……尽量的。我们希望你通过使用来实现自己美术设计上的宽/窄屏显示适配,以及使用 srcset切换不同的分辨率。写一些简单 HTML 来包含你的代码(如果你喜欢,也可以使用 not-responsive.html 作为起点)。找一张漂亮的宽屏风景图像,其中需要包含一些细节。使用图像编辑器创建一个网页大小的版本。然后裁剪一下,显示一个更小的部分,其中包含放大的细节, 然后创建第二张图片 (差不多 480px 宽度比较好。)使用元素来实现艺术图片切换器!创建不同大小的多张图片, 每个图片的图像都是一样的。使用 srcset/size 来创建一个分辨率切换器示例, 可以在不同的分辨率的情况下,提供相同尺寸的图像, 或者在不同的视图大小的情况下,提供不同尺寸大小的图像。
注意: 使用浏览器开发工具来帮助你工作时可以得到你需要的视图大小,就像上文提到的。

总结

这章节中充满了响应式图像 — 我们希望你学习新技术的过程是享受的。概括来说,有两个不同的问题,文章中我们一直在讨论:
美术设计:当你想为不同布局提供不同剪裁的图片——比如在桌面布局上显示完整的、横向图片,而在手机布局上显示一张剪裁过的、突出重点的纵向图片,可以用元素来实现。分辨率切换:当你想要为窄屏提供更小的图片时,因为小屏幕不需要像桌面端显示那么大的图片;以及你想为高/低分辨率屏幕提供不同分辨率的图片时,都可以通过 vector graphics (SVG images)、 srcset 以及 sizes 属性来实现。