HTML的picture元素

HTML picture元素

HTML5新增了picture元素，它可以用于指定一组图像资源以适应不同的浏览器窗口大小和分辨率。细心的开发者会发现，对于使用img元素指定的图片，即使等比缩放，其像素分辨率仍与原始大小保持一致，对于高清晰度设备的用户，图片的显示效果可能看起来有些模糊。使用picture元素可以帮助我们更好地处理这些问题，提供在不同设备上合适大小且分辨率更高的图片资源。

使用picture元素

picture元素的使用和其他HTML元素类似。它们可以包含以下子元素：

多个source元素，用于指定不同的图片资源（通常是不同分辨率的资源）。
一个img元素，用于指定在所有条件都不匹配时使用的默认图片。

<picture>
  <source media="(min-width: 650px)" srcset="large.jpg">
  <source media="(min-width: 465px)" srcset="medium.jpg">
  <source srcset="small.jpg">
  <img src="fallback.jpg" alt="Picture">
</picture>

在上述示例中，picture元素定义了三个source元素和一个img元素。根据媒体查询和分辨率的指定，浏览器会选择最适合显示的图片资源。如果没有匹配的条件，则使用img元素的默认图片。

`source`元素的属性

`srcset`

srcset属性用于指定一组可能的图片资源，以逗号分隔。使用空格和w指定资源的分辨率或者图像容器的宽度，表示资源适合于的屏幕分辨率。

<picture>
  <source 
    media="(min-width: 650px)" 
    srcset="large.jpg 2048w, medium.jpg 1200w, small.jpg 640w">
  <source 
    media="(min-width: 465px)" 
    srcset="medium.jpg 1200w, small.jpg 640w">
  <source srcset="small.jpg 640w">
  <img src="fallback.jpg" alt="Picture">
</picture>

在上例中，我们依次指定了适用于不同分辨率或容器宽度的图片资源。srcset属性的值是可能的图片资源及其资源描述符（如宽度），多个资源用英文逗号隔开。从左到右，浏览器根据屏幕分辨率或容器宽度，选择第一个适合的图片资源。在选择过程中，我们必须以递减的宽度顺序提供srcset属性的值。通常是最大尺寸在前，最小尺寸在后。

`sizes`

sizes属性向浏览器描述图片容器的宽度，这帮助了浏览器选择相应的资源。sizes属性的值是适用于下列CSS媒体查询列表的一个描述，以及相应图片容器的宽度：

<picture>
  <source 
    media="(min-width: 650px)" 
    sizes="(min-width: 650px) 50vw, 100vw"
    srcset="large.jpg 2048w, medium.jpg 1200w, small.jpg 640w">
  <source 
    media="(min-width: 465px)" 
    sizes="(min-width: 465px) 50vw, 100vw"
    srcset="medium.jpg 1200w, small.jpg 640w">
  <source 
    sizes="100vw"
    srcset="small.jpg 640w">
  <img src="fallback.jpg" alt="Picture">
</picture>

在上述示例中，我们定义了一个sizes属性的值列表，这样对不同屏幕尺寸显示的图像区域就可以不断变化。对于宽度大于等于650px的设备，容器宽度为50vw或100vw的情况下选择图像文件。在宽度大于等于465px且小于650px的设备上，容器的宽度与上面相同。尽管我们指定的容器宽度是50vw，浏览器在解析sizes属性时会选择50vw和100vw之间最小的值。最后一个source元素的sizes属性只适用于图像容器的最大可用宽度（即100vw）。

`type`

type属性是一个类型MimeType或MimeTypes的列表。这个属性可以用来帮助将资源限制到 WebP 格式或特定的图片格式。

<picture>
  <source 
    type="image/webp" 
    srcset="image-large.webp 2048w, image-medium.webp 1200w, image-small.webp 640w">
  <source 
    type="image/jpeg" 
    srcset="image-large.jpg 2048w, image-medium.jpg 1200w, image-small.jpg 640w">
  <img 
    src="image-fallback.jpg" 
    alt="Example"
    sizes="100vw">
</picture>

在这个例子中，我们定义了两个source元素，每个元素都是关于type属性的示例。第一个元素中的type属性值是image/webp，对应的srcset属性值指定了WebP图像文件，而第二个元素的type属性值是image/jpeg，对应的srcset属性值指定了常规的JPEG图像文件。这里需要注意的是，如果当前浏览器不支持WebP格式，但指定的资源符合其它匹配条件，则仍会选择常规的JPEG文件。在这种情况下，假设浏览器支持WebP格式，它就将选择WebP格式图像文件。

`media`

media属性允许我们根据浏览器的屏幕宽度或显示约束条件来选择不同的资源。这个属性包含一个合法的媒体查询或适用于所有媒体类型的字符串值。在媒体查询中，min-width、max-width和orientation等特性可以帮助我们根据不同的屏幕宽度选择不同的资源。

<picture>
  <source 
    media="(min-width: 650px)" 
    srcset="image-large.jpg 2048w, image-medium.jpg 1200w, image-small.jpg 640w">
  <source 
    media="(max-width: 649px)" 
    srcset="medium.jpg 1200w, small.jpg 640w">
  <img 
    src="image-fallback.jpg" 
    alt="Example"
    sizes="100vw">
</picture>

在此示例中，我们提供了两个source元素，每个元素都含有一个media属性。如果当前设备的宽度小于650像素则，浏览器将使用第二个source元素所指定的图像文件"medium.jpg"和"small.jpg"。当宽度超过等于650像素时，浏览器将后退到第一个source元素。

`src`

src属性指定了在没有适当资源时应该显示的图片。

<picture>
  <source 
    media="(min-width: 650px)" 
    srcset="image-large.jpg 2048w, image-medium.jpg 1200w, image-small.jpg 640w">
  <source 
    media="(min-width: 465px)" 
    srcset="image-medium.jpg 1200w, image-small.jpg 640w">
  <source srcset="image-small.jpg 640w">
  <img 
    src="image-fallback.jpg" 
    alt="Example"
    sizes="100vw">
</picture>

在这个例子中，假设所有条件都不匹配，浏览器就会选择img元素的src属性中指定的默认图片。

关于性能的建议

picture元素有助于开发者在不同设备和分辨率上优化图片资源的大小和视觉效果，但也可能会产生一些性能方面的问题。

在使用picture元素时，不能一次性请求多张图片来专门应对不同的情况。这样会增加HTTP请求数和资源大小，降低网页加载速度。

另一个问题是，当不同的文件名与不同的大小和分辨率相关联时，这重复了同一图像的许多版本，可能会导致重复请求。这种情况下，可以采用WebP格式来减小文件大小，或者根据CSS媒体查询动态更改图像容器大小。

总而言之，不仅要使用picture元素，还应该遵循更好的优化实践，如使用适当的压缩和优化来减小图像大小，选择适当的文件格式和图像分辨率，并避免过度消耗带宽的请求。

HTML的param标签 HTML的pre标签

HTML的picture元素

HTML picture元素

使用picture元素

source元素的属性

srcset

sizes

type

media