01
Generate responsive variants
Use the media pipeline to produce appropriate sizes and formats, then serve intrinsic dimensions through picture markup or equivalent responsive sources.
02
Keep remote input constrained
Treat remote image and font URLs as untrusted. Validate an allowlist before fetching and make transform caches bounded and observable.
03
Describe meaningfully
Every meaningful image needs accurate alt text. Decorative artwork should be marked as decorative rather than given noisy repeated descriptions.
PRACTICAL LABS
Run this capability.
Each example states the observable output, the boundary that remains your responsibility, and the check that proves the result.
01
Deliver responsive media
TSX<picture>
<source srcSet="/images/workbench-960.avif" type="image/avif" />
<source srcSet="/images/workbench-960.webp" type="image/webp" />
<img src="/images/workbench-960.jpg" width="960" height="540" alt="Workbench article overview" />
</picture>- OUTPUT
- The browser receives a supported format with stable intrinsic layout dimensions.
- BOUNDARY
- Remote media requires an explicit allowlist; meaningful images need accurate alt text.
- PROVE IT
- Inspect sources, dimensions, fallback, and delivered weight.
VERIFICATION
Prove the contract.
Check dimensions, responsive sources, fallback format, cache behavior, alt text, OG image output, and page weight.