Base64 Encode of 1x1px Transparent GIF
Just in case you need one. You can stretch it out to fill space as needed.
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">Or a black one:
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=">
Very very handy!
where should i use it?
HTML Emails maybe, just a guess though.
It reduces the amount of network requests compared to using a separate image file.
Managing a 1 pixel width on a sprite sheet will be annoying.
I use a transparent icon as cursor for one of my Narrowcasting solutions. That way, when you focus the browser window, the mouse disappears. Very neat trick. Set the cursor to none with a fallback to a transparant image. Works cross platform, cross browser.
the purpose of hiding the cursor is?
THe purpose could be HTML5 Videos (cursor hiding like on youtube)
Maybe will be useful write also where we can use this code.
Can i use it with an href link to retrieve clicks statistics?
http://probablyprogramming.com/2009/03/15/the-tiniest-gif-ever
wow thanks, i use it in combination with lazyload jQ plugin
Good one… But IE7 will not support data URI, is there any alternative for that?
IE does if you serve it in an MHTML
http://www.phpied.com/the-proper-mhtml-syntax/
Thanks but I don´t understand the aplication of this code. Icons of 1×1?
I think 2×1 would far more useful.
Yes, the point being to create a small file size. Anyway, you can always expand the file using the
heightandwidthattributes. However, this would only be useful in HTML e-mails, as using spacer GIFs on webpages isn’t very good web design.Give a demo. Plz.
Sounds like lots of n00bs around who weren’t around to remember the necessity ofthe venerable 1px x 1px transparent gif hack.
Brings back memories. Mostly painful ones. :-)
Thanks!
Sir, i am not familiar with the codes here. but i think this one like the same CODE used in FLICKR, when we save the image, it will save as 1px image ! or how to use them !
Very very handy!
Thank you very mush!
Hey mate, does Outlook etc support this for EDMs?
Okay Chris I give in.
How did you get the gif down to that?
Yours:
“data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=”
My best gif:
“data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEHAAEALAAAAAABAAEAAAICTAEAOw==”
And at double the size my best png:
“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAMAAAAoyzS7AAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAA1JREFUeNoBAgD9/wAAAAIAAVMrnDAAAAAASUVORK5CYII=”
;o) s’moike
Hah! The transparent GIF is the same number of bytes as the one I’ve been using since 2007. Binary data differs slightly, though:
One possible use for this: replacing the transparent gif in the first method described here to vertically center text in a div.
Although a very specific but really helpful
I was about to generate this code, but I am glad I found this article. In my case, I have a mobile application that has an image. The source value of the image is set dynamically, and I need to point to a placeholder image while the application determines the final image URL. When the source value is not set, some browsers show an ugly icon (broken or missing resource) but having a small transparent image as string, will prevent the broken image icon, and will save one HTTP request.
Pretty handy! Thanks for posting this.