【HTML5】响应式图片

谁借莪１个温暖的怀抱￠ 2022-06-05 08:55 273阅读 0赞

jq width() 、height()获取的是图片加载到页面上的图片**显示尺寸**（图片标签width、height属性值或max-width后的值）**而非图片真实尺寸**；所以**虽然在小屏设备上看到的图片小但是消耗的流量是固定不变**的。  
　　当网站在狭窄的屏幕上观看时，会显示一幅图片的裁剪版本，裁剪版本有重要的细节，而对于像平板电脑这样的中等宽度的屏幕设备来说，也许是两者之间的东西—这通常被称之为**艺术方向问题**（art direction problem）。  
　　如果是在小屏手机屏幕上显示网页，那么没有必要在网页上嵌入这样大的图片。这被称之为**分辨率切换问题**（resolution switching problem）—一张位图被设置为固定像素的宽和高。

--------------------

# 一、分辨率切换问题 #

## 1）分辨率切换：不同的尺寸 ##

那么，我们想要用分辨率切换解决什么问题呢？我们想要显示相同的图片内容，仅仅依靠设备来显示更大或更小的图片。  
　　标准的`<img>`元素传统上仅仅让你给浏览器指定唯一的资源文件。

然而我们**可以使用两个新的属性——srcset 和 sizes**——可以提供更多额外的资源图像和提示来帮助浏览器选择正确的一个资源。

> 在这篇文章中讨论的新特性 — srcset/sizes/ — 都已经被新版本的现代浏览器和移动浏览器所支持（包括Edge，而不是IE）。

srcset和sizes属性看起来很复杂，但是如果你按照上图所示进行格式化，那么他们并不是很难理解，每一行有不同的属性值。每个值都包含逗号分隔的列表。列表的每一部分由三个子部分组成。让我们来看看现在的每一个内容：  
　　srcset定义了我们允许浏览器选择的图像集，以及每个图像的大小。在每个逗号之前，我们写：

*  一个文件名 (elva-fairy-480w.jpg.)
 *  一个空格
 *  **图像的固有宽度**（以像素为单位）（480w）——注意到这里使用w单位，而不是你预计的px。这是图像的真实大小。

--------------------

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

如果你支持多分辨率显示，但每个人在屏幕上看到的图片的实际尺寸是相同的，你可以让浏览器通过srcset和x-descriptors但没有sizes——一种更简单的语法——来选择适当的分辨率图片。

浏览器只是计算出正在显示的显示器的分辨率，然后提供srcset引用的最适合的图像。因此，如果访问页面的设备具有标准/低分辨率显示，一个设备像素表示一个CSS像素，elva-fairy-320w.jpg会被加载（1x 是隐藏的，所以你不需要写出来）。如果设备有高分辨率，两个或更多的设备像素表示一个CSS像素，the elva-fairy-640w.jpg 会被加载。640px的图像大小为93KB，320px的图像的大小仅仅有39KB。现在想象一下，如果这是一个有很多图片的页面。**使用这种技术会节省移动端用户的大量带宽。**

--------------------

# 二、艺术方向问题 #

**艺术方向问题**涉及要更改显示的图像以适应不同的图像显示尺寸。例如，如果在桌面浏览器上的一个网站上显示一个大型的风景照片，而照片中的人在照片中央，然后当在移动端浏览器上浏览这个网站时，照片会缩小，这时照片上的人会变得非常小，看起来会很糟糕。这样的话，在移动端显示一个更小的人物图像会更好，会显示放大的人物。元素允许我们这样实现。

> 你应该仅仅当在艺术方向场景下使用media属性；当你使用media时，不要在sizes属性中也提供媒体条件。

为什么我们不能使用 CSS 或 JavaScript 来做到响应式图片效果？

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