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:
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.
Very cool!- Thanks for sharing- I am curious what would be the difference in the load time in between the two!
Thank you so much.
you code is very helpful.
your code is so cool! but thats an error
you forgot to put coma after base64
//correct
Its very good and needful,
Thanks
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’.
where is ur code
Is this legit?
hello,
please can you help me in showing image (in binary data) using knockout. ?
Do not ask a question to ask a question, just ask the question 🙂
You forgot a comma after “base64″. It should be:
src=”data:image/jpeg;base64,{binary data}”
where is code. i cant see the code in this page.
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!
where has the code gone? I can’t see it now
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.
Where is code
I can’t see your code
Its Cool and easy to implemented for me, thx
Where is your code
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.