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.
Does not work in several mail clients, but is still usefull for others purposes
http://www.campaignmonitor.com/blog/post/1761/embedding-images-in-email
I’m using for a poster image. This allows me to use css to style whatever I want for the video, instead of being limited to using a single image for the poster.
I use it for clickable transparent Layers in IE9/10:
http://stackoverflow.com/questions/6914822/absolute-positioned-anchor-tag-with-no-text-not-clickable-in-ie
I use for create square block by height. Example https://jsfiddle.net/Vlad_IT/eme9c2ya/1/
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. :-)
+1 for
I feel your pain :-D
Thank you soo much for this code, Chris!!!
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.
Hi, what did you use to generate the encoded GIFs? I’d like one in another colour (#ccc) but after using an online tool to convert a 1px gif file to a data-uri, the result is way larger than your example.
You can use this online Data URI Generator
I dont understand exactly. where should i use it?
This can also be used for detecting browser support for data URIs. See http://weston.ruter.net/2009/05/07/detecting-support-for-data-uris/
For example Modernizer and Grunticon uses this.
If anyone needs a semi-transparent Base64 encoded PNG pixel as CSS RGBA fallback. See http://px64.net
Just to share a useful use-example :
Self-contained images! (+jQuery)
Imagine you want to set any (!) W/H to an image but without stretching the image?!
Simple like this:
img style="width:150px; height:150px;" class="self-contained" src="img.jpg"What I’ve created was to set the transparent PNG ans the image
src(to prevent the browser placing the “missing image icon”), than passing the imagesrcto thatIMGbackgroundand setting the CSS3background-sizetocover.Here’s a demo for you to test and play with: http://jsbin.com/self-contained-images/1/edit
I’m sorry, but I don’t understand what this is for?
Very Helpful ..
I used it as source for my CSS sprites…
:)
I hacked PNG down to 41 bytes for 1x1px:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQ
Tried for a bit to get a GIF under 14 bytes, but I am getting the feeling it’s as small as it can get. Here’s some tests:
data:image/gif,GIF89a,%C2%B3%00%C3%BF%C3%BF
1px by 8256
data:image/gif,GIF89a%01%00@%20%FC%87%E4%10
16,684×16,705:
data:image/gif,GIF89a,AAAAAAE
16,684×16,705:
data:image/gif,GIF89a,AAAAAAEAAQAA
11,265×16,705:
data:image/gif,GIF89a%01,AAAAAAEAAQAA
257×11,265:
data:image/gif,GIF89a%01%01%01,AAAAAAEAAQAA
257×257:
data:image/gif,GIF89a%01%01%01%01,AAAAAAEAAQAA
I like having width 100% and height auto so things just scale. I didn’t want to create a GIF with the proper dimensions for auto scale so here you go peeps.
https://github.com/sebringj/jquery-transparent-gif
I figured out was easier with CSS padding on an empty element for aspect ratio https://css-tricks.com/easier-aspect-ratio-elements/
doh!
Here is a free base64 css generator from an image:
http://www.base64css.com
I think it will be helpful to someone.
It would be nice and humane if one of you professionals would help the noobs out, remember you were a noob one day, not nice laughing at the noobs is it. Please someone explain to the noobs what this funtion does, a kind act goes a long way.
What function?
nice article, very helpfull.
i used this web site to encode/decode
for testing.
http://www.ebase64encode.org
cool, very useful
Which cases did you using it ?
Very good!
I use a transparent, 1×1 gif file as a dummy image to satisfy Google’s structured data testing tool even if a blog post really has no picture. :)
The peoples want a white one.
Give us a white one! :)
Ohhh, never mind… I will make one myself… :(
Great for tracking, eh? BlueGriffon generates them too (although not sure how efficient).
People! 2016 now, and transparent pixel embedded? Like, where? CodePen, maybe?
The PNG Pixel tool http://png-pixel.com/ will generate the Base64-encoded representation of a custom transparent image.
great!
If anyone still visiting this is curious about a use case…
I’m using it as an inline html placeholder for async images. I set a ‘data-src’ to the actual URL I want and the ‘src’ to this encoded gif.
It’s tiny and inline so I don’t have to worry about broken links when the page first loads before JS takes over and replaces the ‘src’ with the ‘data-src’.
I could also have set it to an encoded loading gif.
Here’s the link:
Hi
my page runs in https protocol and send me the following error as I can add security to the src?
Mixed Content: The page at ‘https://www.page.com/home’ was loaded over HTTPS, but requested an insecure image ‘data: image / gif; base64, R0lGODlhAQABAAAAACw =’. This content should also be served over HTTPS.
this is my statement
<img class = “lb-image” src = “http: // data: image / gif; base64, R0lGODlhAQABAAAAACw =” /
Hi!
The problem is the ‘http’ part in your
<img>‘src’ attribute, because even though the page was loaded securely the browser is trying to load an image source that is not.But! The great part about this gif is you don’t need ‘http’ or ‘https’, because all the image data is contained in that string.
Try this(your provided encoding):
<img class = “lb-image” src="data:image/gif;base64,R0lGODlhAQABAAAAACw =">Or this(the example gif from the top):
<img class = “lb-image” src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=">