掌握响应式图片载入：发现 <picture> 元素的优势

< picture >

picture element支援度:Can I Use)

<picture> :常被用在RWD网站

功能根据媒体条件 (media conditions) 自动载入不同的图片。根据浏览器对图片格式 (format) 的支援度自动载入相容格式的图片(ex.动态判断载入 webp 或 jpeg)架构

<picture>  <!-- One or more source elements -->  <source srcset="..." type="..." media="...">    <!-- Fallback image for browsers that do not support picture element -->  <img src="..." alt="..."></picture>

<picture> 本身是一个容器 (container)，里面会有零至多个 <source> 和一个 <img> 设定不同的图片，浏览器会先从 <source> 去找有匹配条件的图片，如果没有的话 (或浏览器不支援 <picture> 标籤) 则使用 <img> 所设定的图片。

< source >

source element支援度:Can I Use)
<source> 元素为 <picture>、<audio> 和 <video> 元素指定一个或多个媒体资源

<source> :主要用来设定不同条件下使用的图片

属性media:可以指定media query条件，当media query条件不吻合，浏览器会继续往下比对下一个 <source> 或预设使用 <img> 所设定的图片。srcset:指定一张或多张不同尺寸大小 (size) 的图片，浏览器会自动判断当在不同的萤幕宽度或不同的萤幕解析度，自动载入最合适大小的图片(指定尺寸可以用实际图片宽度或萤幕解析度来当单位)srcset的语法是以空格分隔的'档案路径 URL 尺寸大小单位'，若有多张不同尺寸的图片，则以逗点分隔。这里w表示图片的像素宽度，而x则表示萤幕解析度，如智慧型手机的Retina萤幕可能为2x、3x解析度。type:指定图片的文件格式，可以利用type来做到不同浏览器载入不同格式的图片。ex:用来说明这张图是webp或jpeg的图片，当浏览器不支援此格式时会自动忽略这张图

<!-- Setting media in more source elements --><picture>  <source srcset="test-wide.png" media="(min-width: 1200px)">  <source srcset="test-mid.png" media="(min-width: 600px)">  <img src="test-narrow.png"></picture><!-- Setting size in source --><picture>  <source srcset="test-768.png 768w, logo-768-1.5x.png 1.5x">  <source srcset="test-480.png, logo-480-2x.png 2x">  <img src="test-320.png"></picture><!-- Setting type in source --><picture>  <source srcset="test.webp" type="image/webp">  <img src="test.png"></picture>

参考来源

https://www.fooish.com/html/picture-tag.htmlhttps://www.w3schools.com/tags/tag_picture.asphttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/sourcehttps://webdesign.tutsplus.com/quick-tip-how-to-use-html5-picture-for-responsive-images--cms-21015t