运用Data URI scheme规范展现图片

先来个小演示，将如下代码全部复制，然后粘贴到Chrome或Firefox等浏览器的地址栏内并打开：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4AQAAAAARHwt/AAAAq0lEQVR42u3VQQrEMAgFUMFrCV5d8FpC55tQaGYx4J9t00L6upCoSSvXOeT1t0NEM7Qnytl3+JooB8KZ98Tb8y9nOW/cJXrkN/GqJ5Zz1HfgNUrP/g4c4h3M73ymvgrPHmKks0xwmZdS7nUEiD3B2ayzEb/7MXSPsG4J525kIZl8nMeJ93kyrMo5oyC1W0p772neCCb9RaDcr0xDH+dr4q4nEHe8qd//yQ9/AIx/XBg3tuj2AAAAAElFTkSuQmCC

可看到一张120X120的PNG格式图片，当然也可将上述代码置于 <img src="" /> 等HTML标签内。

 

这种规范就是Data URI scheme，见：https://en.wikipedia.org/wiki/Data_URI_scheme 它的格式如下：

data:[<MIME-type>][;charset=<encoding>][;base64],<data>

所以上述代码中，“data:image/png;base64,”之后的文本是对图片字节流进行Base64后的字符串。
当然，根据“MIME-type”还可以展现更多其它格式的内容。

 

应用场景：
运用Data URI scheme规范展现图片可以减少网络请求，我认为特别适合用于一些体积较小的图片展现，如1X1的图片占位符等修饰性的图片。但也需要关注浏览器的兼容性以及Base64之后的字符串长度等问题。