Embed PNG pixels directly in your source code

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

CSS

HTML

Smallest 1x1 transparent PNG pixel possible

We always try to generate the smallest possible PNG image. Our 1x1 transparent pixel for example uses only 68 bytes. If you know how to compress the PNG image any further, please let us know in the comments below.

1x1 transparent GIF pixel

If you don't need color or alpha you could use a fully transparent 1x1 GIF pixel to save a few more bytes.

Transparent 1x1 GIF pixel

Transfer speed considerations

Some people argue, that the base64 encoded 1x1 pixel requires more space than the plain PNG image and therefore the PNG 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 1x1 PNG pixel wastes 28 bytes.

What 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 PNG 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 1x1 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 PNG pixels are not as useful as before. But if you want your pages to support old browsers it's still nice to have.