使用base64转图片有什么副作用

最新推荐文章于 2024-07-11 17:46:34 发布
最新推荐文章于 2024-07-11 17:46:34 发布
阅读量491 收藏
点赞数
分类专栏： 性能优化 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36545813/article/details/120044233
版权
本文探讨了使用Base64编码替代img标签引用图片的优缺点。Base64编码会导致文件体积增大约1/3，可能影响首屏加载速度，但适合小图标。它无法单独缓存，只能缓存包含它的文件，且在IE8及以下版本不被支持。考虑到这些因素，合理选择图片处理方式对于网页性能至关重要。
摘要由CSDN通过智能技术生成

参考知乎

  • 使用base64来代替img，明显体积增加，会影响首屏加载速度。如果使用img通过外链图片的话，图片可以在页面渲染挖出后继续加载，不会造成阻塞。
  • 根据 base64 的编码原理，大小比原文件大小大 1/3。所以比较适用于小图标。
  • base64 无法缓存，要缓存只能缓存包含 base64 的文件。比如.html/.css
  • IE兼容性问题。因为 IE8 以下不支持 dataurl
  • 如果构建工具落后，手动插入 base64 ，编辑器会卡
努力学习前端的77
关注
专栏目录
微信小程序设置背景图&&什么是 base64 编码?
qq_39702981的博客
12-18 1211
开发小程序的时候，设置页面的背景，我用到代码： .wxml <view class='top' style="background-image: url('/images/my_bj.png');background-size:cover"> </view> .page__bd{ width: 100%; height: 220px; ba...
tinymce上传图片php,TinyMCE 图片和文件上传
weixin_39785422的博客
03-12 621
file_browser_callback这个选项允许你添加自己的文件或者图片浏览器到TinyMCE中，如果给这个选项设置了一个值，那么编辑器的菜单选项中会多出来一个insert/edit link或者insert/edit image这样的按钮。当然如果你不设置它也就不会显示了。每次点击这个按钮的时候file_browser_callback函数都会被调用一次。这个回调函数的格式是：fileBr...
base64图片弊端
wuzj1314的博客
03-14 499
假设base64编码后的字符串长度为256kb，用户的网速为每个连接32kb/s，而除去这个字符串外html大小仅为32kb，其中图片前后各16kb。，用户会在1秒后看到没有图片的网页，并且在第8.5秒时就看到了图片（而不是9秒，随着html边下载边解析，解析到图片就已经开始下载图片了）那么不考虑其他资源加载的情况下，用户会先在半秒后看到这个图片上面的内容，然后花费8秒加载图片，再在半秒后看到完整的网页。我们都知道，html是流式下载的，或者说浏览器加载所有文件其实都是从前往后单线程流式下载的。
记一次 base64 图片存储引发后端查询接口性能断崖式下降问题全程解析
08-16 1556
点击上方蓝色“架构荟萃”关注我们，输入1024，你懂的问题回顾同事小赵接到客户导入新闻数据要求，由客户提供新闻数据。于是，小赵通过SQL脚本入库新闻数据后，发现前台展示新闻特别慢。幸...
图片传输为啥用Base64格式进行传输？
最新发布
weixin_51977690的博客
07-11 713
综上所述，图片的数据传输采用Base64格式主要是为了减少HTTP请求、增强数据传输的安全性、适用于小图片资源以及提高数据的兼容性和可读性。然而，在使用时也需要注意其可能带来的数据长度增加和性能问题。
base编码图片导致浏览器卡顿页面加载特别慢怎么办
weixin_42827159的博客
03-22 5614
我们都知道浏览器本身支持直接显示base64编码的图片的 例如 <img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAgEAYABgAAD......" width="554" height="402" /> 但是通过项目中发现前台浏览器处理这种base编码的图片,如果图片数量很多,单个图片接近1MB的话 浏览器会变得非常卡顿 页面加...
前端优化中使用base64的优缺点
weixin_45766034的博客
10-09 2632
优点 （1）base64格式的图片是文本格式，占用内存小，转换后的大小比例大概为1/3，降低了资源服务器的消耗； （2）网页中使用base64格式的图片时，不用再请求服务器调用图片资源，减少了服务器访问次数。 缺点 （1）base64格式的文本内容较多，存储在数据库中增大了数据库服务器的压力； （2）网页加载图片虽然不用访问服务器了，但因为base64格式的内容太多，所以加载网页的速度会降低，可能会影响用户的体验。 （3）base64无法缓存，要缓存只能缓存包含base64的文件，比如js或者css，这比直
Unity加载图片卡顿问题
weixin_44047050的博客
06-05 660
出现这种问题应该考虑图片大小与图片的分辨率，看图片属性里面就有相关信息，利用相关软件进行图片优化处理。
base64格式
zhanggongzichu的博客
08-30 4774
base64格式使用
[Vue3] Wangeditor富文本实现将粘贴中包含的图片自动上传后台,并替换src
小陈的博客
03-06 4632
概念会如下再介绍, 先说说具体过程, 就是首先通过粘贴事件触发, 停止默认粘贴事件, 获取其text/html的内容使用字符串正则 match匹配 内容中符合 这样的内容, 获得匹配字符串数组对数组遍历, 传入url在图片onload加载好后触发回调函数, 会将图片转为base64base64 转 BlobBlob 转 file将file 传入请求上传后台函数。
多图站点性能优化：图片压缩、图片缩放、HTTP2、CDN、网络传输优化、图片懒加载预加载、响应式图片
HZFEStudio的博客
10-06 841
完整高频题库仓库地址：https://github.com/hzfe/awesome-interview完整高频题库阅读地址：https://febook.hzfe.org/回答关键点图片优化 传输优化 加载策略提高网站性能的一项重要指标是提高访问速度，这与用户留存率和转换率呈正相关。根据 HTTPArchive 的数据可知，图像是大多数网站需求最多的资源类型，通常比其他资源占用更多带宽。在多图站点中，图片资源对于页面的加载和整体的用户体验有更明显的影响。最常见的问题是图片加载慢。对应的优化策略包括：图片优
html标签使用使用base64编码的数据
11-06 1585
html页面2种 设置控件值的方式http uri scheme , data uri scheme 如下面 <img src ="http://xx.xx.xx"/> 浏览器会缓存http资源，多个标签使用同一个地址，直接读缓存的数据， <img src ="data...
img标签 轻松显示 base64格式的图片
热门推荐
Teheran的博客
11-27 2万+
用法：设置的src 属性为 “ data:image/png;base64，(base64图片码) ” 具体案例： &amp;lt;img v-bind:src=&quot;imgSrc&quot; v-bind:style=&quot;imgStyle&quot; alt=&quot;&quot; class=&quot;P_cadres_imgSrc&quot; /&amp;gt; _this.imgSrc
＜img＞标签src缓存问题
qq_37634156的博客
07-24 1846
最近做项目，登录实现验证码时，总是会出现验证码检验失败，起初以为是输入的时候偶尔输错了也没有在意，后来发现经常出现输入五六次验证码都登录失败，在领导的强烈投诉下，决定好好检查下... 前端代码如下 <Col span="10" style="height: 38px;"> <img :src="codeImg" @click="refreshImage" height="38" width="112" style="cursor: pointer;"/> ...
图片转为base64格式的优缺点分析
m0_69057918的博客
05-12 2632
图片转为base64格式的优缺点分析
一些有关base64的坑，不要再犯这些错了
m0_37825219的博客
08-21 2万+
前言 最近在和百度对接中，需要通过base64加密的方式对数据加密并校验。对方环境是jdk1.8的，我们的环境是jdk1.7的，在对接中遇到一些问题，所以总结一下。 概述 Base64是一种字符串编码格式，采用了A-Z，a-z，0-9，“+”和“/”这64个字符来编码原始字符（还有垫字符“=”）。一个字符本身是一个字节，也就是8位，而base64编码后的一个字符只能表示6位的信息。也就是原始字符...
image src base64 svg
weixin_30905981的博客
03-17 994
1、显示img： 大家可能注意到了，网页上有些图片的src或css背景图片的url后面跟了一大串字符，比如：data:image/png;base64,　iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/　K...
＜img＞ 标签src缓存问题
Shawn的个人博客
04-30 4635
问题描述： 最近在使用vue做目标检测算法可视化的时候发现了一个问题，我在前端传入原始图片到后端，经过后端算法检测后生成检测图片，前端vue直接调用该图片路径。本来想着输入不同图片，后端会不断覆盖result.jpg，最终前端也会实时变化，但是最终结果出现了意外，如图后连输入图不管如何变化，结果图都是同一张图片。 //html部分 <el-image class="originImg" :src="resulturl"/> //js部分 this.resulturl="http://localh
Java图片URL转Base64与Base64转图片工具类实现
首先，图片URL转Base64的步骤如下： 1. 获取图片数据：使用`java.net.URL`类创建一个URL对象，表示图片的网络地址。然后通过`HttpURLConnection`类打开连接并读取图片的输入流（`InputStream`）。 2. 处理图片：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值