图片转为base64格式的优缺点分析

这篇具有很好参考价值的文章主要介绍了图片转为base64格式的优缺点分析。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1. 优点

(1)网页中使用base64格式的图片时,不用再请求服务器调用图片资源,减少了服务器访问次数。

(2)base64编码的字符串,更适合不同平台、不同语言的传输;

(3)算法是编码, 不是压缩, 编码后只会增加字节数,但是算法简单, 几乎不会影响效率,算法可逆, 解码很方便, 不用于私密信息通信;

(4)解码方便, 但毕竟编码了, 肉眼还是不能直接看出原始内容;

2. 缺点

(1)base64格式的文本内容较多,转换后的大小会增加(大概增加1/3,不绝对),它会增加css的体积或者存储在数据库中增大了数据库服务器的压力;

(2)网页加载图片虽然不用访问服务器了,但因为base64格式的内容太多,所以加载网页的速度会降低,可能会影响用户的体验。

(3)base64无法缓存,要缓存只能缓存包含base64的文件,比如js或者css,这比直接缓存图片要差很多,而且一般HTML改动比较频繁,所以等同于得不到缓存效益。

3、用法

//在css里的写法

#fkbx-spch, #fkbx-hspch {

  background: url(data:image/gif;base64,R0lGODlhHAAmAKIHAKqqqsvLy0hISObm5vf394uLiwAAAP///yH5B…EoqQqJKAIBaQOVKHAXr3t7txgBjboSvB8EpLoFZywOAo3LFE5lYs/QW9LT1TRk1V7S2xYJADs=) no-repeat center;

}
//在html代码img标签里的写法

<img src="data:image/gif;base64,R0lGODlhHAAmAKIHAKqqqsvLy0hISObm5vf394uLiwAAAP///yH5B…EoqQqJKAIBaQOVKHAXr3t7txgBjboSvB8EpLoFZywOAo3LFE5lYs/QW9LT1TRk1V7S2xYJADs=">

使用 Base64 不代表性能优化

是的,使用 Base64 的好处是能够减少一个图片的 HTTP 请求,然而,与之同时付出的代价则是 CSS 文件体积的增大。

而 CSS 文件体积的增大意味着什么呢?意味着 CRP 的阻塞。

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

通俗而言,就是图片不会导致关键渲染路径的阻塞,而转化为 Base64 的图片大大增加了 CSS 文件的体积,CSS 文件的体积直接影响渲染,导致用户会长时间注视空白屏幕。HTML 和 CSS 会阻塞渲染,而图片不会。

页面解析 CSS 生成的 CSSOM 时间增加

Base64 跟 CSS 混在一起,大大增加了浏览器需要解析CSS树的耗时。其实解析CSS树的过程是很快的,一般在几十微妙到几毫秒之间。

CSS 对象模型 (CSSOM):CSSOM是一个建立在web页面上的 CSS 样式的映射,它和DOM类似,但是只针对CSS而不是HTML。

CSSOM 生成过程:

图片转为base64格式的优缺点分析
CSSOM 生成过程大致是,解析 HTML ,在文档的 head 部分遇到了一个 link 标记,该标记引用一个外部 CSS 样式表,下载该样式表后根据上述过程生成 CSSOM 树。 这里我们要知道的是,CSSOM 阻止任何东西渲染,(意味着在CSS没处理好之前所有东西都不会展示),而如果CSS文件中混入了Base64,那么(因为文件体积的大幅增长)解析时间会增长到十倍以上。

而且,最重要的是,增加的解析时间全部都在关键渲染路径上。

4.题外话

 一般20KB以下的小图片适合用base64,网站的小图片小 logo 之类的可以使用 base64 图片来引入。文章来源地址https://www.toymoban.com/news/detail-445939.html

到了这里,关于图片转为base64格式的优缺点分析的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • (电路汇总)ACDC电源电路 优缺点分析

    1.ACDC模块 2.工频变压器降压电路 3.阻容降压电路 4.超高压buck 5.单端反激开关电源 6.其他拓扑开关电源         各种拓扑的最终目的是把干扰做小,电流做大,电压范围做宽 引用: https://gitee.com/qylhhxx/common-power-circuit.git

    2024年02月11日
    浏览(65)
  • 市面上的AR眼镜:优缺点分析

    AR眼镜是近年来备受关注的科技产品之一。它通过将虚拟信息叠加到现实世界中,为用户提供全新的视觉体验。目前,市面上的AR眼镜主要分为两类:消费级AR眼镜和企业级AR眼镜。 消费级AR眼镜 消费级AR眼镜的特点是轻便、时尚、易于佩戴,价格相对较低。其典型代表产品包

    2024年01月23日
    浏览(55)
  • 文心一言的优缺点分析及改进思路

    随着人工智能技术的不断发展,越来越多的人们开始关注如何利用人工智能技术提高写作效率和质量。而文心一言作为一款基于深度学习算法的智能写作工具,已经成为日常写作中广泛使用的一种工具。但是,任何一种工具都有其优点和缺点,在使用文心一言时也需要认真考

    2024年02月16日
    浏览(61)
  • 浅析switch和if(开发中这两者的优缺点;分析出优缺点在使用就能更确定自己需要使用哪个函数了)

    分析: switch是在编译阶段将子函数的地址和判断条件绑定了,只要直接将a的直接映射到子函数地址去执行就可以了, if处理起来首先要把a的值放到CPU的寄存器中,然后要把比较的值放到CPU的另一个寄存器中,然后做减法,然后根据计算结果跳转到子函数去执行,这样一来就

    2024年02月09日
    浏览(55)
  • 深度分析去中心化交易所的优缺点

    一、什么是去中心化交易所? 去中心化交易所,英文名称Decentralized Exchange,简称DEX。与中心化交易所不同,DEX不需要注册账户并认证,用户使用数字资产账户即可进行交易。每笔交易都通过区块链进行,需要等待区块链的确认才算交易成功。 二、去中心化交易所或协议 目前

    2024年02月02日
    浏览(54)
  • 简述Keepalived LVS 原理以及两者的优缺点对比分析

    本文章主要围绕Keepalived,lvs的工作原理以及两者的优缺点进行对比分析。My BLOG:https://blog.itwk.cc 什么是Keepalived? Keepalived是基于VRRP协议(Virtual Router Redundancy Protocol)是Linux下一个轻量级高可用解决方案(HA),其实两种不同的含义,广义来讲,是指整个系统的高可用行,狭

    2023年04月08日
    浏览(50)
  • 五款数字孪生软件大比拼:优缺点分析测评报告

    数字孪生 (Digital Twin)作为当前最为火热的技术之一,已经被广泛应用于各种领域,包括航空、交通、能源、医疗、智能制造等行业。在数字孪生的实现中,数字孪生软件起到了重要的作用,因此市面上出现了很多数字孪生软件。本文将介绍国内的5款数字孪生软件,并从使

    2024年02月11日
    浏览(51)
  • 云服务器和本地服务器的优缺点分析

    服务器是企业IT基础设施的命脉,可用于存放文件、应用程序、网站、员工远程访问等等。当然,选择时有许多不同类型的服务器和许多需要考虑的因素。目前比较流行的两种服务器类型是本地服务器和基于云的服务器。 本地服务器 本地服务器放置在公司的办公室中,可以是

    2024年02月09日
    浏览(46)
  • 项目协作软件对比分析:各大竞品的优缺点客观评析

    随着科技的发展,越来越多的企业和团队开始使用项目协作软件来提高工作效率和协同能力。然而,市场上众多的项目协作软件让许多用户感到困惑,不知道如何选择最适合自己的工具。本文将从多个角度对目前市场上的主要项目协作软件进行客观分析,帮助读者找到最符合

    2024年02月09日
    浏览(51)
  • 图像分析技术大比拼:图像分类、图像识别、目标检测的优缺点分析与算法比较

          计算机视觉是人工智能领域的一个重要分支,它旨在构建能够理解和处理图像、视频等视觉信息的计算机系统。在计算机视觉领域中,图像分类、图像识别和目标检测是三个重要的任务。        一、图像分类       图像分类是计算机视觉领域最基础的任务之一,它

    2024年02月16日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包