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:
data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=
Next is transparent GIF pixel – 43 bytes. Data URI:
data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==
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=
data:image/gif;base64,R0lGODlhAQABAAAAACw=
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=
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=" />
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.