图片的响应式设计

柔情只为你懂 2023-06-12 08:49 21阅读 0赞

# 响应式图像教程 #

[ ][Link 1]

感谢 腾讯课堂NEXT学院 赞助本站，腾讯官方的IT课程 年终优惠免费试学。

![腾讯课堂 NEXT 学院][NEXT]

网页在不同尺寸的设备上，都有良好的显示效果，叫做["响应式设计"][Link 2]（responsive web design）。

响应式设计的网页图像，就是"响应式图像"（responsive image）。

![bg2019061001.jpg][]

响应式图像的解决方案有很多，JavaScript 和 CSS 都可以实现。本文介绍最简单的、语义性最好的 HTML 方法，浏览器原生支持。

## 一、问题的由来 ##

我们知道，`<img>`标签用于插入网页图像，所有情况默认插入的都是同一张图像。

>     <img src="foo.jpg">

上面代码在桌面端和手机上，插入的都是图像文件`foo.jpg`。

这种处理方法固然简单，但是有三大弊端。

**（1）体积**

一般来说，桌面端显示的是大尺寸的图像，文件体积较大。手机的屏幕较小，只需要小尺寸的图像，可以节省带宽，加速网页渲染。

**（2）像素密度**

桌面显示器一般是单倍像素密度，而手机的显示屏往往是多倍像素密度，即多个像素合成为一个像素，称为 Retina 屏幕。图像文件很可能在桌面端很清晰，放到手机上会有点模糊，因为像素扩充了。

**（3）视觉风格**

桌面显示器的面积较大，图像可以容纳更多细节。手机的屏幕较小，许多细节是看不清的，需要突出重点。

![bg2019061002.jpg][]

![bg2019061003.jpg][]

上面两张图片，下方的手机图片经过裁剪以后，更突出图像重点，明显效果更好。

## 二、像素密度的选择：`srcset`属性 ##

为了解决上一节的这些问题，HTML 语言提供了一套完整的解决方案。首先，`<img>`标签引入了`srcset`属性。

`srcset`属性用来指定多张图像，适应不同像素密度的屏幕。它的值是一个逗号分隔的字符串，每个部分都是一张图像的 URL，后面接一个空格，然后是像素密度的描述符。请看下面的例子。

>     <img srcset="foo-320w.jpg, foo-480w.jpg 1.5x, foo-640w.jpg 2x" src="foo-640w.jpg">

上面代码中，`srcset`属性给出了三个图像 URL，适应三种不同的像素密度。

图像 URL 后面的像素密度描述符，格式是像素密度倍数 + 字母`x`。`1x`表示单倍像素密度，可以省略。浏览器根据当前设备的像素密度，选择需要加载的图像。

如果`srcset`属性都不满足条件，那么就加载`src`属性指定的默认图像。

## 三、图像大小的选择：`srcset`属性 + `sizes`属性 ##

像素密度的适配，只适合显示区域一样大小的图像。如果希望不同尺寸的屏幕，显示不同大小的图像，`srcset`属性就不够用了，必须搭配`sizes`属性。

第一步，`srcset`属性列出所有可用的图像。

>     <img srcset="foo-160.jpg 160w, foo-320.jpg 320w, foo-640.jpg 640w, foo-1280.jpg 1280w" src="foo-1280.jpg">

上面代码中，`srcset`属性列出四张可用的图像，每张图像的 URL 后面是一个空格，再加上宽度描述符。

宽度描述符就是图像原始的宽度，加上字符`w`。上例的四种图片的原始宽度分别为160像素、320像素、640像素和1280像素。

第二步，`sizes`属性列出不同设备的图像显示宽度。

`sizes`属性的值是一个逗号分隔的字符串，除了最后一部分，前面每个部分都是一个放在括号里面的媒体查询表达式，后面是一个空格，再加上图像的显示宽度。

>     <img srcset="foo-160.jpg 160w, foo-320.jpg 320w, foo-640.jpg 640w, foo-1280.jpg 1280w" sizes="(max-width: 440px) 100vw, (max-width: 900px) 33vw, 254px" src="foo-1280.jpg">

上面代码中，`sizes`属性给出了三种屏幕条件，以及对应的图像显示宽度。宽度不超过440像素的设备，图像显示宽度为100%；宽度441像素到900像素的设备，图像显示宽度为33%；宽度900像素以上的设备，图像显示宽度为`254px`。

第三步，浏览器根据当前设备的宽度，从`sizes`属性获得图像的显示宽度，然后从`srcset`属性找出最接近该宽度的图像，进行加载。

假定当前设备的屏幕宽度是`480px`，浏览器从`sizes`属性查询得到，图片的显示宽度是`33vw`（即33%），等于`160px`。`srcset`属性里面，正好有宽度等于`160px`的图片，于是加载`foo-160.jpg`。

注意，`sizes`属性必须与`srcset`属性搭配使用。单独使用`sizes`属性是无效的。

## 四、`<picture>`标签，`<source>`标签 ##

上面两节分别解决了像素密度和屏幕大小的适配，但是如果要同时适配不同像素密度、不同大小的屏幕，应该怎么办呢？

这时，就要用到`<picture>`标签。它是一个容器标签，内部使用`<source>`和`<img>`，指定不同情况下加载的图像。

>     <picture>
>       <source media="(max-width: 500px)" srcset="cat-vertical.jpg">
>       <source media="(min-width: 501px)" srcset="cat-horizontal.jpg">
>       <img src="cat.jpg" alt="cat">
>     </picture>

上面代码中，`<picture>`标签内部有两个`<source>`标签和一个`<img>`标签。

`<source>`标签的`media`属性给出媒体查询表达式，`srcset`属性就是`<img>`标签的`srcset`属性，给出加载的图像文件。`sizes`属性其实这里也可以用，但由于有了`media`属性，就没有必要了。

浏览器按照`<source>`标签出现的顺序，依次判断当前设备是否满足`media`属性的媒体查询表达式，如果满足就加载`srcset`属性指定的图片文件，并且不再执行后面的`<source>`标签和`<img>`标签。

`<img>`标签是默认情况下加载的图像，用来满足上面所有`<source>`都不匹配的情况。

上面例子中，设备宽度如果不超过`500px`，就加载竖屏的图像，否则加载横屏的图像。

下面给出一个例子，同时考虑屏幕尺寸和像素密度的适配。

>     <picture>
>       <source srcset="homepage-person@desktop.png, homepage-person@desktop-2x.png 2x" media="(min-width: 990px)">
>       <source srcset="homepage-person@tablet.png, homepage-person@tablet-2x.png 2x" media="(min-width: 750px)">
>       <img srcset="homepage-person@mobile.png, homepage-person@mobile-2x.png 2x" alt="Shopify Merchant, Corrine Anestopoulos">
>     </picture>

上面代码中，`<source>`标签的`media`属性给出屏幕尺寸的适配条件，每个条件都用`srcset`属性，再给出两种像素密度的图像 URL。

## 五、`<source>`标签的`type`属性 ##

除了响应式图像，`<picture>`标签还可以用来选择不同格式的图像。比如，如果当前浏览器支持 Webp 格式，就加载这种格式的图像，否则加载 PNG 图像。

>     <picture>
>       <source type="image/svg+xml" srcset="logo.xml">
>       <source type="image/webp" srcset="logo.webp"> 
>       <img src="logo.png" alt="ACME Corp">
>     </picture>

上面代码中，`<source>`标签的`type`属性给出图像的 MIME 类型，`srcset`是对应的图像 URL。

浏览器按照`<source>`标签出现的顺序，依次检查是否支持`type`属性指定的图像格式，如果支持就加载图像，并且不再检查后面的`<source>`标签了。上面例子中，图像加载优先顺序依次为 svg 格式、webp 格式和 png 格式。

[Link 1]: https://ke.qq.com/huodong/next_1111sale_h5/index.html?from=800007110
[NEXT]: https://www.wangbase.com/blogimg/asset/201911/bg2019110602.jpg
[Link 2]: http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html
[bg2019061001.jpg]: https://www.wangbase.com/blogimg/asset/201906/bg2019061001.jpg
[bg2019061002.jpg]: https://www.wangbase.com/blogimg/asset/201906/bg2019061002.jpg
[bg2019061003.jpg]: https://www.wangbase.com/blogimg/asset/201906/bg2019061003.jpg