• 售前

  • 售后

热门帖子
入门百科

详解CSS玩转图片Base64编码

[复制链接]
462710480 显示全部楼层 发表于 2021-8-16 12:08:20 |阅读模式 打印 上一主题 下一主题
目次


  • 什么是 base64 编码?  
  • 为什么要使用 Base64 编码?  
  • CssSprites与Base64编码  
  • 更便捷的将图片转化为Base64编码  
  • 一些误区

    • 1. 使用 Base64 不代表性能优化
    • 2. 页面剖析 CSS 生成的 CSSOM 时间增长


什么是 base64 编码?  

我不是来讲概念的,直接切入正题,图片的 base64 编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替图像地点。
如许做有什么意义呢?我们知道,我们所看到的网页上的每一个图片,都是需要消耗一个 http 请求下载而来的(所有才有了 csssprites 技术的应运而生,但是 csssprites 有自身的局限性,下文会提到)。
没错,不管怎样,图片的下载始终都要向服务器发出请求,要是图片的下载不消向服务器发出请求,而可以随着 HTML 的下载同时下载到本地那就太好了,而 base64 正好能办理这个题目。
那么图片的 base64 编码长什么样子呢?举个栗子。www.google.com的首页搜索框右侧的搜索小图标使用的就是base64编码。我们可以看到:

  1. //在css里的写法
  2. #fkbx-spch, #fkbx-hspch {
  3.   background: url(data:image/gif;base64,R0lGODlhHAAmAKIHAKqqqsvLy0hISObm5vf394uLiwAAAP///yH5B…EoqQqJKAIBaQOVKHAXr3t7txgBjboSvB8EpLoFZywOAo3LFE5lYs/QW9LT1TRk1V7S2xYJADs=) no-repeat center;
  4. }
复制代码
  1. //在html代码img标签里的写法
  2. <img src="data:image/gif;base64,R0lGODlhHAAmAKIHAKqqqsvLy0hISObm5vf394uLiwAAAP///yH5B…EoqQqJKAIBaQOVKHAXr3t7txgBjboSvB8EpLoFZywOAo3LFE5lYs/QW9LT1TRk1V7S2xYJADs=">
复制代码
上面分别是图片的 base64 编码在 css 内里的写法和在 html<img> 标签里的写法。base64 编码长得就是这个样子,固然 base64 编码不但仅运用在图片编码,还可以:
thunder://QUFodHRwOi8vZG93bi5zYW5kYWkubmV0L3RodW5kZXI3L1RodW5kZXI3LjEuNS4yMTUyLmV4ZVpa(不要复制我我真的不是种子)
嘿嘿没错,迅雷的“专用地点”也是用 Base64 加密的,有爱好自行 google,不做赘述。

为什么要使用 Base64 编码?  

那么为什么要使用 base64 传输图片文件?上文也有提及,因为如答应以节流一个 http 请求。图片的 base64 编码可以算是前端优化的一环。效益虽小,但却缺能聚沙成塔。
说到这里,不得不提的是 CssSprites 技术,后者也是为了淘汰 http 请求,而将页面中许多微小的图片归并为一张大图。那么图片的 base64 编码和 CssSprites 有什么异同,又该怎样弃取呢?
所以,在这里要明确使用 base64 的一个条件,那就是被 base64 编码的图片充足尺寸小。以博客园的 logo 为例:

如图所示,博客园的 Logo 只有 3.27KB,已经很小了,但是如果将其制作转化成 base64 编码,生成的 base64 字符串编码足足有 4406 个,也就是说,图片被编码之后,生成的字符串编码巨细一般而言都会比原文件稍大一些。即便 base64 编码可以或许被 gzip 压缩,压缩率能到达 50% 以上,想象一下,一个元素的 css 样式编写居然超过了 2000个 字符,那对 css 团体的可读性将会造成十分大的影响,代码的冗余使得在此使用 base64 编码将得不偿失。
那么,是不是表现 base64 编码无用武之地呢?不然。当页面中的图片满足以下要求,base64 就能大显生手。
如果图片充足小且因为用处的特殊性无法被制作成雪碧图(CssSprites),在整个网站的复用性很高且根本不会被更新。
那么此时使用 base64 编码传输图片就可谓好钢用在刀刃上,思前想后,符合这个规则的,有一个是我们经常会遇到的,就是页面的背景图 background-image 。在许多地方,我们会制作一个很小的图片大概是几px*几px,然后平铺它页面当背景图。因为是背景图的缘故,所以无法将它放入雪碧图,而它却存在网站的许多页面,这种图片每每只有几十字节,却需要一个 http 请求,十分不值得。那么此时将它转化为 base64 编码,何乐而不为?
下面是一个只有 50 字节的2*2的的背景图。将其转化成 base64 编码,只有 100 多个字符,相比一个 http 请求,这种转换无疑更值得推崇。


CssSprites与Base64编码  

简单报告一下我对何时这使用这两种优化方法的看法。
使用CssSprites归并为一张大图:
页面具有多种风格,需要换肤功能,可使用CssSprites
网站已经趋于完美,不会再三天两头的改动(例如button巨细、颜色等)
使用时无需重复图形内容
没有 Base64 编码资本,低落图片更新的维护难度。(但注意 Sprites 同时修改 css 和图片某些时间可能造成负担)
不会增长 CSS 文件体积
使用base64直接把图片编码成字符串写入CSS文件:
无额外请求
对于极小大概极简单图片
可像单独图片一样使用,比如背景图片重复使用等
没有跨域题目,无需思量缓存、文件头大概cookies题目

更便捷的将图片转化为Base64编码  

将图片转化为 base64 编码有许多工具,例如本文中我所使用的http://www.pjhome.net/web/html5/encodeDataUrl.htm,但是许多这些网站是国外网站,经常被墙登岸不了。这里先容一个更为快捷的方法,就是使用 Chrome 欣赏器(我想 FEer 都应该有Chrome 欣赏器吧=。=)。
在 chrome 下新建一个窗口,然后把要转化的图片直接拖入欣赏器,打开控制台,点 Source,如下图所示,点击图片,右侧就会显示该图片的 base64 编码,是不是很方便。


一些误区

Base64 虽有优点,但是缺点也很显着,在使用上存在一些显着的缺陷。

1. 使用 Base64 不代表性能优化

是的,使用 Base64 的利益是可以或许淘汰一个图片的 HTTP 请求,然而,与之同时付出的代价则是 CSS 文件体积的增大。
而 CSS 文件体积的增大意味着什么呢?意味着 CRP 的壅闭。
CRP(Critical Rendering Path,关键渲染路径):当欣赏器从服务器吸收到一个HTML页面的请求时,到屏幕上渲染出来要经过许多个步调。欣赏器完成这一系列的运行,大概说渲染出来我们经常称之为“关键渲染路径”。
平凡而言,就是图片不会导致关键渲染路径的壅闭,而转化为 Base64 的图片大大增长了 CSS 文件的体积,CSS 文件的体积直接影响渲染,导致用户会长时间注视空缺屏幕。HTML 和 CSS 会壅闭渲染,而图片不会。

2. 页面剖析 CSS 生成的 CSSOM 时间增长

Base64 跟 CSS 混在一起,大大增长了欣赏器需要剖析CSS树的耗时。其实剖析CSS树的过程是很快的,一般在几十玄妙到几毫秒之间。
CSS 对象模子 (CSSOM):CSSOM是一个创建在web页面上的 CSS 样式的映射,它和DOM类似,但是只针对CSS而不是HTML。
CSSOM 生成过程:

CSSOM 生成过程大致是,剖析 HTML ,在文档的 head 部门遇到了一个 link 标记,该标记引用一个外部 CSS 样式表,下载该样式表后根据上述过程生成 CSSOM 树。这里我们要知道的是,CSSOM 阻止任何东西渲染,(意味着在CSS没处置惩罚好之前所有东西都不会展示),而如果CSS文件中混入了Base64,那么(因为文件体积的大幅增长)剖析时间会增长到十倍以上。
而且,最重要的是,增长的剖析时间全部都在关键渲染路径上。
所以,当我们需要使用到 Base64 技术的时,肯定要意识到上述的题目,有弃取的进利用用。
以上就是详解CSS玩转图片Base64编码的详细内容,更多关于CSS玩转图片Base64编码的资料请关注脚本之家别的相关文章!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作