Performance and optimization · Pictures that don't cost the page
Media rendering-style app
Illustrative system design for a pictures that don't cost the page app like Media rendering: 4 topics to read, from requirements to deep dives.
Illustrative design, not Media rendering’s actual implementation. Arrowbox is not affiliated with Media rendering’s owner. Disclaimer
Start with Responsive images Sign in to start readingUpdated 2 Oct 2026
Core
srcset lists candidate widths, sizes tells the browser how wide the image will display, and the browser picks by viewport and pixel density; picture handles different crops for different layouts.
AVIF and WebP beat JPEG and PNG at the same visual quality; an image CDN can resize and re-encode on the fly and pick the format the browser advertises, at the cost of cache variants.
Defer off-screen images with loading=lazy or an IntersectionObserver, never the one above the fold, and hold their space with a placeholder colour or blurred preview so nothing jumps when they arrive.
A short looping clip should be a muted, playsinline video with a poster and preload set deliberately, paused when off-screen; long-form playback is a player problem, not a page one.