【前端攻略】:玩转图片Base64编码(转)

  引言  

  图片处理在前端工作中可谓占据了很重要的一壁江山。而图片的Base64编码可能相对一些人而言比较陌生,本文不是从纯技术的角度去讨论图片的base64编码。标题略大,不过只是希望通过一些浅显的论述,让你知道什么是图片的base64编码,为什么我们要用它,我们如何使用并且方便的使用它,并让你懂得如何去在前端的实际工作中运用它。

  什么是base64编码?  

  我不是来讲概念的,直接切入正题,图片的base64编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替图像地址。

  这样做有什么意义呢?我们知道,我们所看到的网页上的每一个图片,都是需要消耗一个http请求下载而来的(所有才有了csssprites技术的应运而生,但是csssprites有自身的局限性,下文会提到)。

  没错,不管如何,图片的下载始终都要向服务器发出请求,要是图片的下载不用向服务器发出请求,而可以随着 HTML 的下载同时下载到本地那就太好了,而base64正好能解决这个问题。

  那么图片的base64编码长什么样子呢?举个栗子。www.google.com的首页搜索框右侧的搜索小图标使用的就是base64编码。我们可以看到:

  

1 //在css里的写法
2 #fkbx-spch, #fkbx-hspch {
3     background: url(data:image/gif;base64,R0lGODlhHAAmAKIHAKqqqsvLy0hISObm5vf394uLiwAAAP///yH5B…EoqQqJKAIBaQOVKHAXr3t7txgBjboSvB8EpLoFZywOAo3LFE5lYs/QW9LT1TRk1V7S2xYJADs=) no-repeat center;
4
5     ...
6 }

1 //在html代码img标签里的写法
2 <img src="data:image/gif;base64,R0lGODlhHAAmAKIHAKqqqsvLy0hISObm5vf394uLiwAAAP///yH5B…EoqQqJKAIBaQOVKHAXr3t7txgBjboSvB8EpLoFZywOAo3LFE5lYs/QW9LT1TRk1V7S2xYJADs=">

  上面分别是图片的base64编码在css里面的写法和在html<img>标签里的写法。base64编码长得就是这个样子,当然base64编码不仅仅运用在图片编码,还可以:

  thunder://QUFodHRwOi8vZG93bi5zYW5kYWkubmV0L3RodW5kZXI3L1RodW5kZXI3LjEuNS4yMTUyLmV4ZVpa(不要复制我我真的不是种子)

  嘿嘿没错,迅雷的“专用地址”也是用Base64加密的,有兴趣自行google,不做赘述。

  为什么要使用Base64编码?  

  那么为什么要使用base64传输图片文件?上文也有提及,因为这样可以节省一个http请求。图片的base64编码可以算是前端优化的一环。效益虽小,但却缺能积少成多。

  说到这里,不得不提的是CssSprites技术,后者也是为了减少http请求,而将页面中许多细小的图片合并为一张大图。那么图片的base64编码和CssSprites有什么异同,又该如何取舍呢?

  所以,在这里要明确使用base64的一个前提,那就是被base64编码的图片足够尺寸小。以博客园的logo为例:

  

  如图所示,博客园的Logo只有3.27KB,已经很小了,但是如果将其制作转化成base64编码,生成的base64字符串编码足足有4406个,也就是说,图片被编码之后,生成的字符串编码大小一般而言都会比原文件稍大一些。即便base64编码能够被gzip压缩,压缩率能达到50%以上,想象一下,一个元素的css样式编写居然超过了2000个字符,那对css整体的可读性将会造成十分大的影响,代码的冗余使得在此使用base64编码将得不偿失。

  那么,是不是表示base64编码无用武之地呢?不然。当页面中的图片满足以下要求,base64就能大显生手。

  如果图片足够小且因为用处的特殊性无法被制作成雪碧图(CssSprites),在整个网站的复用性很高且基本不会被更新。那么此时使用base64编码传输图片就可谓好钢用在刀刃上,思前想后,符合这个规则的,有一个是我们经常会遇到的,就是页面的背景图background-image。在很多地方,我们会制作一个很小的图片大概是几px*几px,然后平铺它页面当背景图。因为是背景图的缘故,所以无法将它放入雪碧图,而它却存在网站的很多页面,这种图片往往只有几十字节,却需要一个http请求,十分不值得。那么此时将它转化为base64编码,何乐而不为?

  下面是一个只有50字节的2*2的的背景图。将其转化成base64编码,只有100多个字符,相比一个http请求,这种转换无疑更值得推崇。

  

  CssSprites与Base64编码  

  简单陈述一下我对何时这使用这两种优化方法的看法。

  使用CssSprites合并为一张大图:

  • 页面具有多种风格,需要换肤功能,可使用CssSprites
  • 网站已经趋于完美,不会再三天两头的改动(例如button大小、颜色等)
  • 使用时无需重复图形内容
  • 没有base64编码成本,降低图片更新的维护难度。(但注意Sprites同时修改css和图片某些时候可能造成负担)

  使用base64直接把图片编码成字符串写入CSS文件:

  • 无额外请求
  • 对于极小或者极简单图片
  • 可以被gzip。(通过gzip对base64数据的压缩能力通常和图片文件差不多或者更强)
  • 降低css维护难度
  • 可像单独图片一样使用,比如背景图片重复使用等
  • 没有跨域问题,无需考虑缓存、文件头或者cookies问题

  更便捷的将图片转化为Base64编码  

  将图片转化为base64编码有许多工具,例如本文中我所使用的 http://www.pjhome.net/web/html5/encodeDataUrl.htm ,但是很多这些网站是国外网站,经常被墙登陆不了。这里介绍一个更为快捷的方法,就是利用Chrome浏览器(我想FEer都应该有Chrome浏览器吧=。=)。

  在chrome下新建一个窗口,然后把要转化的图片直接拖入浏览器,打开控制台,点Source,如下图所示,点击图片,右侧就会显示该图片的base64编码,是不是很方便。

  

http://www.cnblogs.com/coco1s/p/4375774.html

时间: 2024-10-11 21:23:17

【前端攻略】:玩转图片Base64编码(转)的相关文章

【前端攻略】:玩转图片Base64编码

引言 图片处理在前端工作中可谓占据了很重要的一壁江山.而图片的Base64编码可能相对一些人而言比较陌生,本文不是从纯技术的角度去讨论图片的base64编码.标题略大,不过只是希望通过一些浅显的论述,让你知道什么是图片的base64编码,为什么我们要用它,我们如何使用并且方便的使用它,并让你懂得如何去在前端的实际工作中运用它. 什么是base64编码? 我不是来讲概念的,直接切入正题,图片的base64编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替图像地址. 这样做有什么意义呢?我

玩转图片Base64编码

引言 图片处理在前端工作中可谓占据了很重要的一壁江山.而图片的Base64编码可能相对一些人而言比较陌生,本文不是从纯技术的角度去讨论图片的base64编码.标题略大,不过只是希望通过一些浅显的论述,让你知道什么是图片的base64编码,为什么我们要用它,我们如何使用并且方便的使用它,并让你懂得如何去在前端的实际工作中运用它. 什么是base64编码? 我不是来讲概念的,直接切入正题,图片的base64编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替图像地址. 这样做有什么意义呢?我

python获取图片base64编码的例子

用python语言获得图片的Base64编码. #!/usr/bin/env python # -*- coding: utf-8 -*- # www.jbxue.com import os, base64 icon = open('ya.png','rb') iconData = icon.read() iconData = base64.b64encode(iconData) LIMIT = 60 liIcon = [] while True: sLimit = iconData[:LIMI

canvas图片base64编码后,ajax提交到后台

如题,直接上JS var imgData = canvas.toDataURL("image/png"); var data = imgData.substr(22); $.post('Gen', { 'data': data, 'remark': $('remark').val() } ,function(success) { $('#img1').src('data:image/jpeg;base64,' + success); } ); 后台C# string inputStr

浅谈CSS图片base64编码技术

(1)引言 图片处理在前端工作中可谓占据了很重要的一壁江山.而图片的 base64 编码可能相对一些人而言比较陌生,本文不是从纯技术的角度去讨论图片的 base64 编码.标题略大,不过只是希望通过一些浅显的论述,让你知道什么是图片的 base64 编码,为什么我们要用它,我们如何使用并且方便的使用它,并让你懂得如何去在前端的实际工作中运用它.  (2)什么是 base64 编码? 我不是来讲概念的,直接切入正题,图片的 base64 编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替

图片Base64编码

我们经常在做Jquery插件的时候需要插入一些自定义的控件,比如说按钮,而我们自己又觉着button标签很丑,而且不同浏览器显示的效果还不一样,这个时候我们需要用到图片,当然,我们可以通过img标签添加src,这个时候我们需要jpg.png.gif等格式的图片相匹配,这样的话,需要添加额外的文件,使得这个文件的可移植性变差,这个时候我们就可以将图片转为Base64编码,即将图片转化为字符方式放在html文件中. Base64编码要求把每三个8Bit的字节转换为四个6Bit的字节(3*8 = 4*

20141203图片Base64编码与解码

最近需要将图片通过转码的形式传给移动端,使用了Base64转码与 解码 import java.io.FileInputStream; import java.io.FileOutputStream; import java.io.IOException; import java.io.InputStream; import java.io.OutputStream; import sun.misc.BASE64Decoder; import sun.misc.BASE64Encoder; pu

android 图片base64编码解码

android 对图片编码解码demo package com.example.appdemos; import java.io.ByteArrayOutputStream; import android.app.Activity; import android.graphics.Bitmap; import android.graphics.Bitmap.CompressFormat; import android.graphics.BitmapFactory; import android.

前端攻略系列(一) - 前端各种优化(保证持续更新)

前端性能优化 1. 请减少HTTP请求 基本原理: 在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比较糟糕的时候,这个问题尤其的突出. 一个正常HTTP请求的流程简述:如在浏览器中输入"www.xxxxxx.com"并按下回车,浏览器再与这个URL指向的服务器建立连接,然后浏览器才能向服务器发送请求信息,服务器在接受到请求的信息后再返回相应的信息,浏览器接收到来自服务器的应答信息后,对这些数据解释执行. 而当我们请求的网页文件中有很多图片.CSS.JS甚