zoukankan      html  css  js  c++  java
  • 关于图片的Base64编码

    什么是Base64编码

    Base64编码是一种图片处理格式,通过特定的算法将图片编码成一长串字符串,在页面上显示的时候,可以用该字符串来代替图片的url属性。

    base64编码就是长得像下面这样子的代码:

    thunder://QUFodHRwOi8vd3d3LmJhaWR1LmNvbS9pbWcvc3NsbTFfbG9nby5naWZaWg==

    上面代码大家都熟悉吧,迅雷下载链接哦,就是base64编码后的地址,所以以后看到这种:一堆连续字母,最后有1~2个"="的代码就是base64。Base64编码并不只是用在图片处理上,还可以用在URL转换上,比如上述我们常见的迅雷以thunder开头的专用地址,就是通过Base64加密处理过后的URL地址。

    base64:URL就是URL地址是base64编码的。

    例如下面这个:

    <img src="data:image/gif;base64,R0lGODlhAwADAIABAL6+vv///yH5BAEAAAEALAAAAAADAAMAAAIDjA9WADs=" />

    base64与文件数据编码

    在网络中,通过HTTP传输的文件还可以通过base64对数据进行编码进行传输。就如上面的这个base64的gif格式图片。当然,可以base64编码的文件不仅仅是图片,也可以是字体文件,例如(中间有缺省):

    @font-face{

        font-family: forTest;

        src: url(data:font/woff;charset=utf-8;base64,d09GRgABAAAAAAh4 ... RFERuENEGADl7JlY=) format('woff');

    }

    自然,对于background-image图片,我们也可以使用base64编码进行传输,例如:

    background-image:url(data:image/gif;base64,R0lGODlhBAABAIABAMLBwfLx8SH5BAEAAAEALAAAAAAEAAEAAAICRF4AOw==);

    使用base64:URL的优缺点

    base64:URL传输图片文件的好处在于:

    1减少了HTTP网络请求。

    我们都知道,网页上的图片资源如果采用http形式的url的话都会额外发送一次请求,网页发送的http请求次数越多,会造成页面加载速度越慢。而采用Base64格式的编码,将图片转化为字符串后,图片文件会随着html元素一并加载,这样就可以减少http请求的次数,对于网页优化是一种比较好的手段。

    2采用Base64编码的图片是随着页面一起加载的,不会造成跨域请求的问题。

    3没有图片更新要重新上传,不会造成清理图片缓存的问题

    不足在于:

    1 浏览器支持

    使用base64编码图片作为背景图片的这种技术IE6/IE7浏览器是不支持的(IE9浏览器IE7模式下支持)。对于目前PC页面,兼容性问题使没有文件上传以及无需更新缓存的优点不存在了。

    2 增加了CSS文件的尺寸

    当我们将一个只有几KB的图片转化为Base64格式编码,生成的字符串往往会大于几KB,如果将其写在一个css文件中,这样一个css文件的大小会剧增,造成代码可读性差不说,还会造成请求传输的数据量递增。

    3 造成数据库数据量的增大

    如果我们将Base64位的编码的图片存入数据库中,会造成数据库数据量的增大,这样的效果还不如将图片存至图片服务器,而只在数据库中存入url字段。

    何时使用

    分析了Base64编码的优劣,那么我们该如何正确的使用Base64编码呢?这里总结出使用Base64编码的几个地方。

    • 这类图片不能与其他图片以CSS Sprite的形式存在,只能独行
    • 这类图片从诞生之日起,基本上很少被更新
    • 这类图片的实际尺寸很小
    • 这类图片在网站中大规模使用

    对于极小或者极简单的图片,例如只有几像素的图片,不用考虑跨域问题也不想页面的图片缓存,果断用base64。

  • 相关阅读:
    print(end=" ") 滚动输出到屏幕
    写入到csv文件的两种方式(pd.DaaFrame 和 csv.writerow)
    pytorch 损失函数(nn.BCELoss 和 nn.CrossEntropyLoss)(思考多标签分类问题)
    pytorch实战(二)hw2——预测收入是否高于50000,分类问题
    信用卡新颖的攻击方式,黑客可非接触式卡进行交易
    微软结束对SolarWinds黑客的内部调查
    Apple M1芯片首款恶意软件曝光
    新的Office恶意软件,黑客可远程窃取信息
    如何审核Active Directory中的密码更改
    特斯拉恶意软件使用新的传送和规避技术
  • 原文地址:https://www.cnblogs.com/ranyonsue/p/8615824.html
Copyright © 2011-2022 走看看