I have been working with base64 encoding a lot recently, specifically regarding image files. Using base64 is a cool way to embed images in your CSS, and happens to be useful when writing Django tests that involve an image file field.
If you're on Linux or have access to bash, you can encode image files easily using the
base64 command. I usually pair this with
xclip to dump it to my clipboard.
base64 image.jpg | xclip -selection clipboard
If you're using Firefox, you can right-click on an
img element and select "Copy > Image Data-URL" to get a base64 string with the MIME-type prepended. I didn't see an immediate way to do this in Chrome, but I'm not too familiar with their dev tools.
To convert this data back to an image file, I use the following command (wrapped in a bash script):
xclip -o | cut -d',' -f 2 | base64 -d > image.jpg
As a final measure, I've created a series of 1x1 test images and base64-encoded them. I may add more as the need arises, but these have been more than sufficient for what I use.
Test PNG (32-bit)
iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA B3RJTUUH4AsdEhMkTX3dLAAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUH AAAADElEQVQI12P4//8/AAX+Av7czFnnAAAAAElFTkSuQmCC
/9j/4AAQSkZJRgABAQEASABIAAD//gATQ3JlYXRlZCB3aXRoIEdJTVD/2wBDAAMCAgMCAgMDAwME AwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBD AQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQU FBQUFBQUFBT/wgARCAABAAEDAREAAhEBAxEB/8QAFAABAAAAAAAAAAAAAAAAAAAACP/EABQBAQAA AAAAAAAAAAAAAAAAAAD/2gAMAwEAAhADEAAAAVSf/8QAFBABAAAAAAAAAAAAAAAAAAAAAP/aAAgB AQABBQJ//8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAgBAwEBPwF//8QAFBEBAAAAAAAAAAAAAAAA AAAAAP/aAAgBAgEBPwF//8QAFBABAAAAAAAAAAAAAAAAAAAAAP/aAAgBAQAGPwJ//8QAFBABAAAA AAAAAAAAAAAAAAAAAP/aAAgBAQABPyF//9oADAMBAAIAAwAAABCf/8QAFBEBAAAAAAAAAAAAAAAA AAAAAP/aAAgBAwEBPxB//8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAgBAgEBPxB//8QAFBABAAAA AAAAAAAAAAAAAAAAAP/aAAgBAQABPxB//9k=
Tags: python django css linux browsers