使用base64编码图像有一些性能优势吗？

Question

对于小尺寸图像,在javascript文件(或纯HTML文件)中使用base64编码图像加载时间的好处(如果有的话)是什么？

$(document).ready(function(){
    var imgsrc = "../images/icon.png";
    var img64  = "P/iaVYUy94mcZxqpf9cfCwtPdXVmBfD49NHxwMraWV/iJErLmNwAGT3//w3NB";

    $('img.icon').attr('src', imgsrc); // Type 1
    $('img.icon').attr('src', 'data:image/png;base64,' + img64); // Type 2 base64
});

Answer 1

好处是你必须减少一个HTTP请求,因为图像被"包含"在你提出请求的文件中.量化取决于很多参数,如缓存,图像大小,网络速度和延迟,所以唯一的方法是测量(实际测量肯定不适用于所有人).

我应该提到另一种最小化HTTP请求数量的常用方法是使用CSS sprites将许多图像放入一个文件中.这可能是一种更有效的方法,因为它也会导致更少的字节传输(base64膨胀字节大小约为1.33倍).

当然,您最终会为此付出代价:降低修改图形资产的便利性.