Transparency Test Page

This page demonstrates various transparency and alpha channel effects to test PNG vs JPEG format differences.

Page Information

This page will show how different image formats handle transparency and semi-transparent elements.

These samples show different levels of transparency against a checkerboard background:

rgba(74, 111, 165, 1.0)

rgba(74, 111, 165, 0.75)

rgba(74, 111, 165, 0.5)

rgba(74, 111, 165, 0.25)

rgba(74, 111, 165, 0.1)

rgba(74, 111, 165, 0)

Opacity: 50% Color:

rgba(74, 111, 165, 0.5)

This gradient transitions from fully transparent to fully opaque:

This example shows multiple transparent layers stacked on top of each other:

This section illustrates the difference between PNG (supports transparency) and JPEG (does not support transparency):

PNG preserves transparency

PNG format supports alpha channel transparency, making it ideal for images that need transparent or semi-transparent areas.

JPEG replaces transparency with white

JPEG format does not support transparency. Transparent areas are typically replaced with a solid color (usually white) when converting to JPEG.

When testing the screenshot service with this page:

First take a screenshot in PNG format to establish a baseline with transparency preserved.
Then take a screenshot in JPEG format to see how transparency is handled (typically replaced with white).
Compare the results to verify the format differences in transparency handling.

POST /v1.0/screenshot
{
  "url": "http://localhost:8000/transparency",
  "format": "png"
}

POST /v1.0/screenshot
{
  "url": "http://localhost:8000/transparency",
  "format": "jpeg"
}