The low priority that made the mark late

The header mark is an animated GIF, 240 frames at 600 px, about 2 MB per theme, in a 48 px slot. A week earlier it got a low fetch priority and lazy loading so the text would paint first. It did. The mark then appeared about half a second after the text, and the page waited for the whole file before it played. Both themes’ images were in the HTML, one hidden with CSS.

Now there are 96 px and 144 px copies, for 2x and 3x screens, 122 to 235 KB each. ffmpeg scales with the same palette settings as the originals, ImageMagick flattens the backdrop and optimizes the layers, gifsicle finishes. GIF stays because the mark is an animation with no alpha that blends into the page, multiply on paper and screen on ink. The header has one <picture>: a source for dark with the 2x and 3x set, and an <img> with the light set. One file downloads, and its request leaves with the HTML, before the stylesheet. On a cold load with the system dark, the GIF request starts with the font preloads at 52 ms.

A <source> only knows the system theme, and the site has a toggle. A script sets the source’s media to all, to not all, or to the real query, depending on the theme attribute on the root, watches that attribute, and listens for the system to change. While the other art loads, the playing class comes off, so no flat square shows through the new blend mode.

The docs site had its own copy of the header markup, with its own 96 px GIFs. It now takes the component from the website through the sync script, along with the files.

The brand page and the styleguide still load the originals, lazily. They are the only pages where the 2 MB is the point.