Origin From: http://proger.i-forge.net/%D0%9A%D0%BE%D0%BC%D0%BF%D1%8C%D1%8E%D1%82%D0%B5%D1%80/[20121112]%20The%20smallest%20transparent%20pixel.html
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_smallest_transparent_pixel/eBQ#the-1 "#the-1")
The PNGs have been ran through [PNGOutWin](http://www.ardfry.com/pngoutwin "http://www.ardfry.com/pngoutwin"). JPEGs I could get were above 1 KiB and for this reason are not considered.[](The_smallest_transparent_pixel/eBQ#the-2 "#the-2")
Get all images in [this archive](http://proger.i-forge.net/Компьютер/[20121112] The smallest transparent pixel.zip "[20121112] The smallest transparent pixel.zip").[](The_smallest_transparent_pixel/eBQ#the-3 "#the-3")
Details[](The_smallest_transparent_pixel/eBQ#details "#details")
GIF[](The_smallest_transparent_pixel/eBQ#gif "#gif")
The winner is 1-color GIF – 35 bytes. [Data URI](The_smallest_transparent_pixel/eBQ#data "#data") for white 1×1 image:[](The_smallest_transparent_pixel/eBQ#gif-1 "#gif-1")
data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=
Next is transparent GIF pixel – 43 bytes. Data URI:[](The_smallest_transparent_pixel/eBQ#gif-2 "#gif-2")
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):[](The_smallest_transparent_pixel/eBQ#gif-3 "#gif-3")
data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=
14 bytes (for Chrome):[](The_smallest_transparent_pixel/eBQ#gif-4 "#gif-4")
data:image/gif;base64,R0lGODlhAQABAAAAACw=
PNG[](The_smallest_transparent_pixel/eBQ#png "#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.[](The_smallest_transparent_pixel/eBQ#png-1 "#png-1")
White 1×1 PNG – 76 bytes 67 bytes (thanks to Alice Bevan-McGregor). Data URI:[](The_smallest_transparent_pixel/eBQ#png-2 "#png-2")
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAAAAAA6fptVAAAACklEQVQYV2P4DwABAQEAWk1v8QAAAABJRU5ErkJggg==
Transparent PNG – 77 bytes 68 bytes. Data URI:[](The_smallest_transparent_pixel/eBQ#png-3 "#png-3")
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQYV2NgYAAAAAMAAWgmWQ0AAAAASUVORK5CYII=
Data URI[](The_smallest_transparent_pixel/eBQ#data "#data")
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:[](The_smallest_transparent_pixel/eBQ#data-1 "#data-1")