Labs

This mini lab demonstrates how responsive images work in practice. Toggle sizes and pixel density to see which source the browser picks and how large it is. Useful for optimizing LCP and bandwidth.

Width: DPR: Sizes:

Tip: Replace with your real hero or project image variants for an authentic demo.

Live Readout

Displayed width: –
Device pixel ratio: –
sizes: –
Chosen source: –
Natural resolution: –

This demonstrates how the browser picks an appropriate resource for the current layout width and DPR. Optimizing these is key for LCP.

Interactive Demos

A simple Mandelbrot renderer. Move the sliders to explore. This has a WASM-ready hook; current implementation runs in optimized JS for portability.

Iterations Zoom Center X Center Y