响应式图像教程

2020-06-29

Ann Ann

一、问题的由来

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

<img src="foo.jpg">

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

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

(1)体积

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

(2)像素密度

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

(3)视觉风格

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

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

二、像素密度的选择: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 后面的像素密度描述符,格式是像素密度倍数 + 字母x1x表示单倍像素密度,可以省略。浏览器根据当前设备的像素密度,选择需要加载的图像。

如果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%),等于160pxsrcset属性里面,正好有宽度等于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 格式。

近期开课hot
logo

Follow Us

linkedinfacebooktwitterinstagramweiboyoutubebilibilitiktokxigua

We Accept

/image/layout/pay-paypal.png/image/layout/pay-visa.png/image/layout/pay-master-card.png/image/layout/pay-stripe.png/image/layout/pay-alipay.png

地址

Level 10b, 144 Edward Street, Brisbane CBD(Headquarter)
Level 8, 11 York st, Wynyard, Sydney CBD
Business Hub, 155 Waymouth St, Adelaide SA 5000

Disclaimer

footer-disclaimerfooter-disclaimer

JR Academy acknowledges Traditional Owners of Country throughout Australia and recognises the continuing connection to lands, waters and communities. We pay our respect to Aboriginal and Torres Strait Islander cultures; and to Elders past and present. Aboriginal and Torres Strait Islander peoples should be aware that this website may contain images or names of people who have since passed away.

匠人学院网站上的所有内容,包括课程材料、徽标和匠人学院网站上提供的信息,均受澳大利亚政府知识产权法的保护。严禁未经授权使用、销售、分发、复制或修改。违规行为可能会导致法律诉讼。通过访问我们的网站,您同意尊重我们的知识产权。 JR Academy Pty Ltd 保留所有权利,包括专利、商标和版权。任何侵权行为都将受到法律追究。查看用户协议

© 2017-2024 JR Academy Pty Ltd. All rights reserved.

ABN 26621887572