图像优化

Posted 2021-03-08 xuman0927

常见的图像优化包括压缩，使用<picture>/<img srcset>根据屏幕大小响应式为它们服务，以及调整它们的大小以降低图像解码成本。

这个html<picture>元素包含零或更多<source>元素与一<img>元素为不同的显示/设备方案提供图像的替代版本。

浏览器将考虑每个孩子。<source>元素，并选择它们之间的最佳匹配。如果未找到匹配项或浏览器不支持<picture>element—the URL of the<img>元素的SRC属性被选中。然后在所占用的空间中显示所选择的图像。<img>元素

<picture>
    <source srcset="/media/examples/surfer-240-200.jpg"
            media="(min-width: 800px)">
    <img src="/media/examples/painted-hand-298-332.jpg" />
</picture>

要决定要加载哪个URL，用户代理检查每个<source>的srcset ,media和类型属性以选择与当前显示设备的当前布局和功能最佳匹配的兼容图像。

这个<img>元素有两个目的：

1. 它描述了图像的大小和其他属性及其表示。
2. 它提供了一个后退的情况下，没有提供。<source>元素能够提供可用的图像。

通用用例<picture> :

• 艺术指导裁剪或修改不同的图像media条件（例如，在较小的显示器上加载一个图像的简单版本，它有太多的细节）。
• 提供替代图像格式，对于不支持某些格式的情况。
• 节省带宽和加快页面加载时间通过为观看者的显示加载最合适的图像。

如果为高DPI（视网膜）显示提供更高密度的图像，请使用srcset上<img>元素代替。这使得浏览器在数据保存模式中选择较低密度的版本，而不必显式写入。media条件

srcset用逗号分隔的一个或多个字符串，指示可能的图像源用户代理使用。每个字符串由以下组成：

1. 一统一资源定位地址对图像
2. 可选地，空白之后跟着一个：
   • 宽度描述符（正整数紧跟其后）w）宽度描述符由源代码中的源大小分隔。尺寸属性来计算有效像素密度。
   • 像素密度描述符（正浮点数直接跟随）x .

如果未指定描述符，则将源的默认描述符指定为1x .

在相同的范围内混合宽度描述符和像素密度描述符是不正确的。srcset属性。重复描述符（例如，两个源）srcset这两者都被描述为2x也无效

用户代理可以随意选择任何可用的源。这为他们提供了一个重要的余地，可以根据用户喜好或喜好来定制他们的选择。带宽条件看到我们响应图像教程为例

width以像素为单位的图像的固有宽度。必须是没有单位的整数。usemap部分统一资源定位地址（从…开始）#一个图像映射与元素相关联的

笔记如果使用此属性，则不能使用此属性。<img>元素在一个<a>或<button>元素

实例

这些示例演示了不同属性的<source>元素改变图像内部的选择<picture> .

媒体属性

这个media属性指定用户代理将为每个用户评估的媒体条件（类似于媒体查询）。<source>元素

如果<source>媒体条件评估为假浏览器跳过它来评估内部的下一个元素<picture> .

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

SRCSET属性

这个srcset属性用于提供可能的图像列表。基于尺寸 .

它由一个逗号分隔的图像描述符列表组成。每个图像描述符由图像的URL组成，并且要么…

• 一宽度描述符后面跟着一个w（如300瓦 );
  或
• 一像素密度描述符其次是x（如2X为高DPI屏幕提供高清晰度图像。

<picture>
  <source srcset="logo-768.png 768w, logo-768-1.5x.png 1.5x">
  <source srcset="logo-480.png, logo-480-2x.png 2x">
  <img src="logo-320.png" alt="logo">
</picture>

类型属性

这个type属性指定哑剧类型中的资源URL（s）<source>元素的srcset属性。如果用户代理不支持给定的类型，则<source>元素被跳过

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

规格