Developer testing guide
Image testing guide for web applications
Image features fail at file selection, validation, optimization, layout, and decoding. TestFiles generates repeatable PNG, JPEG, WebP, and SVG inputs in the browser without publishing or uploading them.
Verified . Generated in current Chrome, Safari, and Firefox-compatible browser APIs, then inspected by the local magic-byte tool.
Practical checklist
- Validate magic bytes and MIME independently from the extension.
- Cover landscape, portrait, square, transparent, and one-pixel cases.
- Reserve intrinsic dimensions before rendering.
- Record the generated file size used by each boundary test.
Validate before rendering
Check the signature, declared MIME, byte size, and decoded dimensions independently. A renamed extension must not bypass server validation; browser checks are user guidance, not a security boundary.
Exercise responsive layouts
Use contrasting aspect ratios to test object-fit, fixed containers, srcset selection, lazy loading, and layout stability. Reserve dimensions or an aspect ratio before the image finishes decoding.
Test conversion and caching
Run one generated source through thumbnail and conversion pipelines. Verify output headers, cache keys, invalidation, orientation, transparency, and failure behavior for unsupported formats.
Expected results
- Valid generated images decode with the expected dimensions and MIME.
- Renamed or truncated inputs fail without reaching image processing.
- Responsive containers retain their dimensions while the image loads.
Common failure modes
- Trusting only the extension or browser-provided MIME.
- Removing transparency during thumbnail conversion.
- Creating layout shifts because width and height are unknown.
Generate fixtures locally
This category uses browser-generated fixtures and does not publish permanent asset URLs.
Open the local generator