Over time I’ve become more a fan of base64 encoding assets where appropriate. It’s an interesting approach to reducing HTTP requests for assets by including them in the parent asset. For example, instead of including a URL reference to a background-image in your CSS, you can base64 encode it and include the image right within your stylesheet, saving you an additional HTTP request (if you’re not using a sprite). It’s a neat little trick that can improve UX by essentially removing latency.
Generating the base64 encode can be accomplished in a number of ways; there are websites that’ll do it for you, command line tools, it’s even built into some CSS preprocessor tools. I wanted to call out a new tool that essentially cuts out the middle man entirely, Enigma64. Check it out:
This little Photoshop extension lets you grab base64 encoded assets straight from Photoshop! Beyond that, it even makes exporting assets to JPG or PNG that much easier than Save for Web. It’s quite a neat little tool, definitely check it out.