Using binary image data to display an image in HTML

July 25, 2012

I learned a new trick with the HTML image tag <img> today. It blew my feeble little mind and I have to share it with you. You can use binary data in an <img> tag to display an image without needing a file sitting on the drive somewhere! Too Cool! I found this by accident when I drug an image file into the WordPress post editor and it worked. The following is an example of what it looks like and displays an image of a boat similar to my own

The code to do this looks like:

Using binary image data to display an image in HTML

Check the source code of this page if you do not believe me ;).

If you are doing this in WordPress you even still retain the ability to edit the image with the built in media editor.

21 thoughts on “Using binary image data to display an image in HTML

  1. Robust Group (January 16, 2013)

    Very cool!- Thanks for sharing- I am curious what would be the difference in the load time in between the two!

  2. Vivek (February 13, 2013)

    Thank you so much.
    you code is very helpful.

  3. Sandi Racy (March 19, 2013)

    your code is so cool! but thats an error
    you forgot to put coma after base64

    1. arif desai (October 28, 2013)

      Its very good and needful,

  4. Krisis (July 5, 2013)

    Base64 encoded images and using the data:uri can be useful, especially for images that repeat themselves on every page (cacheable UI elements) and are relatively small.

    Do realize you put the browser / client to work, it needs to decode the string back to binary data. You can, however, reduce the number of http requests (usually made for each separate image) significantly because the images are now part of the html or css. IE7 and lower can only be targeted through css and a markup called ‘mime html’ or ‘mhtml’.

  5. mythili (December 1, 2013)

    where is ur code

    1. Ben Lobaugh (blobaugh) (December 1, 2013)

      Is this legit?

      1. nemezis (February 25, 2014)


        please can you help me in showing image (in binary data) using knockout. ?

        1. Ben Lobaugh (blobaugh) (February 25, 2014)

          Do not ask a question to ask a question, just ask the question 🙂

  6. Enric Naval (April 10, 2014)

    You forgot a comma after “base64″. It should be:

    src=”data:image/jpeg;base64,{binary data}”

    1. Mani kandan (November 1, 2016)

      where is code. i cant see the code in this page.

  7. [RESOLVED]How to convert byte to image | ASP Questions & Answers
  8. [RESOLVED]How to convert byte to image | ASP Web Form Data Control
  9. James (February 15, 2015)

    This just doesn’t seem to work for me, your image’s binary works fine, but any other binary code i try to use just won’t work!

  10. Daniel (February 3, 2016)

    where has the code gone? I can’t see it now

    1. Ben Lobaugh (blobaugh) (February 9, 2016)

      The code snippet is the short example. Look at the source code of the image on that page and you will see the full representation.

  11. kml (July 10, 2016)

    Where is code

  12. kml (July 10, 2016)

    I can’t see your code

  13. Dedi (September 17, 2016)

    Its Cool and easy to implemented for me, thx

  14. Mani kandan (November 1, 2016)

    Where is your code

  15. Smith (November 3, 2017)

    Howdy! I basically would like to give a huge thumbs up for the good data you’ve got here on this post. I will probably be coming once again to your weblog for far more soon.