feat(images): JPEG XL optimizer with webp/jpg fallback and <picture> serving

img_optimize() decodes .jxl with djxl or Imagick, resizes with GD, re-encodes
with cjxl and writes foto.jxl.webp beside it; skips cleanly without a decoder.
Gallery, hero, navbar logos and JSON-LD serve the JXL with the fallback, and
trash/removal move the fallback with its .jxl.

site/assets/css/style.css

@@ -4456,6 +4456,8 @@ h3.contact-title {
   cursor: zoom-in;
 }
 
+/* .jxl images are <picture> (img_tag): let the <img> size against its parent as before. */
+.gal-link picture, .navbar-brand picture, .gym-switch-btn picture { display: contents; }
 .gal-link img {
   width: 100%;
   height: 100%;

site/assets/js/main.js

@@ -722,7 +722,8 @@ document.addEventListener('DOMContentLoaded', function () {
         function show(i) {
             current = (i + links.length) % links.length;
             var src = links[current].querySelector('img');
-            img.src = links[current].getAttribute('href');
+            // The tile's chosen source (JXL inside <picture> where supported), else the link (fallback).
+            img.src = (src && src.currentSrc) || links[current].getAttribute('href');
             img.alt = src ? src.alt : '';
             // Restart the fade-in for each photo.
             img.style.animation = 'none'; void img.offsetWidth; img.style.animation = '';