mediakiln

This page shipped with a 1080p MP4 that couldn't start until fully downloaded, a 2400px JPEG, a PNG, a GIF and a CSS background. One build step later, they are below.

Adaptive video

Faststart MP4 plus an HLS ladder in H.264 and HEVC, with per-title bitrates and a short first segment. The captions travel inside the stream; the scrub thumbnails are a sprite sheet with a WebVTT track (data-mk-thumbnails).

Responsive images

AVIF and WebP at several widths, with intrinsic dimensions and lazy loading.

A soft multicolour gradient A rule 110 cellular automaton pattern

GIFs and CSS backgrounds

The animated GIF is now a muted looping video; the CSS background is an image-set() with AVIF and WebP.

Opt-outs

Elements with data-mk-skip are left exactly as written:

Untouched PNG