canvas与base64编码

可以将一副图片数据编码成一串字符串，使用该字符串代替图像地址。因此不用向服务器发出请求，而可以随着 HTML 的下载同时下载到本地。

• html中img写法:

• css中background写法

background: url(data:image/gif;base64,R0lGODlhHAAmAKIHAKqqqsvLy0hISObm5vf394uLiwAAAP///yH5B…EoqQqJKAIBaQOVKHAXr3t7txgBjboSvB8EpLoFZywOAo3LFE5lYs/QW9LT1TRk1V7S2xYJADs=) no-repeat center;

坏处

• 生成的字符串编码大小一般而言都会比原文件稍大一些
• 当图片较大时,编码到 html / css 中，会造成后者体积明显增加，明显影响网页的打开速度。而如果用外链图片的话，图片可以在页面渲染完成后继续加载，不会造成阻塞。

推荐使用的情况

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

CssSprites与Base64编码

使用CssSprites合并为一张大图：

• 页面具有多种风格，需要换肤功能，可使用CssSprites
• 网站已经趋于完美，不会再三天两头的改动（例如button大小、颜色等）
• 使用时无需重复图形内容
• 没有 Base64 编码成本，降低图片更新的维护难度。（但注意 Sprites 同
• 时修改 css 和图片某些时候可能造成负担）
• 不会增加 CSS 文件体积

使用base64直接把图片编码成字符串写入CSS文件：

• 无额外请求
• 对于极小或者极简单图片
• 可像单独图片一样使用，比如背景图片重复使用等
• 没有跨域问题，无需考虑缓存、文件头或者cookies问题