picture标签在响应式前端页面的作用

提起HTML中的图片标签，大家一定都知道img，但是对于<picture>标签可能很多人会觉得很陌生，但是这种前端场景大家一定很熟悉：

我们需要在前端页面上实现轮播图效果，电脑端加载一张较大的图片作为轮播图，移动端，如果还继续使用这种细长的图片的话，且如果继续将宽度设置为100%，那么图片高度会很小；如果我们设置一个固定高度的话，则会丢失图片焦点。一般情况下设计师会为每个终端设计不同的banner图片供前端切图使用，但在前端页面中，我们对于一个区域一般不会写多个img标签。而且即便我们写多个，然后用css媒体查询控制那张图片在哪个终端下显示，也还是会造成资源的浪费，因为浏览器打开时，会默认加载全部的资源，当然，这种写法最大的问题是实在太别扭了。

这个时候，强大的picture标签就派上用场了，<picture>标签可以让前端开发人员在处理响应式前端页面时更加灵活，可以根据不同的情况按需加载指定资源，接下来，我们详细介绍picture标签的使用：

<picture>标签需要嵌套一个<source>标签和一个<img>标签一起使用，<source>标签配合media媒体查询属性和srcset属性，用于告知浏览器选择什么情况下使用那张图片，<img>标签用于接收指定的图片并渲染至浏览器。

一般情况下，<source>标签在<img>标签之前，像上述的前端场景，我们就可以用如下代码很好的解决：

<picture>
    <source media="(max-width:768px)" srcset="photo/banner_mobile_01.jpg" />
    <source media="(min-width:768px) and (max-width:992px)" srcset="photo/banner_mobile_01.jpg" />
    <source media="(min-width:992px)" srcset="photo/banner_01.jpg" />
    <img src="photo/banner_mobile_01.jpg" />
</picture>

网上有人提到picture下嵌套的img标签，必须同时具有src属性和alt属性，否则不能正常渲染，实测没有这个要求。我们甚至可以直写一个<img />也可以正常渲染。

另外，很多人担心<picture>标签的支持度，这点其实大可不必担心，基本所有的主流浏览器都支持<picture>标签，甚至IE13也支持。

在使用<picture>标签时，要注意和我们之前讲过的srcset属性进行区分，两者有很多相似的地方，但是实际使用时，还是有很大的差别的。比如srcset在拖动浏览器的过程中，下载过的图片默认会缓存下来，再次满足显示条件时，会直接显示，而picture则会进行再次加载。