Transparent pixel generator | Base 64 encoded

Embeds

If you don't like having 1x1 pixel images in your projects, you can embed the base64 encoded pixel directly into your css or html files.

Base 64 encoded

R0lGODlhAQABAIAAAP///wAAACH5BAEAAAEALAAAAAABAAEAAAICTAEAOw==

Data base 64

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

CSS

background-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAEALAAAAAABAAEAAAICTAEAOw==);

PHP

<?php define( 'IMG_GIF_BASE64_1X1', 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAEALAAAAAABAAEAAAICTAEAOw==' ); ?>

HTML

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAEALAAAAAABAAEAAAICTAEAOw==" alt="" width="1" height="1" />

Transfer speed considerations

Some people argue, that the base64 encoded pixel requires more space than the plain GIF image and therefore the GIF image loads faster. That's not quite correct. A colored RGBA PNG pixel requires 70 bytes. If you encode that pixel with base64, the same pixel requires 98 bytes. So a base64 encoded PNG pixel wastes 28 bytes.

What some people tend to forget is, that now instead of one HTTP request you need two HTTP requests. One for the CSS file and one for the GIF image. HTTP requests are usually bigger than 28 bytes, depending on the used URL and the headers set by the browser and the webserver. So the embedded base64 pixel is sightly faster. But we're talking only about a few bytes anyway.

Why would I need a transparent pixel?

These pixels come in handy when you need a semi-transparent background. The CSS attribute opacity makes the background and foreground transparent and is inherited by all child elements. Since modern browsers support rgba background colors semi-transparent 1x1 GIF pixels are not as useful as before. But if you want your pages to support old browsers it's still nice to have.