<picture> elements for jxls

make-pages/GalleryPage.hs

@@ -15,7 +15,7 @@ import qualified Data.HashSet as HashSet
 import Data.List (intersperse, groupBy, sortBy, sortOn)
 import Data.Maybe
 import qualified Data.Text.Lazy as Lazy
-import System.FilePath (takeDirectory, joinPath, splitPath)
+import System.FilePath (takeDirectory, joinPath, splitPath, (-<.>))
 import GHC.Exts (Down (..), the)
 
 make :: Text -> GalleryInfo -> [(FilePath, Info)] -> Lazy.Text
@@ -158,7 +158,10 @@ makeItem nsfw file info@(Info {bg}) = [b|@0
         data-tags="$tags'">
       <figure>
         <a href="$dir">
-          <img src="$thumb" loading=lazy$bgStyle>
+          <picture>
+            <source srcset="$thumbJxl" type=image/jxl>
+            <img src="$thumb" loading=lazy$bgStyle>
+          </picture>
         </a>
         <figcaption>
           <span class=date>$date'</span>
@@ -169,7 +172,7 @@ makeItem nsfw file info@(Info {bg}) = [b|@0
  where
   title    = fromMaybe (#title info) $ #galleryTitle info
   dir      = takeDirectory file
-  thumb    = getThumb dir info
+  thumb    = getThumb dir info; thumbJxl = thumb -<.> "jxl"
   nsfw'    = if nsfw && #anyNsfw info then [b| nsfw|] else ""
   tags'    = fold $ intersperse ";" $ map fromText $ tagsFor nsfw info
   date     = #latestDate info nsfw

make-pages/SinglePage.hs

@@ -12,7 +12,7 @@ import Data.List (sort, intersperse)
 import Data.Maybe (fromMaybe, isNothing, isJust)
 import qualified Data.Text as Strict
 import qualified Data.Text.Lazy as Lazy
-import System.FilePath (joinPath, splitPath)
+import System.FilePath (joinPath, splitPath, (-<.>))
 import qualified Data.HashSet as Set
 import Data.Traversable
 
@@ -57,6 +57,7 @@ make' root siteName prefix nsfw _dataDir dir
 
   let download0 = fromMaybe (bigFile path0) download0'
   let path0'    = pageFile path0
+  let path0'Jxl = path0' -<.> "jxl"
 
   let descSection = makeDesc $ descFor nsfw info
   let tagsList    = makeTags undir $ tagsFor nsfw info
@@ -155,7 +156,10 @@ make' root siteName prefix nsfw _dataDir dir
         <figure id=mainfig>
           $warning'
           <a id=mainlink href="$download0" title="download full version">
-            <img id=mainimg src="$path0'" alt="">
+            <picture id=mainimg>
+              <source srcset="$path0'Jxl" type=image/jxl>
+              <img src="$path0'" alt="">
+            </picture>
           </a>
         </figure>
 

script/single.js

@@ -45,7 +45,10 @@ function setImage(id, src, width, height, href, cw, firstLoad) {
     mainlink.tabIndex = -1;
   }
 
-  mainimg.src            = src;
+  let jxl = src.replace(/\..*?$/, ".jxl");
+
+  mainimg.querySelector('img').src       = src;
+  mainimg.querySelector('source').srcset = jxl;
   mainfig.dataset.width  = width;
   mainfig.dataset.height = height;
   mainlink.href          = href;

style/shiny/single.css

@@ -27,7 +27,7 @@
   box-shadow: var(--focus-box);
 }
 
-#mainimg {
+#mainimg, #mainimg img {
   display: block;
 }