"data:image/png;base64,b64Encode png string" VS 设置 html img src 时的 url-to-folder答案

【问题标题】："data:image/png;base64,b64Encoderpngstring" VS url-to-folder when set html img's src"data:image/png;base64,b64Encode png string" VS 设置 html img src 时的 url-to-folder
【发布时间】：2013-05-14 14:06:33
【问题描述】：

我使用pywebkit和html5开发桌面地图服务器。

地图图块存储在 sqlite 数据库中。

所以当我设置html img的src时，我有两种选择。

从数据库中读取图片并b64encode，然后将img的src设置为“data:image/png;base64,b64Encoder-string”。
另一个是从数据库中读取图像并将其保存在磁盘上，然后将带有url的img的src设置为本地文件夹。

我的问题是哪种方式更好。

我最关心渲染速度。哪一个对浏览器渲染图像更快。

【问题讨论】：

什么对你来说“更好”？
第三个选项：动态处理图像请求并从数据库中流式传输。
我尝试了两种方式，缩放和平移地图时感觉没有区别。我想要更快的渲染速度。因为总是有加载延迟。
谢谢安德烈。我认为这两个选项都是“动态处理图像请求并从数据库流式传输”。

标签： javascript html image

【解决方案1】：

<img src="http://mysite.com/images/myimage.jpg" />这实际上是一个http URI方案，虽然<img src="data:image/png;base64,efT....." /> 是data URI，但这种方式图像在HTML 中内联并且没有额外的HTTP 请求，但是在大多数情况下，嵌入的图像不能在不同的页面加载之间缓存，所以解决方案实际上是通过你的方式。 ..什么对你更好，方便忽略伊恩的建议:)

现在转到浏览器兼容性 -

数据 URI 在 IE 5-7 中不起作用，但在 IE 8 中受支持。Source

页面大小：

base64 编码也会增加页面大小，这是另一件事。

【讨论】：

+1 这也是要考虑的另一件事！您可以接受更多请求或更大的页面大小吗？好问题。
@Mzn 使用数据 URI 方案在某些地方有点棘手。最好的事情是真正知道何时使用什么:)
谢谢swapnesh。我尝试了两种方法，缩放和平移地图时感觉没有区别。我想要更快的渲染速度。因为总是有加载延迟。
@coordinate 这些图片的尺寸是多少？？同样，如果两种情况下的结果相同..然后看下页面中的其他内容..如果您希望首先显示图像..您可以管理..缓存这些图像以及..使用压缩技术.. 图像质量等看起来也很好

【解决方案2】：

这在很大程度上取决于应用程序将如何运行，以及其他细节，例如运行环境。

将图像保存到磁盘的好处是，您可以避免每次需要时重新编码图像（可以通过在数据库中添加带有计算的 base-64 字符串的列来避免这种情况）。

总结： 1-使用第一个选项，但将其缓存在数据库或服务器变量中。 2-使用第二个选项并缓存文件名。

但是还有一个问题是您的二级存储有多快。您可能希望避免使用 HD，即使有缓存也是如此，因为它很慢，或者您的二进制存储空间有限（并且有更多的 DB 存储空间）。

我建议你添加关于你担心的细节。

【讨论】：

谢谢 Mzn。我使用一个单独的线程来读取数据库和存储。所以我最关心渲染速度。浏览器渲染图像哪个更快。