RFC 2397 - Embed image data inside a URL

I discovered a URI called "data:" today which allows you to encode any amount of file data into a URL. This data could be an image, ascii text, xml data, you name it. You'll have to read the details, but you use it like this:
data:image/jpeg;base64,base_64_encoded_jpeg_goes_here

The RFC was drafted in 1998, so it's by no means new. It was news to me, though, and it's got me thinking of all sorts of interesting applications, especially since it appears to be implemented in standard browsers. Some things that you might be able to do with this include:


  • javascript based image editor

  • storage of attachments within a web page or blog entry (simplify file hosting)

  • post images or files to forums that allow url posting

  • sneak attachments past grumpy email filters

Anyway, those are just some initial ideas. You probably have better ones, so let us know in the comments.

Me, encoded in a data URL - Link.
RFC 2397 - Link.
Convert a URL or uploaded photo to a data: URI - Link.


Recent Entries

Comments

Oldest comments listed first.

Posted by: Rayvan on December 20, 2006 at 5:19 AM

encoder is dead.


Posted by: gavri on December 20, 2006 at 7:49 AM

IE hasn't implemented this.
And it would have been more impressive had you used it as the src attribute value in an img tag :)


Posted by: honeybuzzer on December 20, 2006 at 12:21 PM

I can see all sorts of uses for this--if IE supported it.


Posted by: pixelman on December 20, 2006 at 2:05 PM

Interesting find.

This appears to work in Firefox but not in IE6 which gives an "unknown zone" security message in the status bar and "invalid character" error in a popup.

If this worked cross-browser, another handy use for it would be embedding JavaScript in a script tag to obfuscate your source.


Posted by: brianiac on December 20, 2006 at 4:01 PM

Best uses: as bullet or background images embedded in CSS, or for images in AJAX HTML editors that do not include full image file management.

For a complete analysis, see http://en.wikipedia.org/wiki/Data:_URI_scheme


Posted by: Locuester on December 21, 2006 at 4:51 AM

Hey there, Software Jedi here....
I created an app to help you encode these HTML tags as part of my AnAppADay craziness. Check it out here:
http://www.anappaday.com/downloads/2006/09/day-4-base64-file-encoding.html


Posted by: dylan.berry on December 21, 2006 at 9:34 AM

Be aware that this URI scheme DOES NOT work in Internet Explorer, that includes the recently released IE7. The "data:" URI scheme is not supported.


Posted by: zcoelius on August 17, 2007 at 3:09 PM

Great stuff. We are working on an embed tool that might be able to make use of this. Thanks


Leave a comment


Subscribe to MAKE!Subscribe to MAKE Magazine!

Subscribe today, save 42% and get web access to MAKE free. MAKE Digital Edition is available only to subscribers.

$34.95 / 1 year
(4 Quarterly Issues)

Subscribe now


Void your warranty, violate a user agreement, fry a circuit, blow a fuse, poke an eye out. Make: The risk-takers, the doers, the makers of things... Welcome to Make: Online!


CRAFT Maker Shed Maker Faire MAKE television
Holiday Gift Guides from MAKE

Gifts for Dads
Science and Chemistry
More guides: Gifts Under $20, Santa Claus Machines, Geek Toys for Grown Up Girls & Boys


Check out all of the episodes of Make: television

Alex Rider Dream Gadget Contest
Make: Science Room

Connect with MAKE

Be a MAKE fan on Facebook MAKE on Facebook
Visit our Facebook page and become a fan of MAKE!
MAKE on Twitter MAKE on Twitter
Follow our MAKE tweets!
MAKE Flickr Pool MAKE on Flickr
Join our MAKE Flickr Pool!
    make_tips on Twitter




    Maker SHED

    Advertise here with FM.

    Why advertise on MAKE?
    Read what folks are saying about us!

    Click here to advertise on MAKE!



    Subscribe to MAKE Magazine!

    Make: Online authors!

    Gareth BranwynGareth Branwyn
    Senior Editor


    Phillip TorronePhillip Torrone
    Senior Editor
    | AIM | Twitter


    Becky SternBecky Stern
    Associate Editor
    | AIM | Twitter


    Marc de VinckMarc de Vinck
    Contributing Writer
    | AIM | Twitter


    John ParkJohn Park
    Contributing Writer
    | Twitter


    Sean RaganSean Ragan
    Contributing Writer
    | Twitter


    Matt MetsMatt Mets
    Contributing Writer
    | AIM | Twitter


    Dale DoughertyDale Dougherty
    Editor & Publisher
    | Twitter


    Shawn ConnallyShawn Connally
    Managing Editor
    | Twitter


    Goli MohammadiGoli Mohammadi
    Associate Managing Editor

    Kip KayKip Kay
    Weekend Projects
    | AIM | Twitter


    Collin CunninghamCollin Cunningham
    Contributing Writer
    | AIM | Twitter

    Adam FlahertyAdam Flaherty
    Contributing Writer
    | AIM | Twitter



    More contributors: Mark Frauenfelder (Editor-in-Chief, MAKE magazine), Kipp Bradford (Technical Consultant/Writer), Chris Connors (Education), Diana Eng (Guest Author), Peter Horvath (Intern), Brian Jepson (O'Reilly Media), Robert Bruce Thompson (Science Room)

    Suggest a Site!

    Current Podcast

    itunesdl.gif Weekend Project: Beetlebot Simple robot from your parts bin that avoids obstacles. Thanks go to Jerome Demers for the original article in MAKE, Volume 12. To download the Beetlebot video, click here or subscribe in iTunes. Check out the complete Beetlebot article... More...

    Get the Make: Online sent via email
    Enter your email to receive Make: Online each day:



    MAKE Fascination video series brought to you by Dow

    Make: Education
    MAKE: en EspaƱol MAKE: Japan
    Important please read


    Subscribe to MAKE Magazine!

    Recent Posts from the Craft: Blog