This fragment is about to be reported (you'll remain on this page):

You can enter a comment to clarify the mistake if you would like to:

The smallest transparent pixel

A quick note on the smallest transparent 1x1 GIF/PNG possible.

The smallest transparent pixel

In web design sometimes you need an «empty» pixel to scale it to the desired length. For this matter I have gathered GIF and PNG both 100% transparent and white (it turns out this has some impact on the file size).

The PNGs have been ran through PNGOutWin. JPEGs I could get were above 1 KiB and for this reason are not considered.

Get all images in this archive.

Details

GIF

The winner is 1-color GIF – 35 bytes. Data URI for white 1×1 image:

data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=

Next is transparent GIF pixel – 43 bytes. Data URI:

data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==

As Camilo points out in the comments you can squeeze it down to 22 bytes or even to 14 bytes (for Chrome) – but I haven’t tested this so use at your risk (and comment back if there are problems in other browsers):

data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=

14 bytes (for Chrome):

data:image/gif;base64,R0lGODlhAQABAAAAACw=

PNG

PNG is twice as large as GIF (probably because it doesn’t use a palette). Interestingly enough fully opaque white pixel is just 1 byte smaller than a transparent PNG.

White 1×1 PNG – 76 bytes 67 bytes (thanks to Alice Bevan-McGregor). Data URI:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAAAAAA6fptVAAAACklEQVQYV2P4DwABAQEAWk1v8QAAAABJRU5ErkJggg==

Transparent PNG – 77 bytes 68 bytes. Data URI:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQYV2NgYAAAAAMAAWgmWQ0AAAAASUVORK5CYII=

Data URI

Just in case you don’t know of this handy way of embedding images directly into HTML or CSS (supported by IE 8+) – it’s called data URI as defined in ((http://www.faqs.org/rfcs/rfc2397.html RFC 2397). For example, here’s how to use them in HTML:

xml<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=" />

And here’s CSS:

cssp { background: url("data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs="); }

As you can see you first specify the image’s MIME and then its Base64-encoded data which you can calculate with this online tool. You can encode images of any size – just note that they will grow by 33% in base64 representation.

My CSS enchant/minification layer for PHP uses this to automatically eliminate requests for small server-side images from optimized CSS.

Comments RSS20

Your name: Your homepage:

Text & signature markup:You can use UverseWiki markup. In short: **bold**, //italic//, %%code%%, ((URL link)), >inline quote, <[ multiline quote ]>.

Humans! Please enter "J" here: (or turn JavaScript on for automatic verification)
Subscribe by e-mail (manage):
Ctrl+Enter »

Avatar

17 November 2014

Make one whatever color and that works in any browser or software (like photoshop) @ http://www.scriptcompress.com/1x1-pixel.htm

Your name: Your homepage:

Text & signature markup:You can use UverseWiki markup. In short: **bold**, //italic//, %%code%%, ((URL link)), >inline quote, <[ multiline quote ]>.

Humans! Please enter "J" here: (or turn JavaScript on for automatic verification)
Subscribe by e-mail (manage):
Ctrl+Enter »
Avatar

22 August 2014

I hacked PNG down to 55 bytes for 1x1px:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQ

Your name: Your homepage:

Text & signature markup:You can use UverseWiki markup. In short: **bold**, //italic//, %%code%%, ((URL link)), >inline quote, <[ multiline quote ]>.

Humans! Please enter "J" here: (or turn JavaScript on for automatic verification)
Subscribe by e-mail (manage):
Ctrl+Enter »
Avatar

22 August 2014

Downloaded size is actually 41 bytes. I was going by character numbers (oops).

Your name: Your homepage:

Text & signature markup:You can use UverseWiki markup. In short: **bold**, //italic//, %%code%%, ((URL link)), >inline quote, <[ multiline quote ]>.

Humans! Please enter "J" here: (or turn JavaScript on for automatic verification)
Subscribe by e-mail (manage):
Ctrl+Enter »
Avatar

22 August 2014

How about 14 byte hack for a 16,684 pixel BY 16,705 pixel GIF in Chrome: data:image/gif,GIF89a,AAAAAAE

16,684px by 16,705px: data:image/gif,GIF89a,AAAAAAEAAQAA 11,265px by 16,705: data:image/gif,GIF89a%01,AAAAAAEAAQAA 257px by 11,265: data:image/gif,GIF89a%01%01%01,AAAAAAEAAQAA 257px by 257: data:image/gif,GIF89a%01%01%01%01,AAAAAAEAAQAA

Your name: Your homepage:

Text & signature markup:You can use UverseWiki markup. In short: **bold**, //italic//, %%code%%, ((URL link)), >inline quote, <[ multiline quote ]>.

Humans! Please enter "J" here: (or turn JavaScript on for automatic verification)
Subscribe by e-mail (manage):
Ctrl+Enter »
Avatar

22 August 2014

Really it should read 7 byte hack as 7bytes are dropped as we no longer use «base64» and a semicolon!

Your name: Your homepage:

Text & signature markup:You can use UverseWiki markup. In short: **bold**, //italic//, %%code%%, ((URL link)), >inline quote, <[ multiline quote ]>.

Humans! Please enter "J" here: (or turn JavaScript on for automatic verification)
Subscribe by e-mail (manage):
Ctrl+Enter »
Avatar

22 August 2014

data:audio/mp3;base64,/+MYxAAAAANIAAAAAExBTUUzLjk2VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVMQU1FMy45NlV/+MYxDsAAANIAAAAAFV

100ms blank mp3 audio. Needed a «spacer» so I could add time pause for a piano app.

Your name: Your homepage:

Text & signature markup:You can use UverseWiki markup. In short: **bold**, //italic//, %%code%%, ((URL link)), >inline quote, <[ multiline quote ]>.

Humans! Please enter "J" here: (or turn JavaScript on for automatic verification)
Subscribe by e-mail (manage):
Ctrl+Enter »
Avatar

17 August 2014

Homepage Follow thread #4

Camilo Martin

For what it’s worth, here’s the SVG version now that most browsers support it:

xml<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg"/>

Your name: Your homepage:

Text & signature markup:You can use UverseWiki markup. In short: **bold**, //italic//, %%code%%, ((URL link)), >inline quote, <[ multiline quote ]>.

Humans! Please enter "J" here: (or turn JavaScript on for automatic verification)
Subscribe by e-mail (manage):
Ctrl+Enter »
Avatar

15 August 2014

Follow thread #3

Anonymous

Just reporting that the 22 byte gif version resulted in a black background for me in Mobile Safari 7 (iPad).

Your name: Your homepage:

Text & signature markup:You can use UverseWiki markup. In short: **bold**, //italic//, %%code%%, ((URL link)), >inline quote, <[ multiline quote ]>.

Humans! Please enter "J" here: (or turn JavaScript on for automatic verification)
Subscribe by e-mail (manage):
Ctrl+Enter »
Avatar

17 September 2013

Homepage Follow thread #2

Camilo Martin

Actually, these 14 bytes will work on Chrome: data:image/gif;base64,R0lGODlhAQABAAAAACw= and for 22 bytes you can have something that works in Firefox too: data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=

Your name: Your homepage:

Text & signature markup:You can use UverseWiki markup. In short: **bold**, //italic//, %%code%%, ((URL link)), >inline quote, <[ multiline quote ]>.

Humans! Please enter "J" here: (or turn JavaScript on for automatic verification)
Subscribe by e-mail (manage):
Ctrl+Enter »
Avatar

17 September 2013

Homepage Follow thread #2.1

Proger_XP

Huh? Wonderful. What did you do to that? I’ll include it into the post.

Your name: Your homepage:

Text & signature markup:You can use UverseWiki markup. In short: **bold**, //italic//, %%code%%, ((URL link)), >inline quote, <[ multiline quote ]>.

Humans! Please enter "J" here: (or turn JavaScript on for automatic verification)
Subscribe by e-mail (manage):
Ctrl+Enter »
Avatar

17 September 2013

Homepage Follow thread #2.1.1

Camilo Martin

Hehe :D I actually don’t remember where I found it, but this one is 35 bytes: http://www.google-analytics.com/__utm.gif But note that, for purposes such as js-less analytics (like for e-mails) the HTTP headers will be larger than these gifs anyway. The whole benefit is really when they’re data-URI’d.

Your name: Your homepage:

Text & signature markup:You can use UverseWiki markup. In short: **bold**, //italic//, %%code%%, ((URL link)), >inline quote, <[ multiline quote ]>.

Humans! Please enter "J" here: (or turn JavaScript on for automatic verification)
Subscribe by e-mail (manage):
Ctrl+Enter »
Avatar

22 July 2013

Follow thread #1

Alice Bevan-McGregor

Howdy!

Your PNG results are sub-optimal. Using a combination of the Gimp and pngcrush / optipng you can produce a 68-byte transparent PNG, or a 67-byte white PNG. PNGs are fully capable of utilizing a palette; one of the steps both optimization commands use is the determination of colour depth of the actual data and switching to a lower bit-depth system if such conversion can be done losslessly. In the case of both of these images the palette utilized was a greyscale one.

The following are their respective base64 representations:

iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQYV2NgYAAAAAMAAWgmWQ0AAAAASUVORK5CYII=

iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAAAAAA6fptVAAAACklEQVQYV2P4DwABAQEAWk1v8QAAAABJRU5ErkJggg==

The commands I used to produce these are:

shoptipng -out trn-o.png -strip all -o7 -zm1-9 trn-s.png

Or:

shpngcrush -blacken -reduce -brute -rle -rem text wht-s.png wht-c.png

Have a great day!

Your name: Your homepage:

Text & signature markup:You can use UverseWiki markup. In short: **bold**, //italic//, %%code%%, ((URL link)), >inline quote, <[ multiline quote ]>.

Humans! Please enter "J" here: (or turn JavaScript on for automatic verification)
Subscribe by e-mail (manage):
Ctrl+Enter »
Avatar

23 July 2013

Homepage Follow thread #1.1

Proger_XP

Hey, thank you! I have updated the article and the files.

Your name: Your homepage:

Text & signature markup:You can use UverseWiki markup. In short: **bold**, //italic//, %%code%%, ((URL link)), >inline quote, <[ multiline quote ]>.

Humans! Please enter "J" here: (or turn JavaScript on for automatic verification)
Subscribe by e-mail (manage):
Ctrl+Enter »