How to Get a Base64 Version of a File From Command Line

By  on  

A while back I wrote an article on how to Convert Image to Data URI with JavaScript. It's a neat trick developers can use for any number of reasons. Instead of abusing canvas, however, why not simply get the base64 data from command line?

You can use base64 and pbcopy to convert a file to base64 and copy it to the clipboard:

# base64 gets data, pbcopy copies to clipboard
base64 -i logo.jpeg | pbcopy

Once you have the file data copied in base64 format, the URL format to use the data is:

# data:{mime-type};base64,{data}
data:image/jpeg;base64,/9j/4AAQSkZJRgAB......

While base64 data and data URIs do look cryptic, they're useful to avoid making requests to other files. I use them when creating presentations or when I can't count on a decent internet connection.

Recent Features

  • By
    Create a Sheen Logo Effect with CSS

    I was inspired when I first saw Addy Osmani's original ShineTime blog post.  The hover sheen effect is simple but awesome.  When I started my blog redesign, I really wanted to use a sheen effect with my logo.  Using two HTML elements and...

  • By
    Serving Fonts from CDN

    For maximum performance, we all know we must put our assets on CDN (another domain).  Along with those assets are custom web fonts.  Unfortunately custom web fonts via CDN (or any cross-domain font request) don't work in Firefox or Internet Explorer (correctly so, by spec) though...

Incredible Demos

Discussion

    Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!