I Embedded All My Small Images as Base64 and My Site Got Faster
Converting tiny icons and UI elements to Base64 eliminated dozens of HTTP requests and measurably improved page load time.
My personal website had 27 small images. Icons, UI elements, a logo. Every single one was a separate HTTP request. When I looked at the network tab in DevTools, it was just a waterfall of tiny image requests, each one adding 50-100 milliseconds of latency.
I decided to try something I had read about but never done: convert all the small images to Base64 and embed them directly in my CSS and HTML.
The Conversion Process
I went through every small image on my site — anything under 5KB. I dragged each one into the Image to Base64 converter. Copied the data URI string. Pasted it directly into my CSS as a background-image or into my HTML as an inline src. No more separate image files. No more HTTP requests.
Important note: Base64 encoding increases file size by about 33 percent. For images under 5KB, this is negligible — going from 3KB to 4KB does not matter. For large photos, it would be terrible. This technique is specifically for small, frequently-used assets like icons, logos, and UI elements.
The Results
Before: 27 image requests, each adding latency. After: 0 image requests for those assets. My page load time dropped from about 2.1 seconds to about 1.6 seconds. That is a 24 percent improvement from one change.
The key insight is that reducing the number of HTTP requests often matters more than reducing total download size. Twenty-seven tiny files take longer to load than one slightly larger CSS file with everything embedded. If you have lots of small icons on your site, try converting them to Base64. Your users will notice the difference, even if they cannot explain why your site feels snappier.