From b604c4d1b2785cd8ab4fbb57c94693e3a1364b78 Mon Sep 17 00:00:00 2001
From: Tixie <admin@glitch.family>
Date: Thu, 5 Dec 2019 00:06:47 +0100
Subject: [PATCH] opti(album page): Improve responsive images

---
 config.toml                  | 3 +++
 layouts/_default/single.html | 9 ++++++---
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/config.toml b/config.toml
index e5907a8..4832b20 100644
--- a/config.toml
+++ b/config.toml
@@ -4,3 +4,6 @@ title = "Now Playing"
 mainSections = ["musics"]
 paginate = 16
 disableKinds = ["taxonomy", "taxonomyTerm"]
+
+[imaging]
+quality = 95
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 6eef4cb..0b95e34 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -27,23 +27,26 @@
   <div class="album">
     <div class="container">
       <div class="album-layout">
-        <div class="album-cover">
+        <picture class="album-cover">
           {{ $original := resources.Get .Params.cover }}
           {{ $coverSmall := $original.Resize "x250" }}
           {{ $coverMedium := $original.Resize "x500" }}
           {{ $coverBig := $original.Resize "x1000" }}
           {{ $placeholder := $original.Resize "x1" }}
+          <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)">
           <img
             class="album-cover__visual"
             width="500"
             height="500"
             style="background-image: url(data:{{ $placeholder.MediaType }};base64,{{ $placeholder.Content | base64Encode }});"
             src="{{ $coverMedium.Permalink }}"
-            srcset="{{ $coverSmall.Permalink }} 250w, {{ $coverMedium.Permalink }} 500w, {{ $coverBig.Permalink }} 1000w"
             alt="{{ .Title }} album's cover"
             title=":)"
           >
-        </div>
+        </picture>
         <div class="album-infos">
           <h1 class="album-name">{{ .Title }}</h1>
           <strong class="album-artist">by {{ .Params.artist }}</strong>