响应式图像解决方案HTML 方法,浏览器原生支持

2019-08-1506:19:57网页制作Comments2,282 views字数 3248阅读模式

网页在不同尺寸的设备上,都有良好的显示效果,叫做"响应式设计"(responsive web design)。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15243.html

响应式设计的网页图像,就是"响应式图像"(responsive image)。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15243.html

响应式图像解决方案HTML 方法,浏览器原生支持文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15243.html

响应式图像的解决方案有很多,JavaScript 和 CSS 都可以实现。本文介绍最简单的、语义性最好的 HTML 方法,浏览器原生支持。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15243.html

一、问题的由来

我们知道,<img>标签用于插入网页图像,所有情况默认插入的都是同一张图像。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15243.html


<img src="foo.jpg">

上面代码在桌面端和手机上,插入的都是图像文件foo.jpg文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15243.html

这种处理方法固然简单,但是有三大弊端。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15243.html

(1)体积文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15243.html

一般来说,桌面端显示的是大尺寸的图像,文件体积较大。手机的屏幕较小,只需要小尺寸的图像,可以节省带宽,加速网页渲染。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15243.html

(2)像素密度文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15243.html

桌面显示器一般是单倍像素密度,而手机的显示屏往往是多倍像素密度,即多个像素合成为一个像素,称为 Retina 屏幕。图像文件很可能在桌面端很清晰,放到手机上会有点模糊,因为像素扩充了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15243.html

(3)视觉风格文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15243.html

桌面显示器的面积较大,图像可以容纳更多细节。手机的屏幕较小,许多细节是看不清的,需要突出重点。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15243.html

响应式图像解决方案HTML 方法,浏览器原生支持文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15243.html

响应式图像解决方案HTML 方法,浏览器原生支持文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15243.html

上面两张图片,下方的手机图片经过裁剪以后,更突出图像重点,明显效果更好。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15243.html

二、像素密度的选择:srcset属性

为了解决上一节的这些问题,HTML 语言提供了一套完整的解决方案。首先,<img>标签引入了srcset属性。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15243.html

srcset属性用来指定多张图像,适应不同像素密度的屏幕。它的值是一个逗号分隔的字符串,每个部分都是一张图像的 URL,后面接一个空格,然后是像素密度的描述符。请看下面的例子。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15243.html


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

上面代码中,srcset属性给出了三个图像 URL,适应三种不同的像素密度。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15243.html

图像 URL 后面的像素密度描述符,格式是像素密度倍数 + 字母x1x表示单倍像素密度,可以省略。浏览器根据当前设备的像素密度,选择需要加载的图像。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15243.html

如果srcset属性都不满足条件,那么就加载src属性指定的默认图像。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15243.html

三、图像大小的选择:srcset属性 + sizes属性

像素密度的适配,只适合显示区域一样大小的图像。如果希望不同尺寸的屏幕,显示不同大小的图像,srcset属性就不够用了,必须搭配sizes属性。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15243.html

第一步,srcset属性列出所有可用的图像。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15243.html


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

上面代码中,srcset属性列出四张可用的图像,每张图像的 URL 后面是一个空格,再加上宽度描述符。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15243.html

宽度描述符就是图像原始的宽度,加上字符w。上例的四种图片的原始宽度分别为160像素、320像素、640像素和1280像素。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15243.html

第二步,sizes属性列出不同设备的图像显示宽度。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15243.html

sizes属性的值是一个逗号分隔的字符串,除了最后一部分,前面每个部分都是一个放在括号里面的媒体查询表达式,后面是一个空格,再加上图像的显示宽度。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15243.html


<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文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15243.html

第三步,浏览器根据当前设备的宽度,从sizes属性获得图像的显示宽度,然后从srcset属性找出最接近该宽度的图像,进行加载。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15243.html

假定当前设备的屏幕宽度是480px,浏览器从sizes属性查询得到,图片的显示宽度是33vw(即33%),等于160pxsrcset属性里面,正好有宽度等于160px的图片,于是加载foo-160.jpg文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15243.html

注意,sizes属性必须与srcset属性搭配使用。单独使用sizes属性是无效的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15243.html

四、<picture>标签,<source>标签

上面两节分别解决了像素密度和屏幕大小的适配,但是如果要同时适配不同像素密度、不同大小的屏幕,应该怎么办呢?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15243.html

这时,就要用到<picture>标签。它是一个容器标签,内部使用<source><img>,指定不同情况下加载的图像。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15243.html


<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>标签。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15243.html

<source>标签的media属性给出媒体查询表达式,srcset属性就是<img>标签的srcset属性,给出加载的图像文件。sizes属性其实这里也可以用,但由于有了media属性,就没有必要了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15243.html

浏览器按照<source>标签出现的顺序,依次判断当前设备是否满足media属性的媒体查询表达式,如果满足就加载srcset属性指定的图片文件,并且不再执行后面的<source>标签和<img>标签。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15243.html

<img>标签是默认情况下加载的图像,用来满足上面所有<source>都不匹配的情况。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15243.html

上面例子中,设备宽度如果不超过500px,就加载竖屏的图像,否则加载横屏的图像。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15243.html

下面给出一个例子,同时考虑屏幕尺寸和像素密度的适配。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15243.html


<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。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15243.html

五、<source>标签的type属性

除了响应式图像,<picture>标签还可以用来选择不同格式的图像。比如,如果当前浏览器支持 Webp 格式,就加载这种格式的图像,否则加载 PNG 图像。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15243.html


<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。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15243.html

浏览器按照<source>标签出现的顺序,依次检查是否支持type属性指定的图像格式,如果支持就加载图像,并且不再检查后面的<source>标签了。上面例子中,图像加载优先顺序依次为 svg 格式、webp 格式和 png 格式。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15243.html

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/zhizuo/15243.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定