From eda954cdd679fbe8d32717e7f2291f63a76c454b Mon Sep 17 00:00:00 2001
From: Tixie <contact@tixie.name>
Date: Sun, 21 Apr 2024 20:02:31 +0200
Subject: [PATCH] Add light jpeg fallback format for browser not supporting
 webp

---
 layouts/_default/single.html | 17 ++++++++++++-----
 layouts/index.html           | 10 ++++++++--
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 7698247..a39531c 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -30,13 +30,20 @@
         <picture class="album-cover">
           {{ $original := resources.Get .Params.cover }}
           {{ $coverSmall := $original.Resize "x250 webp" }}
+          {{ $coverSmallBackup := $original.Resize "x250 jpeg q69" }}
           {{ $coverMedium := $original.Resize "x500 webp" }}
+          {{ $coverMediumBackup := $original.Resize "x500 jpeg q69" }}
           {{ $coverBig := $original.Resize "x1000 webp" }}
+          {{ $coverBigBackup := $original.Resize "x1000 jpeg q69" }}
           {{ $placeholder := $original.Resize "x15" }}
-          <source srcset="{{ $coverSmall.Permalink }} 1x, {{ $coverMedium.Permalink }} 2x" media="(max-width: 427px)">
-          <source srcset="{{ $coverMedium.Permalink }} 1x, {{ $coverBig.Permalink }} 2x" media="(max-width: 480px)">
-          <source srcset="{{ $coverSmall.Permalink }} 1x, {{ $coverMedium.Permalink }} 2x" media="(max-width: 647px)">
-          <source srcset="{{ $coverMedium.Permalink }} 1x, {{ $coverBig.Permalink }} 2x" media="(min-width: 647px)">
+          <source srcset="{{ $coverSmall.Permalink }} 1x, {{ $coverMedium.Permalink }} 2x" media="(max-width: 427px)" type="image/webp">
+          <source srcset="{{ $coverMedium.Permalink }} 1x, {{ $coverBig.Permalink }} 2x" media="(max-width: 480px)" type="image/webp">
+          <source srcset="{{ $coverSmall.Permalink }} 1x, {{ $coverMedium.Permalink }} 2x" media="(max-width: 647px)" type="image/webp">
+          <source srcset="{{ $coverMedium.Permalink }} 1x, {{ $coverBig.Permalink }} 2x" media="(min-width: 647px)" type="image/webp">
+          <source srcset="{{ $coverSmallBackup.Permalink }} 1x, {{ $coverMediumBackup.Permalink }} 2x" media="(max-width: 427px)" type="image/jpeg">
+          <source srcset="{{ $coverMediumBackup.Permalink }} 1x, {{ $coverBigBackup.Permalink }} 2x" media="(max-width: 480px)" type="image/jpeg">
+          <source srcset="{{ $coverSmallBackup.Permalink }} 1x, {{ $coverMediumBackup.Permalink }} 2x" media="(max-width: 647px)" type="image/jpeg">
+          <source srcset="{{ $coverMediumBackup.Permalink }} 1x, {{ $coverBigBackup.Permalink }} 2x" media="(min-width: 647px)" type="image/jpeg">
           <img
             class="album-cover__visual"
             width="500"
@@ -45,7 +52,7 @@
               background-image: url(data:{{ $placeholder.MediaType }};base64,{{ $placeholder.Content | base64Encode }});
               view-transition-name: album_cover_{{ .File.BaseFileName }};
             "
-            src="{{ $coverMedium.Permalink }}"
+            src="{{ $coverMediumBackup.Permalink }}"
             loading="lazy"
             alt="{{ .Title }} album's cover"
             title=":)"
diff --git a/layouts/index.html b/layouts/index.html
index cdb1018..c69017d 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -38,21 +38,26 @@
             {{ $original := resources.Get .Params.cover }}
             {{ $originalPermalink := $original.Permalink }}
             {{ $cover := $original.Resize "x320 webp" }}
+            {{ $coverBackup := $original.Resize "x320 jpeg q69" }}
             {{ $cover2x := $original.Resize "x640 webp" }}
+            {{ $cover2xBackup := $original.Resize "x640 jpeg q69" }}
             {{ $placeholder := $cover.Resize "x1 png" }}
             <div class="catalog-item">
               <a class="catalog-item__content" href="{{ .Permalink }}">
                 <h2 class="catalog-item__album" style="view-transition-name: album_title_{{ .File.BaseFileName }};">{{ .Title }}</h2>
                 <div class="catalog-item__artist" style="view-transition-name: album_artist_{{ .File.BaseFileName }};">by {{ .Params.artist }}</div>
+                <picture class="catalog-item__visual">
+                  <source srcset="{{ $cover.Permalink }} 1x, {{ $cover2x.Permalink }} 2x" type="image/webp">
+                  <source srcset="{{ $coverBackup.Permalink }} 1x, {{ $cover2xBackup.Permalink }} 2x" type="image/jpeg">
                   <img
-                  class="catalog-item__visual"
+
                   width="320"
                   height="320"
                   style="
                     background-image: url(data:{{ $placeholder.MediaType }};base64,{{ $placeholder.Content | base64Encode }});
                     view-transition-name: album_cover_{{ .File.BaseFileName }};
                   "
-                  src="{{ $cover.Permalink }}"
+                  src="{{ $coverBackup.Permalink }}"
                   srcset="{{ $cover.Permalink }} 1x, {{ $cover2x.Permalink }} 2x"
                   {{ if ( gt $albumIndex 3) }}
                   loading="lazy"
@@ -61,6 +66,7 @@
                   alt="{{ .Title }} album's cover"
                   title="{{ .Title }} album's cover"
                   >
+                </picture>
               </a>
             </div>
           {{ end }}