Pics Or It Didn't Happen

A Ruby gem that lets you include images in HTML using data URLs (and avoid serving the image file separatly).

---

This gem is a fork of Megan Ruggiero's DataURL gem.

---

Sometimes, you might want your HTML to include a one-off image file that is just for one person. Making this file public may be undesireable for security reasons, or perhaps simply because it is not worth the overhead of multiple HTTP requests.

This gem provides a utility method that takes a locally-saved image file (or an in-memory binary string representation of an image), encodes it as Base64, and returns an HTML <img> element with the correct data URL attributes.

It is made possible by the RFC 2397 scheme, which is now fairly well supported in modern browsers.

Here is an example (from this fiddle) of an <img> tag with the image data saved within the HTML itself:

<img 
  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" 
  alt="Red dot" 
/>

This example HTML page will show you how this renders in a browser. You should see a small red dot in the top left corner.

Getting Started

Run

gem install pics_or_it_didnt_happen

or add

gem 'pics_or_it_didnt_happen'

to your Gemfile.

The image_to_data_url_image_tag Method

This method takes a file path to an image file (GIF, PNG or JPG) as an argument, and returns an img tag with the image encoded as a data URL:

PicsOrItDidntHappen.image_to_data_url_image_tag('path/to/your/image.png')
=> "<img src="data:image/png;base64,ALOTOFBASE64ENCODEDDATAHERE"/>"

You can also pass alt text like this:

PicsOrItDidntHappen.image_to_data_url_image_tag('path/to/your/image.png', alt_text: 'a great image')
=> "<img src="data:image/png;base64,ALOTOFBASE64ENCODEDDATAHERE" alt="a great image"/>"

If you're working with a file that is already in memory, you can pass the file data directly:

binary_image_data = IO.binread('path/to/your/image.png')
PicsOrItDidntHappen.image_to_data_url_image_tag(binary_image_data)
=> "<img src="data:image/png;base64,ALOTOFBASE64ENCODEDDATAHERE"/>"

Contributions

Run rspec to run the tests that verify that image_to_data_url_image_tag works as expected.

Pull requests welcome!

Licence

This gem uses the MIT licence. See licence.txt for details.