img 响应式图片

srcset、sizes

对于兼容性不好的浏览器，会继续使用默认 src 属性中的图片

• srcset 支持定义几组图片和对应的尺寸
• sizes 支持一组媒体查询条件

<img
  srcset="example-320w.jpg 320w,
          example-480w.jpg 480w,
          example-800w.jpg 800w"
  sizes="(max-width: 320px) 280px,
         (max-width: 480px) 440px,
         800px"
  src="example-800w.jpg" alt="An example image">

• 获取设备视口宽度
• 从上到下找到第一个为真的媒体查询
• 获取该条件对应的图片尺寸
• 加载 srcset 中最接近这个尺寸的图片并显示

picture 标签

<picture>
  <source media="(max-width: 799px)" srcset="example-480w-portrait.jpg">
  <source media="(min-width: 800px)" srcset="example-800w.jpg">
  <img src="example-800w.jpg" alt="An example img">
</picture>