When building a webpage, every image tag (<img src="logo.png">) triggers a separate HTTP request to the server. If your page has 30 small icons, that is 30 separate network requests, which can slow down rendering.
One technique developers use to solve this is converting the image into a Data URI using Base64 encoding. Instead of linking to a file, the image data is embedded directly in the HTML:
<img src="data:image/png;base64,iVBORw0KGgo..." />The Pros of Base64 Images
- Fewer HTTP Requests: Because the image data is inside the HTML/CSS file, the browser doesn't need to ask the server for the image file.
- Instant Rendering: As soon as the HTML is parsed, the image appears. There is no pop-in delay while an image downloads.
- Offline Capabilities: If the HTML is saved locally, the images will still load without an internet connection.
The Cons (Why you shouldn't encode everything)
So if Base64 removes network requests, why don't we encode every image on the internet?
1. It increases file size by ~33%
Binary data is efficient. Base64 is not. Converting an image to ASCII characters increases its total byte size by about 33%. A 100KB JPEG becomes a 133KB text string.
2. It blocks the HTML parser
Browsers download HTML first, and then fetch images in the background asynchronously. If you embed a massive 2MB image as a Base64 string inside your HTML, the browser has to download and parse that massive string before it can continue rendering the rest of the page. Your users will stare at a blank white screen.
3. Poor Caching
Standard image files are cached heavily by the browser. If a user visits a second page, the logo image doesn't need to be downloaded again. If that logo is embedded in the HTML as Base64, it gets downloaded every time the HTML is requested (unless the whole HTML file is cached).