Working with base64 and images
Posted on 2016-11-29 (Updated on 2016-11-29)
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 GIF
R0lGODdhAQABAIAAAP///////ywAAAAAAQABAAACAkQBADs=
Test PNG (32-bit)
iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA
B3RJTUUH4AsdEhMkTX3dLAAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUH
AAAADElEQVQI12P4//8/AAX+Av7czFnnAAAAAElFTkSuQmCC
Test JPG
/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