How to Create a Browser Checkerboard Preview for Transparent PNG Assets

Preview transparency without changing the image

A checkerboard behind an image makes transparent regions easier to distinguish from white pixels. It is a display aid: it does not remove a background, modify the PNG's alpha information, or prove that an image will look correct on every destination background.

For a small browser preview, put the pattern on a wrapper and keep the image above it in normal document flow. This avoids a positioned overlay covering the image. It also avoids changing the image's opacity, which would make opaque pixels appear translucent and give the reviewer misleading results.

Start with a complete HTML example

Save the following as an HTML file and place a PNG named cutout.png beside it. Replace that filename and the alternative text with values appropriate for your own asset. The image keeps its intrinsic aspect ratio and scales down when the wrapper is narrower than the source.

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>PNG transparency preview</title>
<style>
  .checkerboard-preview {
    display: inline-block;
    max-width: 100%;
    background-color: #ffffff;
    background-image: conic-gradient(
      #e5e7eb 25%, #ffffff 0 50%,
      #e5e7eb 0 75%, #ffffff 0
    );
    background-size: 20px 20px;
    border: 1px solid #6b7280;
  }
  .checkerboard-preview img {
    display: block;
    max-width: 100%;
    height: auto;
    opacity: 1;
  }
</style>
<figure>
  <div class="checkerboard-preview">
    <img src="cutout.png" alt="Product cutout being reviewed">
  </div>
  <figcaption>Checkerboard preview; the source image is unchanged.</figcaption>
</figure>
</html>

The conic gradient creates four alternating quarters inside each repeated tile. A repeating linear gradient would create diagonal stripes instead. The solid background color provides a plain fallback if the gradient is unavailable; check the preview in the browsers your project supports.

Compare opaque, transparent, and partially transparent regions

Open the page with an image that contains known transparent areas. The pattern should appear through those areas while fully opaque parts cover it. A PNG can be entirely opaque, so its file extension alone is not evidence that it contains useful transparency.

Next, compare the image against plain light and dark backgrounds. A checkerboard can hide a faint fringe that becomes obvious on a solid surface. Inspect the original photograph beside the cutout to check for missing handles, thin edges, or details that should have remained visible.

Keep background removal separate from previewing

If the source still needs background removal, you can use RemovePhotoBG as a separate preparation step. Load the resulting PNG into the same preview and compare it with the source. The checkerboard page only helps display the result; it does not repair the mask or validate a service's output automatically.

Do not lower the image's opacity to make the grid more visible. Adjust the grid's colors or tile size instead. Finally, inspect the exported asset at its intended display size and in the actual page layout, where surrounding colors and cropping may reveal different problems.