图片Base64编码

最新推荐文章于 2025-05-08 11:43:07 发布

原创最新推荐文章于 2025-05-08 11:43:07 发布

· 2.5k 阅读

6 ·

版权

文章标签：

#css #图片 #html #base64

CSS 专栏收录该内容

18 篇文章

订阅专栏

图片Base64编码能节省HTTP请求，适用于小图片且复用率高的场景。它会增加CSS文件体积，可能影响CRP，且存在兼容性问题。webpack的url-loader可自动处理图片转Base64。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是图片Base64编码

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

这样的意义是：

网页上的每一个图片，都要消耗一个http请求下载而来（所以CSS雪碧图技术应运而生），而将图片编码成为base64格式可以随着html下载的同时下载到本地，从而节省了一次http请求

写法

#fkbx-spch, #fkbx-hspch {
  background: url(data:image/gif;base64,R0lGODlhHAAmAKIHAKqqqsvLy0hISObm5vf394uLiwAAAP///yH5B…EoqQqJKAIBaQOVKHAXr3t7txgBjboSvB8EpLoFZywOAo3LFE5lYs/QW9LT1TRk1V7S2xYJADs=) no-repeat center;
}

<img src="data:image/gif;base64,R0lGODlhHAAmAKIHAKqqqsvLy0hISObm5vf394uLiwAAAP///yH5B…EoqQqJKAIBaQOVKHAXr3t7txgBjboSvB8EpLoFZywOAo3LFE5lYs/QW9LT1TRk1V7S2xYJADs=">

上面分别是图片的 base64 编码在 css 里面的写法和在 img 标签里的写法。

何时使用Base64编码

首先是上面提到的，可以节省一次http请求

同样，CssSprites 也可以减少http请求，对于二者的取舍要点在于：

如果图片足够小且因为用处的特殊性无法被制作成雪碧图（CssSprites），在整个网站的复用性很高且基本不会被更新。

如果较大的图片转换为Base64编码之后，生成的字符串编码大小一般而言都会比原文件稍大一些，而且会对CSS整体的可读性产生很大的影响

将图片转化为Base64编码　　

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

Base64的缺点

1、使用 Base64 不代表性能优化

使用 Base64 的好处是能够减少一个图片的 HTTP 请求，然而，与之同时付出的代价则是 CSS 文件体积的增大。

而 CSS 文件体积的增大意味着什么呢？意味着 CRP 的阻塞。

通俗而言，就是图片不会导致关键渲染路径的阻塞，而转化为 Base64 的图片大大增加了 CSS 文件的体积，CSS 文件的体积直接影响渲染，导致用户会长时间注视空白屏幕。HTML 和 CSS 阻塞渲染，而图片不会。

2、页面解析CSS时间增长

如果把大图片编码到 html / css 中，会造成后者体积明显增加，明显影响网页的打开速度。

3、兼容性问题

使用 base64 的另外一个弊端是 IE 的兼容性问题。IE 8 以下不支持 data url，IE 8 开始支持 data url，却有大小限制，32k（未测试）。

4、编辑问题

还有一个问题是，如果构建工具比较落后（或者没有构建工具），手动插入 base64 是很蛋疼的，编辑器会卡到哭。

webpack

webpack的url-loader插件可以自动根据文件大小决定要不要做成内联 base64

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192
            }
          }
        ]
      }
    ]
  }
}

exam项目中的配置：

const path = require('path');

module.exports = {
  target: 'web',

  appEntries: {
    examIndex: './app/entries/ExamIndex',
    markIndex: './app/entries/MarkIndex'
  },

  urlLoader: {
    test: /\.(jpg|png|gif|svg)(\?.+)?$/,
    loader: 'url-loader?limit=8192&name=[name]-[hash:8].[ext]'
  },

  fileLoader: {
    test: /\.(ttf|otf|eot|woff2?)(\?.+)?$/,
    loader: 'file-loader?name=[name]-[hash:8].[ext]'
  }
};