chromium源码阅读--图片处理

Posted 丹西

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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 是一个比较好的选择。

选择正确的格式

有两种图像类型可以考虑:矢量图像光栅图像。对于光栅图像,您还需要选择正确的压缩格式,例如:GIFPNGJPG

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

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

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

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

以上是关于chromium源码阅读--图片处理的主要内容,如果未能解决你的问题,请参考以下文章

chromium源码阅读

chromium源码阅读--Browser进程初始化

chromium源码阅读--HTTP Cache

如何获取最新chromium源码

SDWebImage源码阅读UIImage+GIF

chromium中的GN构建系统