Html Picture

picture

需要同时处理“分辨率切换”和“图像切换”，并且 picture 标签是最好的解决方案。

分辨率切换 : 使用img，使用属性 解决 srcset 和 size；
分辨率切换和图像切换 ： 使用 picture 标签的媒体查询和其他属性轻松实现

//  srcset 属性接收多个图像，其宽度都以像素为单位，浏览器使用这些值在提供的图像之间进行选择
//  sizes 属性定义图像将在屏幕上占据的空间

  <picture>
    <source
      srcset="small-car-image.jpg 400w, medium-car-image.jpg 800w, large-car-image.jpg 1200w"
      sizes="(min-width: 1280px) 1200px,(min-width: 768px) 400px,100vw"
    />
    <img src="medium-car-image.jpg" alt="Car" />
  </picture>

// 在上面的示例中，同一图像有 3 个版本，具有 3 种不同的尺寸
// 如果屏幕的最小宽度为 1280px，则图像将占据 1200px。


// 建议不要仅将 picture 标签用于分辨率切换使用，可以使用img标签

  <img
    srcset="small-car-image.jpg 400w, medium-car-image.jpg 800w, large-car-image.jpg 1200w"
    sizes="(min-width: 1280px) 1200px,(min-width: 768px) 400px,100vw"
    src="medium-car-image.jpg"
    alt="Car"
  />

使用媒体属性切换图像

图像切换背后的主要思想是根据设备的屏幕尺寸显示不同的图像。
在大多数情况下，切换到移动设备时，在大屏幕上看起来很棒的图像可能会被裁剪或显得很小；

可以为不同的屏幕尺寸提供不同版本的图像来解决这一问题（不同版本 可以是同一图像的横向，纵向或任何自定义版本）

// picture 标签中的多个 source 标签轻松实现分辨率切换

  <picture>
    <source ....>
    <source ....>
    <source ....>
  </picture>

  <picture>
    <source
      media="(orientation: landscape)"
      srcset="land-small-car-image.jpg 200w, land-medium-car-image.jpg 600w, land-large-car-image.jpg 1000w"
      sizes="(min-width: 700px) 500px,(min-width: 600px) 400px,100vw"/>
    <source
      media="(orientation: portrait)"
      srcset="port-small-car-image.jpg 700w, port-medium-car-image.jpg 1200w, port-large-car-image.jpg 1600w"
      sizes="(min-width: 768px) 700px,(min-width: 1024px) 600px,500px"/>
    <img src="land-medium-car-image.jpg" alt="Car" />
  </picture>

// 屏幕方向是横向，则浏览器将显示第一组图像；
// 如果屏幕方向是纵向，则浏览器将使用第二组图像


// media 属性与 max-width 和 min-width 参数一起使用

  <picture>
    <source media="(max-width: 767px)" ....>
    <source media="(min-width: 768px)" ....>
  </picture>


// img 标签用于向后兼容不支持 picture 标签的浏览器。

用于受部分支持的图像类型

新的图像格式,其中一些格式（例如 webp、svg 和 avif）提供了更高的用户体验水平;
某些浏览器对这些现代图像类型存在限制，如果我们不使用兼容的图像类型，事情将会适得其反

  <picture>
    <source srcset="test.avif" type="image/avif">
    <source srcset="test.webp" type="image/webp">
    <img src="test.png" alt="test image">
  </picture>

// avif、webp 和 png 格式的三种图像类型

// 浏览器将尝试 avif 格式；
// 如果失败，则将尝试 webp 格式。
// 如果浏览器不支持这两种方式，它将使用 png 图像

Chrome中 Rendering 标签可以模拟 浏览器对 AVIF 和 webP 图片的格式的支持情况