soarli

初次接触Base64记
之前看到过一些图片,链接长这个样子:一直好奇到底是怎么回事,是本地缓存还是啥,今天带着疑惑和猜测在一个偶然的机会中...
扫描右侧二维码阅读全文
11
2020/06

初次接触Base64记

之前看到过一些图片,链接长这个样子:

一直好奇到底是怎么回事,是本地缓存还是啥,今天带着疑惑和猜测在一个偶然的机会中这个问题迎刃而解!

看下面这张图片:

它的链接其实长这个样子:

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAGnAacDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD6pooooAKKKKACiiigAooooAKKKO1ABRSbh6ik3AetADqKbu+tJuI9KAH0UzcfWkyfU0ASUVH9c/nSUWAlyPWkyPao6KAJMj1oyPWo6KAJMj1oyPWo6KAJcj1oFRUUAS0VEOOmaXPuaAJKKj3HvilDfWgB9FICD0xS0AFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAAoFApCwFAC0hYCo8k96KFqA/d7Um4+1NooELk+9J9TRRQO4UUUUCCiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKAClBx3NJRQA8N60oIPSo6KBkv1oqNWPfpTwQehoAWiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKAKFvqdlO+yC6hdugAbOfpV7IxzXmGB3xx/n8DXV+Fr6S5hkt52LvFgqxP3lPr649+ahSuYU63NozoS2enSkooqzYKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKAHK3HNPHtUVKDjpQMkopFYGloAKKKKACiiigAooooAKKKKACiiigAooooAKKKKAPL6fBNLA++CR42/vKffv+P1pnSisE7Hmp21Oy8O6q1/E8UwH2iPBJA+8D3Hoa2a5DwcjHUJnUHYse0n3J9fwrr61i20d1KTcdQoooqiwooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooABTlPrTaKAJRRTFbsfwp4oGFFFFABRRRQAlFJkcjIp2aAuFFFFABRRRQAUUUUAcYPDF3/AM9rf9adH4XuC3z3MKr32qSf14zXWUUrIxVGJU06yhsIPLgBxnJYnJJ9T78VbooprsaJWVgooooGFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAU5WxwabRQA/ANH8qRTVa9uUtYTJJzzgD1P+RR6g2lqWu3tXO6tfyPO8UTFY14JB+8f5/5PaopNVunOQyoM9AOn4nr+lUiSSSTkk5Pvknn86zlNHNUrXVkKrFTlWYMDkEEj9a3NGvnlLQTHMi8hvX6/wCeawqkgleCUSREBhwMjPBpRdjKE3FnYikB5rN0zUPtW5HASYdQOc8/pWn2rVM7k7q6FooooGFFFFAEVFFFAgooooAKKKKACiiigAooooAKKO9VNQmKRhUJDMeo7Ur6aib0JnuIkJDSLkf57U5JEkGUcMO+KxB7U6KQxOHU89/p/X+lSpGaqG5RSRsGUMOhwR9KWr3NU7q4UUUUAFFFFABRRUF3dQWNpLc3s8UFtCm6WWRgqoo7sTwB70MCeql/qVjp6hr+9trZSMgzyhPX1Ir59+JHxyub1pdP8Dsbe15V9UkX55B6xI3Qf7TDkdB0NeI3Ra9uWub6SS7uGOTNcMZXbvkl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qlJXU9j+nb9K26zdSiw4kHRuD7e9FtCq8bq5UoooqThCiiigAooooAKKKKACiiigApkriOJ2boB/9b+dPqK5tri4iVYIy69znHTp1o6BZtaGSW3EljTc+laUWjXch5VIx7nP8h/WtC10SKMg3DtKR2+6Px9f5VCg2Zxw05GJaWs102IUyO7HgD/E10mnafHZqT96Q9WI6/T2q7GixqFRQqgYAHpTq0jFRPQo4dU9QoooqjpCiiigAooooAKKKKACiiigAooooAKqX0PmR7lHzr+Z/wDr1booJlHmVjCHSirt5aEZkjGe5X+tUvpUWOCcHFu4UUUUGYUUUUAFFFFABRRUttA07YHCg8tj/PP8qEuxUYtvQfZQebJlh8q9fc/55/KtUVHFGscYVeBUlUlY9CnDkQUUUUywooooAKKKKAPIviOAviRsd4lP6n/CqHg2MS+JbFD2cn8gf8K7/wATeE4dWvhdPcvG2wLtVR2JPf603w/4Oh0vUIrxbl5CgOFKgdcjt9ay5W5HxFTI8RLMfrFvdvc68fdooorU+2WwVHLGJI2U9D/nNSUUDtdWMN1KOVbqDj6j/wDVSVq3VuJUyMBx0Pt/hWUVKsQykHuPT/6386ho8+pT5GFFFFBkFFFFABRRRQAUUUIpZgqgs3tQNK+iHRRmVwqjk/p/kf4VsQoI4wo7dP8AGorS3ECZJy/GT/ntViqSsd1GnyLUKKKKZsFFFFABRRRQAUUUUAFFFFABRS4pKACiiigAooooAKKKKACqlxZiQlkO1/51boo9SZRUtzFkieI4kQj36g/j/wDqpg9q3cAjnHPtVeS0hfqoH+7kfyqeU5pYfqjKorQOnp2dhSDTx3kb8sUrMhUJFChQSflBJ9BWkljGvXcx9z1qzHGiLhFCj2GM07FRw7e5n29iTzNwP7vc/j6VooqooVQAPSloppW2OmMFAKKKKZYUUUUAFFFFADXbajN6DNU/tEnOGFXx6GmBR6UjKcJS2ZnO7OfmOTV61yYRk+36mpMDtS+wxQkKnTcHqwooopmwUUUUAFQzwJMvzZBHQjtU1FC7MTSejMiW1kiycbl9Rzx/n61CK3hULwRyfeQE+v8A9ep5exzSw6exj0VpGwQ8h2X8c/zFM/s8dfMP5ClYz9hIoUfX8PetFbBB1ZjViKCOP7qAH1IosOOHbepmwWsknOCq+p44rRghSEEKOe5Pf6mpqSqSsdMKagFFFFM0CiiigAooooAKKKKACiiigAooooAlIyKjII6/hUgoI4oGRUUpGKSgVgooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAlooooGAphXuKfQKAIqKkK56dajx60CCiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKAJaKKKBhRRRQAUhAxzRRQAwjFJRRSQMKKKKYgooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooA//2Q==

它的实现实际上就是通过计算机内部既定的一种编/解码规则对图像进行一种文本化操作,说白了就是可以将一张图片数据编码成一串字符串,使用该字符串代替图像地址url

我尝试转了几张不同格式的图片,它们毫无例外地都变大了,明显是用html文本资源换取图像本身资源嘛。

能想到的一个应用场景就是对于纯静态+CDN的网站,面对巨大的请求/并发,减轻CDN/源站的压力。

难怪很多网站Logo都采用这种方式。

在网上查阅资料,总结如下:

使用base64图片的优点:

1、减少http请求次数,加快小图像的加载时间。
2、采用base64的图片随着页面一起下载,因此不会存在跨域请求的问题
3、没有图片更新要上传图片,因此不会造成清理图片缓存的问题

使用base64图片的缺点:

1、增加css文件的大小
2、浏览器兼容性
3、解析css的时间增长
经过Base64 编码后的文件体积一般比源文件大 30% 左右

一位CSDN博主顺便提到了另一个概念:cssprites技术

cssprites技术就是将多个图片合成一个大的图片,将多次图片请求合成一张大图的请求,以此来达到减少http请求的次数。

使用cssprites合成一张大图的优缺点
页面具有多种风格,需要换肤功能,可使用CssSprites
图片不随意改动
使用时无需重复图形的内容
没有base64编码成本,降低图片更新的维护难度
-不会增加css文件体积
使用base64直接把图片编码成字符串写入css文件:
无额外请求
对于极小或者及简单图片
-可像独立图片一样使用,比如背景图片重复使用等
没有跨域问题,无需考虑缓存,文件头或者cookies问题
对于base64图片常见误区
base64虽有优点,但是其缺点也很明显,在使用上存在一些明显的缺陷
1、使用base64不代表性能优化,使用base64减少了http请求,但是增加了css文件的体积,css文件体积增大意味着CRP的阻塞

CRP(Critical Rendering Path,关键渲染路径):当浏览器从服务器接>收到一个HTML页面的请求时,到屏幕上渲染出来要经过很多个步骤。浏>览器完成这一系列的运行,或者说渲染出来我们常常称之为“关键渲染路
径”。

三级
图片不会导致关键渲染路径的阻塞,而转换为base64后大大增加了css文件的体积,css文件的体积直接影响渲染,导致空白屏幕时间增长,html和css会阻塞渲染,而图片不会阻塞渲染

浏览器的兼容性:

贴上几个Base64转换工具:
open.soarli.top/webapps/base64/
base64.us/
www.css-js.com/tools/base64.html
tool.oschina.net/encrypt?type=4

参考文章:

blog.csdn.net/qq_46244454/article/details/104188569

blog.csdn.net/steve_sjf/article/details/102628854

最后修改:2020 年 06 月 11 日 02 : 23 PM

发表评论