Pros and Cons of using: base64 vs. SVG vs. PNG

[asasass]

What are the Pros and Cons of using each of these?

For example, would it be possible to say which one loads the fastest?

Is one resolution, image quality better than the other?

data:image/svg+xml;base64
<img src='data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjI2IDE0ODEiPgogIDxwYXRoIGQ9Ik0wIDEzOTRWODdDMCA0Ni4zIDEzLjMgMTkuOCA0MCA3LjUgNjYuNy00LjggOTguNy4zIDEzNiAyM2wxMDM0IDYzNGMzNy4zIDIyLjcgNTYgNTAuMyA1NiA4M3MtMTguNyA2MC4zLTU2IDgzTDEzNiAxNDU4Yy0zNy4zIDIyLjctNjkuMyAyNy44LTk2IDE1LjUtMjYuNy0xMi4zLTQwLTM4LjgtNDAtNzkuNXoiIGZpbGw9IiMwMDU5ZGQiLz4KIDwvc3ZnPg==''>

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>

VS.

PNG
<img src="https://i.imgur.com/Z3AgRDe.png">

[Andres_Vaquero]

Hi @asasass I think the base64 image will be the fastest to load. The advantage of the SVG is that it is scalable so you will never be able to see any pixelation in the image no matter how big you make it. You can apply image optimisations to the PNG file to make the file lighter but I think the best image type for compression is JPG, normally you would reduce the quality to about 60-70% and interlace it to give you a nicer loading effect. The advantage of PNGs is that they are the best for transparency but they are not the best for file size.

Edit: And Gifs which you don’t mention are the best for compression for simple images with not many colours

Hope that helped