使用base64,SVG,PNG的优点和缺点

5 base64 svg png

使用这些中的优点和缺点是什么?

例如,是否可以说哪一个加载速度最快?

是一个分辨率,图像质量比另一个好吗?

数据:图像/ SVG + xml的; BASE64

<img src='data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjI2IDE0ODEiPgogIDxwYXRoIGQ9Ik0wIDEzOTRWODdDMCA0Ni4zIDEzLjMgMTkuOCA0MCA3LjUgNjYuNy00LjggOTguNy4zIDEzNiAyM2wxMDM0IDYzNGMzNy4zIDIyLjcgNTYgNTAuMyA1NiA4M3MtMTguNyA2MC4zLTU2IDgzTDEzNiAxNDU4Yy0zNy4zIDIyLjctNjkuMyAyNy44LTk2IDE1LjUtMjYuNy0xMi4zLTQwLTM4LjgtNDAtNzkuNXoiIGZpbGw9IiMwMDU5ZGQiLz4KIDwvc3ZnPg==''>
Run Code Online (Sandbox Code Playgroud)

VS.

SVG

 <svg viewBox="0 0 1226 1481" >
  <path d="M0 1394V87C0 46.3 13.3 19.8 40 7.5 66.7-4.8 98.7.3 136 23l1034 634c37.3 22.7 56 50.3 56 83s-18.7 60.3-56 83L136 1458c-37.3 22.7-69.3 27.8-96 15.5-26.7-12.3-40-38.8-40-79.5z" fill="#0059dd"/>
 </svg>
Run Code Online (Sandbox Code Playgroud)

VS.

PNG

 <img src="https://i.imgur.com/Z3AgRDe.png"> 
Run Code Online (Sandbox Code Playgroud)

小智 0

Base64 的最大问题之一是大小,原始图像大小增加了近 30%。

  • 欢迎提供解决方案的链接,但请确保您的答案在没有它的情况下也是有用的:[在链接周围添加上下文](//meta.stackexchange.com/a/8259),这样您的其他用户就会知道它是什么,并且为什么它在那里,然后引用您链接到的页面中最相关的部分,以防目标页面不可用。[仅是链接的答案可能会被删除。](//stackoverflow.com/help/deleted-answers) (4认同)