chromium源码阅读--图片处理

Posted 2020-10-16 丹西

javascript 图像替换

JavaScript 图像替换技术检查设备能力，然后“做正确的事”。 您可以通过 window.devicePixelRatio 确定设备像素比，获取屏幕的宽度和高度，甚至可通过 navigator.connection 或发出假请求来执行某种网络连接嗅探。收集了所有这些信息后，您就可以决定加载哪个图像。

此方法的一大缺陷是，使用 JavaScript 意味着您将延迟加载图像，至少要等到先行解析器结束。 这意味着，图像要等到pageload 事件触发后才能开始下载。此外，浏览器很可能会同时下载 1x 和 2x 图像，导致页面重量增加。

内联图像：光栅图像和矢量图像

创建和存储图像有两种全然不同的方式，这将决定您如何以自适应方式部署图像。

光栅图像：如相片及其他通过单个颜色点网格表示的图像。光栅图像可来自照相机或扫描仪，也可以借助 html canvas 元素创建。可使用 PNG、JPEG 和 WebP 之类的格式存储光栅图像。

矢量图像：如徽标和艺术线条，是由一系列的曲线、直线、形状、填充色和渐变色定义的。矢量图像可通过 Adobe Illustrator 或 Inkscape 之类的程序创建，或使用 SVG 等矢量格式在代码中手动写入。

SVG

使用 SVG 可在网页中包含自适应矢量图像。矢量文件格式比光栅文件格式有优势的地方在于，浏览器可以渲染任何大小的矢量图像。矢量格式描述的是图像的几何图形，即该图像是如何通过线条、曲线和颜色等构造的。而光栅格式仅提供与单个颜色点有关的信息，因此，在进行缩放时，浏览器必须猜测如何填充空白。

内联的优缺点

图像的内联代码可能很冗长，特别是 Data URI 格式的图像，那么您为什么要使用它呢？为了减少 HTTP 请求！SVG 和 Data URI 可实现通过一个请求检索整个网页，包括图像、CSS 和 JavaScript。

缺点：

• 与来自外部 src 的图像相比，在移动设备上 Data URI 格式图像的显示速度要慢得多。
• Data URI 会显著增加 HTML 请求的大小。
• Data URI 会增加标记和工作流的复杂性。
• Data URI 格式的图像比二进制格式的图像大很多（最多大 30%），因此不会减小总下载大小。
• Data URI 无法缓存，因此必须为使用它们的每一个页面分别进行下载。
• IE 6 和 7 不支持 Data URI，IE8 仅提供有限支持。
• 对于 HTTP/2，减少资产请求的次数将使优先级下降。

由于所有格式都可以自适应，因此，您需要测试哪一种格式效果最佳。使用开发者工具衡量下载文件大小、请求的次数以及总延迟时间。对于光栅图像，Data URI 有时候非常有用，例如，如果主页只有一两张图像且这些图像没有在其他地方使用，则可使用 Data URI。如果您需要内联矢量图像，SVG 是一个比较好的选择。

选择正确的格式

有两种图像类型可以考虑：矢量图像与光栅图像。对于光栅图像，您还需要选择正确的压缩格式，例如：GIF、PNG、JPG。

光栅图像，如相片及其他通过单个的点或像素网格表示的图像。 光栅图像通常来自照相机或扫描仪，也可以在浏览器中借助 canvas 元素创建。 随着图像尺寸的增加，文件大小也相应地增加。 如果光栅图像放大时超过其初始尺寸，则会变得模糊，因为浏览器需要猜测如何填补缺失的像素。

矢量图像，如徽标和艺术线条，是由一系列的曲线、直线、形状和填充色定义的。 矢量图像使用 Adobe Illustrator 或 Inkscape 之类的程序创建，并保存为矢量格式，如 SVG。由于矢量图像是建立在简单基元上的，因此，可以进行无损质量的缩放，且文件大小不变。在选择正确的格式时，务必综合考虑图像的源格式（光栅图像还是矢量图像）及内容（颜色、动画、文本等等）。没有一种格式能够适用所有图像类型，它们各有优劣。

在选择正确的格式时，先参考以下指导准则：

• 摄影图像使用 JPG。
• 徽标和艺术线条等矢量插画及纯色图形使用 SVG。 如果矢量插画不可用，试试 WebP 或 PNG。
• 使用 PNG 而非 GIF，因为前者可以提供更丰富的颜色和更好的压缩比。
• 长动画考虑使用 <video>，它能提供更好的图像质量，还允许用户控制回放。