Images vs Base64 – Test for yourself!
UPDATE: testing has revealed that data URIs are six times slower on mobile devices than simple images. Be aware that every situation may be different, and that you should make decisions based on YOUR website and YOUR clientele.
I spent some time this morning reading a good article about speeding up web pages by looking at their critical render path. It’s a good article, and I recommend it. It outlines a smart look at how web pages work.
One of the improvements that the author suggests is to remove your header image (for example, the logo at the top of your page). You would then encode the image as base64, reducing the time it takes to download. Sounds great, right? Not so fast!
Before you implement any changes to your own website, you must ask yourself an important question: does this apply to me? Suggestions like this one should be taken on a case-by-case basis. For example: the header on my personal blog weighs in at 94kb. That seems pretty big to me, but I haven’t optimized it. Here’s what it looks like:
When you convert that image to base64 (using an encoder like this one), it will look something like this:
<img src="data:image/png;base64,/9j/7gAhQWRvYmUAZMAAAAABAwAQAwMGCQAAV8AAAPtjAAF35//bAIQAAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQICAgICAgICAgICAwMDAwMDAwMDAwEBAQEBAQECAQECAgIBAgIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMD/8IAEQgA4gPBAwERAAIRAQMRAf/EAXIAAAICAQUBAQAAAAAAAAAAAAQFAwYCAAEHCQoICwEBAAEDBQEAAAAAAAAAAAAAAAEHCAkCAwQFBgoQAAEDAwMDAAYIBQMEAwEAAAIAAQMEBQYRBwgSExQQFRYXNwlgITEiMjU2ODAjMxgZIEBBQiQ0OVCQQygRAAEBBQMGCQMLDA0HCQYHAQECABEDBAUhEgYxUWFxIgdBgZGhscHRMhNCgiPw4VJicjMUFRbWCBDxktJDlTZ2hrY3d6KywoM0RLS11ZbGF7cgcyR1haY44lNj04SU1DUmMJPEJUVXQPJkVWUnlygSAAECAwQADwYQCgYJAQkAAAECAwARBCExEgUQQVFhcbEiktITM6PTNAaBkTKzFHUgYKHB0UJScrIjc3S0FTUHMGKCg5OElLU2dkDwwlMkFlDhokPDpMTUJZDx8mNUVYWVJggTAQACAgEDAwQCAwEBAQAAAAERIQAxQVFhcYGRoRDwsdHB8SBg4TBAUP/aAAwDAQACEQMRAAAA+7vR7KTdgQlLIcljUYkxbS8j0wChkOS6B5otwSRmAqIRkDkACAmAKCmI4MByJywEQxBREYgYWDhIjNhIXIfkIeMxoSDQwDRMRgoODARAICIAIg0WjURg4tJgcXkxEAiwronBA0XEgvFpor4vFxGRkZMSCoENCQCGZkFkgEIhYJzIkBgIUH3EcC7Uw7sXYMLsWMLJwYtY4HAQMxsNB4WQPCAonEQeRhRibEZWStFYGxmOjE..." />
…except that it goes on and on and on and on. Encoding an image into base64 means turning all of the visible bits into code bits. The idea is that you’ll reduce the amount of data your visitors will have to download. The problem? Encoding my own header image makes it larger! My header went from 94kb to around 120kb. That’s a 20% increase.
The lesson here is to avoid knee-jerk reactions about technical things. A lot of people might read this article and figure they should encode ALL of their images…but that could turn out to be bad instead of good. Test everything for yourself, on your own website. That’s the only way to know what will work best for you!
