web: optimize delivery of pig pattern in footer

2026-05-19 22:09:25 +02:00
parent 447e1bd3ff
commit 6d712d31be
6 changed files with 63 additions and 4 deletions
@@ -0,0 +1,51 @@
+grisemonster image variants
+===========================
+
+Source: grisemonster-lossless-original.png (2048x1024 RGBA PNG, 2.0M)
+
+Files in use
+------------
+grisemonster-2048.png  443K  desktop (>1280px viewport)
+grisemonster-1280.png  227K  tablet  (601-1280px)
+grisemonster-800.png    97K  mobile  (<=600px)
+
+The previous single grisemonster.png was 624K served to every device.
+Mobile now downloads 97K (-84%); desktop downloads 443K (-29%).
+
+How they were generated
+-----------------------
+For each width W in {2048, 1280, 800}:
+
+    magick grisemonster-lossless-original.png -resize ${W}x base.png
+    pngquant 64 --quality=50-80 --speed 1 --output grisemonster-${W}.png base.png
+    oxipng -o max --strip safe grisemonster-${W}.png
+
+pngquant reduces to a 64-colour palette (the image is a flat
+illustration with very few distinct colours, so this is visually
+lossless at the displayed scale). oxipng then does a lossless
+re-encode pass to squeeze the PNG further.
+
+Wired up in src/components/layout/footer.module.scss via two
+min-width media queries on `.pigPattern`'s background-image.
+
+Why PNG, not WebP/AVIF
+----------------------
+Tested at 2048 width:
+
+    PNG  (pngquant 64 + oxipng)   443K   <-- chosen
+    PNG  (pngquant 256 + oxipng)  522K
+    AVIF q50                      493K
+    AVIF q60                      598K
+    AVIF q75                      718K
+    WebP q75                      829K   larger than current PNG
+    WebP q85                      903K   larger than current PNG
+    WebP lossless                 1.0M   larger than current PNG
+
+For this kind of content -- a flat, limited-palette illustration with
+large transparent regions -- palette PNG is the smallest format.
+WebP and AVIF are tuned for photographic content and lose to a
+well-quantised PNG here. Visual quality of the three PNG/AVIF options
+above was indistinguishable at the rendered scale.
+
+Conclusion: the win came from responsive sizing, not from changing
+format. Stayed on PNG to keep the CSS simple (no image-set() needed).