将图像显示为 src="data: image/jpg;base64,... 好不好？答案

【问题标题】：Is it good to display an image as src="data: image/jpg;base64,...?将图像显示为 src="data: image/jpg;base64,... 好不好？
【发布时间】：2014-04-10 23:26:09
【问题描述】：

我有两种方法可以在我的网页上显示图像。一种方法是简单地传递到 src 属性中的图像路径。

第二种方式是在src属性中传递数据

以后会不会出现问题？或者第二种方法的页面加载时间更长？

请提出建议。

【问题讨论】：

关心搜索引擎？作为 they don't index 页面中的数据 URI。

标签： html image mime-types

【解决方案1】：

是的，第二种方法比第一种方法慢 8 倍。那是 base64 编码。

我用base64做小图，这样做的好处是可以存储在数据库中。将它们用于缩略图、个人资料图片等...大约 100 或 200 KB 的任何内容

编辑：对不起，我的错......文件大小大 37% 是 base64

【讨论】：

实际上我的问题是当我使用 javascript 更新 src 属性（第一个方法）时，再次请求图像。并且该请求显示 cookie 携带在 pingdom 工具中。

【解决方案2】：

如果你有路径：使用它。
首先，数据不是标准的，所以你不能保证它有效。
其次，您无需编写任何代码即可免费获得诸如缓存管理之类的东西。

【讨论】：

【解决方案3】：

在页面中加载图像的速度会较慢（较大的 html 文件），但总体速度会更快（对服务器的请求较少）。请注意，IE7 及更低版本不支持此功能，IE8 不支持超过 32k 的图像。 (Source) base64 编码也会使图像大小增加 1/3。 (Source)

在我看来，CSS文件中的图标，偶尔的小缩略图等是有意义的。但是应该从正常加载几个大图像。

【讨论】：