1x1 PNG Pixel generator

Base64:

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

CSS

background-image:
  url(data:image/png;base64,);

HTML

<img src="data:image/png;base64,">

Transfer speed considerations

Some people argue, that the base64 encoded 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 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 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 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.

comments powered by Disqus
ANDEV