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

叁歲伎倆 2022-03-31 15:13 1566阅读 0赞

原文: [【前端攻略】：玩转图片Base64编码][Base64]

**引言**

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

**　　什么是base64编码?　　**

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

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

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

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

![291535318955336.jpg][]![291536404276672.jpg][]

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:URL传输图片文件？上文也有提及，因为这样可以节省一个http请求。图片的base64编码可以算是前端优化的一环。效益虽小，但却缺能积少成多。

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

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

![291823457706972.jpg][]

如下图所示，博客园的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请求，这种转换无疑更值得推崇。

![291911322397260.jpg][]

**　　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][http_www.pjhome.net_web_html5_encodeDataUrl.htm] ，但是很多这些网站是国外网站，经常被墙登陆不了。这里介绍一个更为快捷的方法，就是利用Chrome浏览器（我想FEer都应该有Chrome浏览器吧=。=）。

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

![291930215838214.jpg][]

原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。

[Base64]: http://www.cnblogs.com/coco1s/p/4375774.html
[www.google.com]: http://www.google.com
[291535318955336.jpg]: https://images0.cnblogs.com/blog2015/608782/201503/291535318955336.jpg
[291536404276672.jpg]: /images/20220331/088cebccc95b47868ce0f144d8e18029.png
[291823457706972.jpg]: /images/20220331/cba1fabc9acb4472981d21c0020f9f35.png
[291911322397260.jpg]: /images/20220331/12aa460d02614f709c5c3715c58666f0.png
[http_www.pjhome.net_web_html5_encodeDataUrl.htm]: http://www.pjhome.net/web/html5/encodeDataUrl.htm
[291930215838214.jpg]: /images/20220331/9a4027a439494628a0fc9f3b6e067779.png

发表评论取消回复

表情：

评论列表（有 0 条评论，1566人围观）

还没有评论，来说两句吧...

相关阅读

相关 Base64编码转图片

Base64编码转图片 - 一个工具箱 - 好用的在线工具都在这里！

本是古典何须时尚/ 2024年05月02日 20:20/ 0 赞/ 67 阅读

相关 Base64编码转图片在线

[Base64在线转换图片\_图片转Base64\_在线base64图片转换工具\_yzc工具网][Base64_Base64_base64_yzc] [Base64_Ba

朱雀/ 2024年02月20日 11:54/ 0 赞/ 107 阅读

相关前端页面优化--图片base64编码

图片base64编码内嵌于CSS、HTML中 1. 首先把图片进行base64编码成一串字符串； 2. 然后嵌入到CSS或html中 //内嵌于css

青旅半醒/ 2023年10月17日 21:22/ 0 赞/ 36 阅读

相关 Base64转图片和图片转Base64

<template> <view> <view class="imgtext"> <im

爱被打了一巴掌/ 2023年01月13日 09:37/ 0 赞/ 325 阅读

相关 base64编码转图片格式

base64编码转图片格式 <!DOCTYPE html> <html lang="en"> <head> <meta chars

╰半夏微凉°/ 2023年01月01日 04:58/ 0 赞/ 262 阅读

相关 Base64编码与图片文件互转

直接上代码： import java.io.FileInputStream; import java.io.FileOutputStream; i

清疚/ 2022年07月17日 02:08/ 0 赞/ 235 阅读

相关 base64转图片图片转base64

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

本是古典何须时尚/ 2022年06月17日 05:09/ 0 赞/ 376 阅读

相关【前端攻略】：玩转图片Base64编码

原文: [【前端攻略】：玩转图片Base64编码][Base64] 　　引言　　　　图片处理在前端工作中可谓占据了很重要的一壁江山。而图片的Base64编码可能相对一些人

叁歲伎倆/ 2022年03月31日 15:13/ 0 赞/ 1567 阅读

相关图片url转base64编码

Html <input type='file' class='upload-img' /> JQ $('.upload-img').on('change'

古城微笑少年丶/ 2022年03月17日 05:46/ 0 赞/ 433 阅读

相关前端图片在线转换Base64 图片编码Base64

首先讲一下什么是图片Base64编码：简单来说，图片的base64编码就是可以将一副图片数据编码成一串字符串，使用该字符串代替图像地址。为什么要用Base64？我们

比眉伴天荒/ 2021年09月14日 03:02/ 0 赞/ 1028 阅读