图像优化

标签：pre   根据   asics   with   mime   占用   实例   UNC   numbers   

常见的图像优化包括压缩，使用<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部分统一资源定位地址（从…开始）#一个图像映射与元素相关联的

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

<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>

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

图像优化

标签：pre   根据   asics   with   mime   占用   实例   UNC   numbers   

原文地址：https://www.cnblogs.com/Xuman0927/p/12342153.html