html - 将原始图像数据放入 Src Attr 是否更有效？

Question

我最近发现src图像的属性允许您将原始 base 64 图像数据直接放入其中。我是否认为这在技术上比单独的图像文件更有效，因为不必对图像提出额外的请求？还是开销太小以至于不值得？

另外，假设我最终这样做了，获取原始数据的最佳方法是什么？（比如说，我用颜料画的图像？）

Answer 1

这取决于您所说的“更有效”是什么意思。如果您的衡量标准是时间，那么它可能会更有效。

您所指的技术是使用数据 URI。通常，您获取图像数据并对其进行 base64 编码，使其仅包含 ASCII 字符。base64 编码数据具有使其大 33% 的效果（每 6 位变为 8 位）。

所以这适用于小图像，但对于大图像，33% 的溢价可能太多了。

这可能是一个好主意的原因是延迟通常是浏览器请求的限制因素。过去（过去）带宽是限制因素，因此常见的建议是拆分资源，但现在不再如此。使用数据 URI 图像，浏览器不必进行第二次往返。

除此之外，您还必须考虑浏览器支持。在版本 8 之前，IE 不支持数据 URI。在 IE 8 中，数据的上限为 32KB。

希望这可以帮助！

Answer 2

对此有大小限制。我不确定我的想法，但 2K 似乎是正确的。

请记住，base64 编码存在开销。如果你有一个 500 字节的图像，这可能没问题，但对于其他事情，不行。

确实，您现在不应该为了兼容性而这样做。也许在未来几年...

Answer 3

这取决于您要发送多少张图片以及它们被请求的频率。拥有 base 64 中的图像绝对比 30 个 http 请求更有效。

如果经常请求它们，您还可以实现每个图像的缓存。这是我们在我的工作场所实施的。我们将 base64 存储在一个临时目录中，并检查它们是否已经被编码。如果是这样，我们的响应时间会更快，否则它们会在 PHP 脚本中动态创建。更受欢迎的页面将很快在缓存中预热。