Test inline PNG images

Alpha channel support

PNG images can contain alpha (transparency) information. Unlike GIF, which requires a particular color to be designated fully transparent, PNG allows the transparency of all pixels to take any value from fully transparent though partial transparency to full opacity.

The picture contains the word 'Testing' and three
stripes with color fades

A PNG alpha testimage

If you see three horizontal bars, two fading in from left to right and one fading in from right to left - then your browser supports display of alpha channels in inline PNG images. If you see a single horizontal bar, it doesn't (but hey, at least your browser supports inline PNG). If you see some sort of 'broken image' icon or other indication that the image could not be loaded, your browswer does not support inline PNG. If you see no image but instead the text "The picture contains the word 'Testing' and three stripes with color fades" then your browser does not display inline images; it displays the alternate text instead.

If your browser supports alpha you should also see that:

If you see a textured background behind, your browser also supports background images for CSS stylesheets - congratulations.

Technical details of this image, as reported by pngcheck 1.95:

File: alphatest.png
  chunk IHDR at offset 0x0000c, length 13
  380 x 287 image, 32-bit RGB+alpha, non-interlaced
  chunk gAMA at offset 0x00025, length 4: 0.45454
  chunk cHRM at offset 0x00035, length 32
    White x = 0.28479 y = 0.29319,  Red x = 0.625 y = 0.33999
    Green x = 0.27999 y = 0.59498,  Blue x = 0.15499 y = 0.06999
  chunk IDAT at offset 0x00061, length 26412
  chunk IEND at offset 0x06799, length 0
No errors detected in alphatest.png.

(This PNG image was created in Adobe Photoshop 4.0)

Now check whether your browser composites the alpha PNG correctly onto different colored backgrounds.

W3C PNG


Chris