将图像显示为src="data:image/jpg;base64，...好吗？

Question

我有两种方法在网站上显示图片。第一种方式是在src属性中简单地传递图像的路径。

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

未来会有任何问题吗？或者第二种方法会导致更长的页面加载时间？

请提出建议。

- manan

---

关注搜索引擎吗？因为它们不会索引页面中的数据URI。 - Hashem Qolami

Answer 1

加载图像到页面中会导致前端加载时间变慢（HTML文件更大），但整体速度更快（请求服务器次数更少）。请注意，IE7及以下版本不支持此功能，而IE8不支持超过32k的图像。（来源）使用base64编码也会使图像大小增加1/3。（来源）

在我看来，对于CSS文件中的图标、偶尔的小缩略图等，这是有意义的。但一些大型图片应该从正常位置加载。

- Mooseman

Answer 2

是的，第二种方法即为base64编码，速度大约比第一种慢了8倍。

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

编辑：对不起，我的错... base64会使文件大小增加37%。

- JamesG

---

实际上，我的问题是当我使用JavaScript更新src属性（使用第一种方法）时，会再次发送一个请求以获取图像。这个请求会显示在Pingdom工具中携带的cookie。 - manan

Answer 3

如果您有路径：使用它。
首先，数据不是标准的，所以无法保证它能正常工作。
其次，您将获得缓存管理等功能，无需编写任何代码。

- deviantfan