DEV Community

Joe Steinbring
Joe Steinbring

Posted on • Originally published at on

Data URLs

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.

The post Data URLs first appeared on Blog.jws.

Discussion (0)