图片Base64编码

图片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 编码

image

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]'
  }
};

加载之后,网页中小8kb的图片都被转为了base64编码格式存在:

参考

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值