chromium源码阅读--图片处理

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>，它能提供更好的图像质量，还容许用户控制回放。