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

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

    我们可以来看一下实际的效果

    Base64编码效果

    在上图中,我们可以看出img的src属性开头是data:image/png;base64,这种开头表示的就是Base64编码后的图片格式,鼠标放在src属性上,可以看出实际的图片。

    图片采用Base64编码后的字符串非常长,这里截取一部分来看下效果

    Base64编码的部分字符串

    真实的全部字符串会比这长的多,可能达到几十KB

    当然,Base64编码并不只是用在图片处理上,还可以用在URL转换上,比如说我们常见的迅雷以thunder开头的专用地址,就是通过Base64加密处理过后的URL地址,如下图所示

    Base64处理后的URL

    为何使用Base64编码

    存在及必然,那么我们为什么要使用Base64编码呢?

    1.其中很重要的一点就是,使用Base64编码可以减少网络请求。

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

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

    3.不会造成清理图片缓存的问题

    Base64编码劣势

    Base64编码既有优势也有劣势,上述已经说了Base64编码的优势,接下来看看劣势。

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

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

    3.对于IE8以下的浏览器,不支持data url格式,IE8开始支持data url,却对大小作出了限制,在使用时不是很方便。

    如何使用

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

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

  • 相关阅读:
    常见寻找OEP脱壳的方法
    Windows内核原理系列01
    HDU 1025 Constructing Roads In JGShining's Kingdom
    HDU 1024 Max Sum Plus Plus
    HDU 1003 Max Sum
    HDU 1019 Least Common Multiple
    HDU 1018 Big Number
    HDU 1014 Uniform Generator
    HDU 1012 u Calculate e
    HDU 1005 Number Sequence
  • 原文地址:https://www.cnblogs.com/ziyoublog/p/9389050.html
Copyright © 2011-2022 走看看