Html 使用 <a href="data; ..."> 显示图像是否安全?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/5889345/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is it safe to use <a href="data; ..."> to display images?
提问by Colen
I've learned that it's possible to embed an image in an HTML page like so, instead of linking to a separate image file:
我了解到可以像这样在 HTML 页面中嵌入图像,而不是链接到单独的图像文件:
<a href="data:image/png;base64,...(blah blah base64-encoded png goes here)..."
width="70" height="38" alt="image embedded using base64 encoding!"></a>
Is this "safe", as in will all modern browsers be able to view the image, as long as I stick to common formats like PNG/JPG? Are there any downsides, other than base64-encoding the image increasing the image size by a bit?
这是否“安全”,因为只要我坚持使用 PNG/JPG 等常见格式,所有现代浏览器都能够查看图像吗?除了对图像进行 base64 编码会稍微增加图像大小之外,还有其他缺点吗?
Thanks.
谢谢。
回答by Oded
Yes, this is safe - all major browsers support the data URI scheme.
是的,这是安全的 - 所有主要浏览器都支持数据 URI 方案。
One downside is that if you use the same image a number of times in the page, it will be encoded several times vs downloaded once.
一个缺点是,如果您在页面中多次使用相同的图像,它将被编码多次而不是下载一次。
Another is the size limit imposed by some browsers (IE 8 only allows up to 32k).
另一个是某些浏览器强加的大小限制(IE 8 只允许最多 32k)。
You can also use this in CSS to mitigate the download issue.
您也可以在 CSS 中使用它来缓解下载问题。
回答by Bryan Field
All modern browsers should be able to view these types of images. I have not verified, but this capability has been around for a good while and is probably widely supported.
所有现代浏览器都应该能够查看这些类型的图像。我还没有验证过,但是这种功能已经存在了很长一段时间,并且可能得到了广泛的支持。
But you also asked for downsides. One downside is that it is common that HTML markup is dynamically generated and therefore cannot be cached.
但你也要求缺点。一个缺点是,HTML 标记通常是动态生成的,因此无法缓存。
- If you have static html pages then your html is cachable in that case using data urls might even be better for performance if the images are not too big.
- If you are including this in any dynamic html (php, cgi, jsp, shtml, just about anything other than xml,html,xhtml,htm) Then there will be zero caching and therefore the images will have to load each time instead of just the first time.
- 如果您有静态 html 页面,那么您的 html 是可缓存的,在这种情况下,如果图像不是太大,使用数据 url 可能会更好地提高性能。
- 如果您将其包含在任何动态 html(php、cgi、jsp、shtml,除了 xml、html、xhtml、htm 之外的任何内容)中,那么缓存将为零,因此图像必须每次加载,而不仅仅是第一次。
More downsides that probably don't relate
更多可能不相关的缺点
- Also on a general note, base64 takes exactly one and a third times as much space as having the file straight. That is why for larger images it might be a little less good even if it is a static html page. But if your webserver supports gzip, then it will not quite take an entire third longer for the images.
- And even if it is static html, if you use a data url (can be called inlining your images), the whole page will not display before the images like normal. But for pages with small images that should not matter
- And finally, if you have large images, you would might want to do this because the browser would not be able to use multiple download connections like it normally does.
- Also @Oded's downsides (and upside) that I did not think of
- 同样在一般情况下,base64 占用的空间正好是文件直行的三分之一。这就是为什么对于较大的图像,即使它是静态 html 页面,它也可能不太好。但是,如果您的网络服务器支持 gzip,那么图像不会花费整整三分之一的时间。
- 而且即使是静态html,如果使用数据url(可以称为内联图像),整个页面也不会像平常一样显示在图像之前。但是对于带有小图像的页面来说应该无关紧要
- 最后,如果您有大图像,您可能想要这样做,因为浏览器将无法像通常那样使用多个下载连接。
- 还有@Oded 我没有想到的缺点(和优点)