Previously, we talked about CSS sprites and a large benefit of it was that the user didn’t need to retrieve as many image files from the server. This week, we are going to look at how to not need to retrieve ANY image files from the server. The method is something called data URLs. I used this concept five years ago with my TNO encryption demo. Let’s take a look at a quick demo.
In the simple demo above, I base64 encoded a JPEG file and just included the full content of the file (using the data:[<mime type>][;charset=<charset>][;base64],<encoded data> syntax). Let’s looks at one more example.
This one works the same basic way but instead of using a JPEG file, I’m using a PNG file.
So, why use this method? The big reason is to have one fewer asset to load into the page. You are still requiring the client to download the same amount of stuff but it is via one HTTP request instead of two. I have also seen people use this method to more easily include graphics in HTML email messages.
Easy enough, right? 🙂 Have a question, comment, etc? Feel free to leave a comment.
Top comments (0)