响应式图像

图片大小会影响性能。在不同的设备上显示不同大小的图片就是响应式图片。根据设备的大小来选择要显示哪张图片。

主要注意两个属性： media type

这个属性内放媒体查询语句，如果结果为false，那么跳过

<picture>
  <source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
  <img src="mdn-logo-narrow.png" alt="MDN">
</picture>

指定资源类型，如果支持则用这个类型，如果不支持则跳过

<picture>
  <source srcset="mdn-logo.svg" type="image/svg+xml">
  <img src="mdn-logo.png" alt="MDN">
</picture>

MDN页面