picture浏览器内置的响应式标签

picture标签提供可声明式的方式来加载图片。网页开发者不必非要用CSS和JS来处理响应式的图片加载。用这种方式的好处是提高加载速度—尤其是在移动端时网络情况不好的时候。

随着新的属性srcset、sizes加入到img标签，picture标签给网页开发者更多的灵活性来定义图片的源。书写清晰的标记来让浏览器检测到下面不同的标记，忽略还是加载，来支持响应式设计并提高加载的时间：

艺术的选择

这是一个手机端的应用还是一个桌面端的显示？根据浏览器规格优化图片的加载

设备像素比例的选择

设备是否支持高DPI显示？加载分辨率更高的图片。

视窗的选择

图片是否一直填充在视窗的一部分？相对于视窗的图片加载

图片格式的选择

浏览器是否支持更小的图片类型？加载可替换的图片类型如：WebP

为美的设计而用

最普遍的应用picture元素是在响应式设计中的美术设计。代替一张图片缩放来适应窗口的大小的方式，用多张图片的设计来适应浏览器的窗口。

用一张图片来适应不同屏幕窗口的大小

用多张不同的图片来适应不同窗口的大小

提高资源的加载性能

当用picture或者用的srcset和sizes属性，浏览器仅仅会下载对应明确的适合的图片。这种本地实现的方式可以很好的被解析并最好的使用浏览器级的缓存和预加载。

查看在线示例

事实上网络被创建用于加载一张猫的图片。用picture我们可以模拟难以想象的猫的能力来适应空间，不管网页多大或者多小。

打开示例页面用chrome8以上的版本。调整浏览器的视窗大小。作为一个开始，这个例子仅仅突出了picture的最小的特性。让我们深入的开始钻研下吧。

picture语法

下面的HTML和CSS的片段就是这个例子的代码实现：

styleimg{display:block;margin:0auto;}/stylepicturesourcemedia="(min-width:px)"srcset="images/kitten-stretching.png"sourcemedia="(min-width:px)"srcset="images/kitten-sitting.png"imgsrc="images/kitten-curled.png"alt="acutekitten"/picture

注意下这没有用js和第三方的库。CSS的style块是用来定义image元素样式而且没有包含mediaqueries.picture元素的本地实现意味这你可以只用HTML来声明响应式图片。

用**source元素**

picture标签它本身没有属性。神奇的地方是picture被用来当做source的容器。source元素，是用来加载多媒体的比如视频和音频，已经被更新用到图片的加载并且一些新的属性已经被添加：

srcset(必需)接受单一的图片文件路径(如：srcset="kitten.png").或者是逗号分隔的用像素密度描述的图片路径(如：srcset="kitten.png,ketten

x.ngx"),1x的描述是默认不使用的。关于

media(可选)接受任何验证的mediaquery,你可以看到在CSS

media选择器(如：media="(max-width:0em)").在之前的picture语法的例子里已经用到了。

sizes（可选）接收单一的宽度描述(如：sizes="vw")或者单一的mediaquery宽度描述(如：sizes="(max-width:0em)vw").或者逗号分隔的mediaquery对宽度的描述(如：sizes="(max-width:0em)vw,(max-width:50em)50vw,calc(vw-px)")最后的一个被当做默认的。

查看[Combinewithwidthdescriptors](Combinewithwidthdescriptors)看如何使用

type(可选)接受支持的MIME类型(如:type="image/webp"ortype="image/vnd.ms-photo")

查看[Loadalternativeimagefileformats](Loadalternativeimagefileformats)看如何使用.浏览器会根据这些提示和属性来加载确切的图片资源。根据标签的列表顺序。浏览器会使用第一个合适的source元素并忽略掉后面的source标签。

添加最后的img元素

img元素在picture内部用来当浏览器不支持时或者没有源标签匹配时的显示。在picture内使用img标签是必须得，如果你忘记了，将不会有图片显示出来。

用img来声明默认的图片显示。将img标签放到picture内的最后，浏览器在找到img标签之前会忽略source的声明。这个图片标签也需要你写上它的alt属性。

嵌入使用像素密度描述

增加高分辨率的像素密度描述，像1x,1.5x,x和x.新的srcset属性应用到img和source元素。

下面的例子支持1x,1.5x,和x的屏幕

picturesourcemedia="(min-width:px)"srcset="images/kitten-stretching.png,images/kitten-stretching

1.5x.png1.5x,images/kitten-stretching

x.pngx"sourcemedia="(min-width:px)"srcset="images/kitten-sitting.png,images/kitten-sitting

1.5x.png1.5ximages/kitten-sitting

x.pngx"imgsrc="images/kitten-curled.png"srcset="images/kitten-curled

1.5x.png1.5x,images/kitten-curled

x.pngx"alt="acutekitten"/picture

整合使用宽度描述

网页基础深入的描述过img元素：

"当图片最后的尺寸不知道的时候，确定图片源的密度是一件困难的事。特别是那些相对浏览器设置比例的图片，是依赖浏览器尺寸的。代替固定图片的大小和密度，每一个图片的尺寸可以通过增加一个宽度描述来确定，让浏览器自动的精确计算像素密度并选择最合适的图片下载。"

这是一个用sizes属性来设置图片比例相对窗口为80%的例子。它用srcset属性来响应4个版本的阳光房子的图片，宽度分别为px,0px,px,和px：

imgsrc="lighthouse-.jpg"alt="lighthouse"sizes="80vw"srcset="lighthouse-.jpgw,lighthouse-0.jpg0w,lighthouse-.jpgw,lighthouse-.jpgw"

浏览器将会用这些提示来选择最恰当的图片源来适应窗口宽度和硬件显示：

如图，左边的浏览器窗口大约px，浏览器将会加载lighthouse-.jpg，除非设备分辨率是x—in，lighthouse-.jpg图片才会被加载

增加picture元素，sizes属性被用到了img和source元素：

picturesourcemedia="(min-width:px)"sizes="80vw"srcset="lighthouse-landscape-.jpgw,lighthouse-landscape-.jpgw,lighthouse-landscape-.jpgw"imgsrc="lighthouse-.jpg"alt="lighthouse"sizes="80vw"srcset="lighthouse-.jpgw,lighthouse-0.jpg0w,lighthouse-.jpgw,lighthouse-.jpgw"/picture

在上面的例子中，当窗口在px并且大于时，浏览器将会加载对应版本的图片：

左边的时大于px的窗口，所以对应版本的图片将显示出来

加载可改变的图片格式

source元素的type属性可以用来加载可变图片文件格式，不过这并不是所有图片都支持。举个例子，你可以在支持的浏览器里使用WebP格式，在不支持的浏览器使用JPEG格式：

picturesourcetype="image/webp"srcset="images/butterfly.webp"imgsrc="images/butterfly.jpg"alt="abutterfly"/picture

其他代码示例

相关介绍对响应式图片:从示例和带注释的代码片段开始，在Dev.Opera博客有详细的关于picture和的srcset、media、sizes以及type属性介绍。

现在就试试吧

picture元素在Chrome8就可以使用了，用chrome的开发者工具模拟器开始尝试吧。

转载请注明：http://blog.hzbdfjk.com/sszl/7277.html