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=">

Comments

  1. User Avatar
    Rafael Ehlers
    Permalink to comment#

    Very very handy!

  2. User Avatar
    zsitro
    Permalink to comment#

    where should i use it?

  3. User Avatar
    Jan-Marten de Boer
    Permalink to comment#

    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.

  4. User Avatar
    Gigi
    Permalink to comment#

    Maybe will be useful write also where we can use this code.
    Can i use it with an href link to retrieve clicks statistics?

  5. User Avatar
    MAX
    Permalink to comment#

    wow thanks, i use it in combination with lazyload jQ plugin

  6. User Avatar
    Viswanathan
    Permalink to comment#

    Good one… But IE7 will not support data URI, is there any alternative for that?

  7. User Avatar
    Juan
    Permalink to comment#

    Thanks but I don´t understand the aplication of this code. Icons of 1×1?

  8. User Avatar
    Pawel
    Permalink to comment#

    I think 2×1 would far more useful.

    • User Avatar
      Julian Cizmic
      Permalink to comment#

      Yes, the point being to create a small file size. Anyway, you can always expand the file using the height and width attributes. However, this would only be useful in HTML e-mails, as using spacer GIFs on webpages isn’t very good web design.

  9. User Avatar
    Muthu
    Permalink to comment#

    Give a demo. Plz.

  10. User Avatar
    ApplePi

    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. :-)

  11. User Avatar
    Maarten

    Thanks!

  12. User Avatar
    Sri Ganesh.M

    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 !

  13. User Avatar
    آژانس مسافرتی
    Permalink to comment#

    Very very handy!

  14. User Avatar
    hlektroniko tsigaro
    Permalink to comment#

    Thank you very mush!

  15. User Avatar
    Aaron

    Hey mate, does Outlook etc support this for EDMs?

  16. User Avatar
    mike
    Permalink to comment#

    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

  17. User Avatar
    Alhadis
    Permalink to comment#

    Hah! The transparent GIF is the same number of bytes as the one I’ve been using since 2007. Binary data differs slightly, though:

    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAEALAAAAAABAAEAAAIBTAA7" alt="" />
    
  18. User Avatar
    Majid
    Permalink to comment#

    One possible use for this: replacing the transparent gif in the first method described here to vertically center text in a div.

  19. User Avatar
    Adil
    Permalink to comment#

    Although a very specific but really helpful

  20. User Avatar
    appcropolis
    Permalink to comment#

    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.

  21. User Avatar
    George Adamson
    Permalink to comment#

    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.

  22. User Avatar
    kodtest
    Permalink to comment#

    I dont understand exactly. where should i use it?

  23. User Avatar
    Juho Viitasalo
    Permalink to comment#

    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.

  24. User Avatar
    Manuel
    Permalink to comment#

    If anyone needs a semi-transparent Base64 encoded PNG pixel as CSS RGBA fallback. See http://px64.net

  25. User Avatar
    Roko C.B.

    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 image src to that IMG background and setting the CSS3 background-size to cover.

    $(".self-contained").each(function(){
      $(this).css({background: 'url('+ this.src +') no-repeat center center', backgroundSize: 'cover'}).attr('src', 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7');
    });
    

    Here’s a demo for you to test and play with: http://jsbin.com/self-contained-images/1/edit

  26. User Avatar
    Daniel
    Permalink to comment#

    I’m sorry, but I don’t understand what this is for?

  27. User Avatar
    Marklets
    Permalink to comment#

    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

  28. User Avatar
    Jason
    Permalink to comment#

    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

  29. User Avatar
    Fikret
    Permalink to comment#

    Here is a free base64 css generator from an image:
    http://www.base64css.com

    I think it will be helpful to someone.

  30. User Avatar
    smith
    Permalink to comment#

    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.

  31. User Avatar
    avi
    Permalink to comment#

    nice article, very helpfull.
    i used this web site to encode/decode
    for testing.
    http://www.ebase64encode.org

  32. User Avatar
    Junaid Atari
    Permalink to comment#

    cool, very useful

  33. User Avatar
    __JM__Joy__
    Permalink to comment#

    Very good!

  34. User Avatar
    Jess
    Permalink to comment#

    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. :)

  35. User Avatar
    JustMe
    Permalink to comment#

    The peoples want a white one.
    Give us a white one! :)
    Ohhh, never mind… I will make one myself… :(

  36. User Avatar
    Elvis Schwartz
    Permalink to comment#

    Great for tracking, eh? BlueGriffon generates them too (although not sure how efficient).

  37. User Avatar
    mark
    Permalink to comment#

    People! 2016 now, and transparent pixel embedded? Like, where? CodePen, maybe?

  38. User Avatar
    Ben Finney

    The PNG Pixel tool http://png-pixel.com/ will generate the Base64-encoded representation of a custom transparent image.

  39. User Avatar
    hezedu
    Permalink to comment#

    great!

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-searchicon-staricon-tag