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>
,它能提供更好的图像质量,还允许用户控制回放。
chromium源码阅读--图片处理的更多相关文章
- [原创]chromium源码阅读-进程间通信IPC.消息的接收与应答
chromium源码阅读-进程间通信IPC.消息的接收与应答 chromium源码阅读-进程间通信IPC.消息的接收与应答 介绍 chromium进程间通信在win32下是通过命名管道的方式实现的 ...
- chromium源码阅读--Browser进程初始化
最近在研读chromium源码,经过一段懵懂期,查阅了官网和网上的技术文章,是时候自己总结一下了,首先IPC message loop开始吧,这是每个主线程必须有的一个IPC消息轮训主体,类似之前的q ...
- chromium源码阅读--HTTP Cache
最近积累了一些关于HTTP缓存的知识,因此结合Chromium的实现总结一下,主要从如下2个分面: 1.HTTP缓存的基础知识 2.Chromium关于HTTP缓存的实现分析 一.HTTP缓存的基础知 ...
- chromium源码阅读--进程的Message Loop
上一篇总结了chromium进程的启动,接下来就看线程的消息处理,这里的线程包含进程的主进程. 消息处理是由base::MessageLoop中实现,消息中的任务和定时器都是异步事件的. 主要如下几点 ...
- chromium源码阅读--进程间通信(IPC)
第一篇就有提到Chromium是目前默认是采用多进程架构,当然,chromium有singe-process的版本. 多进程与多线程的区别,确实有很多可以讲的,我的另一篇博客也讲了一些,这里是从浏览器 ...
- chromium源码阅读--V8 Embbeding
V8是google提供高性能JavaScript解释器,嵌入在chromium里执行JavaScript代码. V8本身是C++实现的,所有嵌入本身毫无压力,一起编译即可,不过作为一个动态语言解释器, ...
- chromium源码阅读
linux下chromium的入口函数在文件:src/chrome/app/chrome_exe_main_aura.cc 中 int main(int argc, const char** argv ...
- 【原】AFNetworking源码阅读(六)
[原]AFNetworking源码阅读(六) 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 这一篇的想讲的,一个就是分析一下AFSecurityPolicy文件,看看AF ...
- 【原】AFNetworking源码阅读(五)
[原]AFNetworking源码阅读(五) 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 上一篇中提及到了Multipart Request的构建方法- [AFHTTP ...
随机推荐
- 【TOJ 4475】The Coolest Sub-matrix(对角线前缀和)
描述 Given an N*N matrix, find the coolest square sub-matrix.We define the cool value of the square ma ...
- [洛谷P1390]公约数的和·莫比乌斯反演
公约数的和 传送门 分析 这道题很显然答案为 \[Ans=\sum_{i=1}^n\sum_{j=i+1}^n (i,j)\] //其中\((i,j)\)意味\(gcd(i,j)\) 这样做起来很烦, ...
- ATX 浅谈自动化测试工具 python-uiautomator2
1.简介 python-uiautomator2是一个自动化测试开源工具,仅支持Android平台的原生应用测试. 2.支持平台及语言 python-uiautomator2封装了谷歌自带的uiaut ...
- python核心编程2 第十二章 练习
12–5. 使用 __import__().(a) 使用 __import__ 把一个模块导入到你的名称空间. 你最后使用了什么样的语法? (b) 和上边相同, 使用 __import__() 从指定 ...
- CDN初识
CDN 全称:Content Delivery Network或Content Ddistribute Network,即内容分发网络,通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层 ...
- jquery获取周对应的日期
项目中用到按周显示的功能,找了一个,然后自己修改了一下,留着以后用: 这是代码,要是直接显示的话就把第43行去掉就行了,如果想要得到数据按照自己的想法重新渲染就保留43行,直接看51行,52行就是你要 ...
- jmeter测试报告优化
1.下载jmeter.results.shanhe.me.xsl 将该文件拷贝到jmeter\extras目录下 2.修改jmeter.results.shanhe.me.xsl 这里直接拷贝 jme ...
- Typora -- 书写即美学
#Typora -- 书写即美学 ##基本快捷键--需要在所见即所想界面进行输入 加粗 Ctrl + B 加粗 斜体 Ctrl + I 斜体 下划线 Ctrl + U 下划线 删除线 Ctrl + S ...
- PHP环境搭建-记录
转于 http://jingyan.baidu.com/article/fcb5aff797ec41edaa4a71c4.html php5.5 做了大量的更新,在与apache搭配的时候如何选择也很 ...
- (数据科学学习手札34)多层感知机原理详解&Python与R实现
一.简介 机器学习分为很多个领域,其中的连接主义指的就是以神经元(neuron)为基本结构的各式各样的神经网络,规范的定义是:由具有适应性的简单单元组成的广泛并行互连的网络,它的组织能够模拟生物神经系 ...