Gosub image decoding & rendering test

Each format below should render identically and show its name. The page background is a CSS checkerboard so transparent areas (PNG circle, GIF corner) reveal the pattern underneath.

1. Inline <img> — one per format

JPEG
JPEGassets/photo.jpg — lossy, no alpha
PNG
PNGassets/logo.png — RGBA, transparent circle
GIF
GIFassets/sprite.gif — palette + transparent corner
SVG
SVGassets/vector.svg — vector
WebP
WebPassets/picture.webp — lossy

2. CSS background-image — one per format

JPEG bg (cover)
PNG bg (contain)
GIF bg (contain)
SVG bg (contain)
WebP bg (cover)

3. background-repeat — tiling a small image

4. background-size — cover vs contain (wide.jpg, 800×200)

5. Scaling — same SVG & PNG at several widths

svg 64 svg 128 svg 256 png 64 png 128

6. Edge cases

broken image — should show alt text / placeholder
Missing image — broken/placeholder handling
1x1 data-URI PNG scaled up
Data-URI PNG — 1×1 blue pixel scaled to 200×120