skip to main content

Single-Pixel Image Generator

  • Image

    Single-pixel placeholder PNG in color #00ff00

  • HTML

    <img width="64" height="64" src="null" alt="Single-pixel placeholder PNG in color #00ff00">

What's this for?

I often find myself needing placeholder HTML image elements when doing web development. While I can often use a div element for this purpose, often there is external styling being applied via CSS selectors that causes differences if the placeholder is not an img element.

So a slick way to deal with this is with an img element whose src attribute is set to a data URL for a single pixel, and just setting the img's width and height to the desired size. Figuring out the data URL for a single-pixel image, for any particular color, is not particularly simple, though. So that's what this tool solves!