Menu
If I convert an image (jpg or png) to base64, then will it be bigger, or will it have the same size? How much greater will it be?
Is it recommended to use base64 encoded images on my website?
476
Base64 images are primarily used to embed image data within other formats like HTML, CSS, or JSON. By including image data within an HTML document, the browser doesn't need to make an additional web request to fetch the file, since the image is already embedded in the HTML document.
With the introduction of multiplexing that arrived with HTTP/2, web browsers have become incredibly efficient in delivering hundreds of files through a single connection. This works around most limits that the Base64 encoding solved and in fact means Base64 now does more bad than good.
Base64 encoding schemes are commonly used when there is a need to encode binary data that needs to be stored and transferred over media that are designed to deal with ASCII. This is to ensure that the data remain intact without modification during transport.
Base64 encoding encodes binary data as values that can only be interpreted as text in textual media, and is free of any special characters and/or control characters, so that the data will be preserved across textual media as well.
It will be approximately 37% larger:
Very roughly, the final size of Base64-encoded binary data is equal to 1.37 times the original data size
Source: http://en.wikipedia.org/wiki/Base64
70
Here's a really helpful overview of when to base64 encode and when not to by David Calhoun.
Basic answer = gzipped base64 encoded files will be roughly comparable in file size to standard binary (jpg/png). Gzip'd binary files will have a smaller file size.
Takeaway = There's some advantage to encoding and gzipping your UI icons, etc, but unwise to do this for larger images.
23
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
