将原始图像数据放入Src Attr会更有效吗？ [英] Is It More Efficient to Put Raw Image Data in the Src Attr?

问题描述

最近我发现图像的 src 属性允许你直接将原始的64位图像数据放入其中。我是否认为这在技术上比单独的图像文件更有效，因为不需要额外的图像请求？或者开销如此之小以至于不值得？

另外，假设我最终这样做了，那么获得原始数据的最佳方式是什么？ （例如，我在绘画中掀起了一个图像？）

解决方案

这取决于你的意思是更高效。如果您的测量是时间，那么它可以更有效。

您所指的技术是使用 data URI 。通常情况下，您需要拍摄图像数据并 base64编码，因此它只包含ASCII字符。 base64编码数据的效果使其增加33％（每6位变为8）。

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

这个原因可能是一个好主意，因为延迟通常是浏览器请求的限制因素。它曾经是（当天的）带宽是限制，所以常见的建议是分割你的资源，但这不是事实。使用数据URI图像，浏览器不必再进行第二次往返。除此之外，您必须考虑浏览器支持。在版本8之前，IE不支持数据URI。在IE 8中，有32KB的数据上限。

希望这有助于！

I recently found out that the src attribute of an image allows you to put raw base 64 image data straight into it. Am i right in supposing this is technically more efficient than a separate image file as additional requests for the images don't have to be made? Or is the overhead so small that it's not worth it?

Also, assuming i ended up doing this, what would be the best way to get that raw data? (out of, say, an image i whipped up in paint?)

解决方案

It depends on what you mean by "more efficient". If your measure is time, then it can be more efficient.

The technique you're referring to is using a data URI. Typically you take the image data and base64 encode it so it contains only ASCII characters. base64 encoding data has the effect of making it 33% larger (every 6 bits become 8).

So this works for small images, but for large ones, the 33% premium may be too much.

The reason why it might be a good idea is that latency is often the limiting factor for browser requests. It used to be (back in the day) that bandwidth was the restriction, so the common advice was to split up your resources, but that's not true anymore. With a data URI image, the browser doesn't have to make a second round trip.

Aside from all that, you have to consider browser support. Prior to version 8, IE has no support for data URIs. And in IE 8, there's an upper limit of 32KB of data.

Hope this helps!

这篇关于将原始图像数据放入Src Attr会更有效吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！