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.
2 个解决方案
#1
15
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中使用它来缓解下载问题。
#2
3
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是可缓存的,如果图像不是太大,使用数据网址甚至可能更好。
如果你在任何动态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,如果你使用数据网址(可以称为内联你的图像),整个页面将不会像正常一样显示在图像之前。但对于图像较小的页面而言并不重要
最后,如果您有大图像,您可能希望这样做,因为浏览器将无法像通常那样使用多个下载连接。
还有@ Oded的缺点(以及我没有想到的上行空间)
#1
15
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中使用它来缓解下载问题。
#2
3
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是可缓存的,如果图像不是太大,使用数据网址甚至可能更好。
如果你在任何动态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,如果你使用数据网址(可以称为内联你的图像),整个页面将不会像正常一样显示在图像之前。但对于图像较小的页面而言并不重要
最后,如果您有大图像,您可能希望这样做,因为浏览器将无法像通常那样使用多个下载连接。
还有@ Oded的缺点(以及我没有想到的上行空间)