页面优化 - 使用Data URI代替图片SRC

对于提高页面访问性能的方式，其中比较重要的准则就是减少页面的请求数量 常用的方式是合并css js文件、使用精灵图片 还有一种有效方法可以尝试，用Data URI代替图片的src 一般都会使用src引用图片的路径 <img src="/images/logo.png" /> 使用data URI就是直接嵌入base64编码格式的图片 <img src="data: image/jpeg;base64,/9j/4AAQSkZJkAAD/7AEAAAAPAAA/+AGTAAAAAAf/bAIQABgQEBAUEBgUFBgkGBQYJCwgGBggLDAoKCwoKD...." />

好处

可以极大的减少图片请求的数量

缺点

增加了页面的大小，会影响页面的加载时间，但这个问题可以通过开启gzip压缩来弱化

注意

改用这种方式后，对图片的存储方式，或者后端的代码都可能产生影响，建议在适当的场景使用，例如常用的一些静态资源图片