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

比眉伴天荒 2021-09-14 03:02 1024阅读 0赞

首先讲一下什么是图片Base64编码：

简单来说，图片的base64编码就是可以将一副图片数据编码成一串字符串，使用该字符串代替图像地址。

为什么要用Base64？

我们知道，我们所看到的网页上的每一个图片，都是需要消耗一个http请求下载而来的，不管如何，图片的下载始终都要向服务器发出请求，要是图片的下载不用向服务器发出请求，而可以随着 HTML 的下载同时下载到本地那就太好了，而base64正好能解决这个问题。

图片的Base64格式长什么样？举个例子，其实谷歌浏览器主页的LOGO就是用的Base64 格式，如下图：

![SouthEast][]

红框里的URL地址就是Base64 格式的，其实还有大家非常熟悉的迅雷下载链接也是使用的Base64格式，例如：

thunder://QUFodHRwOi8vZGwxMzUuODBzLmltOjkyMC8xNzA4L+aImGwyW+mrmOa4heaKouWFiOeJiF0v5oiYbDJb6auY5riF5oqi5YWI54mIXS5tcDRaWg==

由此可见Base64不仅仅运用在图片方面！

那么怎么将本地图片转化成Base64格式呢？下面推荐一个在线转化工具：[http://tool.css-js.com/base64.html][http_tool.css-js.com_base64.html]

**但是使用Base64也有缺点：**

**1.浏览器支持**

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

**2.增加了CSS文件的尺寸**

base64编码图片本质上是将图片的二进制大小以一些字母的形式展示，例如一个1024字节的图片，base64编码后至少1024个字符，这个大小会被完全嵌入到CSS文件中（不过幸运的是也可以被gzip了，而图片文件被gzip效果不明显）。

**3.编码成本**

图片完成后还需要base64编码，目前估计手工完成的多，因此，增加了一定的工作量，虽然不多。

[SouthEast]: /images/20210724/d9e0e9a646d847c18867d646418c28d9.png
[http_tool.css-js.com_base64.html]: http://tool.css-js.com/base64.html

发表评论取消回复

表情：

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

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

相关阅读

相关 Base64转图片和图片转Base64

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

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

相关 Java图片与Base64编码相互转换

import org.apache.commons.lang3.ArrayUtils; import java.io.FileInputStream;

绝地灬酷狼/ 2022年12月17日 05:59/ 0 赞/ 177 阅读

相关将图片转换为Base64编码字符串、解析Base64编码字符串后生成图片

目录代码结果注意代码 public class Test { pu

深碍√TFBOYSˉ_/ 2022年09月10日 06:14/ 0 赞/ 297 阅读

相关 base64转图片图片转base64

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

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

相关 base64生成图片——图片转换变成base64

base64生成图片——图片转换变成base64 如题。下面上货。 package com.xueyou.demo; import org

桃扇骨/ 2022年06月15日 05:22/ 0 赞/ 423 阅读

相关 libcurl post图片 base64编码

\include "httppost.h" \include <curl/curl.h> \include <string.h> \include <sys/time.

曾经终败给现在/ 2022年06月15日 01:13/ 0 赞/ 234 阅读

相关 C#中图片转换为Base64编码，Base64编码转换为图片

region 图片转为base64编码的字符串 public string ImgToBase64String(string Imagefilename)

清疚/ 2022年04月23日 00:58/ 0 赞/ 1417 阅读

相关图片url转base64编码

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

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

相关图片上传 Base64 编码解码转换

图片上传 Base64 编码解码转换图片上传时往往进行压缩处理，将压缩后的图片再传输给后端，这里以Base64编码来替代压缩，仅作演示，附Demo，前后端代码 Ht

我就是我/ 2022年02月20日 04:00/ 0 赞/ 354 阅读

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

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

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