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.



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


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


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


14 bytes (for Chrome):



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:


Transparent PNG – 77 bytes 68 bytes. Data URI:


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 (( 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.