From 3c621eb7552df515b0aa12a35f2670c87bff318e Mon Sep 17 00:00:00 2001
From: Cyril Mottier <cyril@mottier.io>
Date: Mon, 3 Mar 2025 16:54:21 +0100
Subject: [PATCH] fix: align author image display size & actual size (#284)

* fix: align image display size & actual size

* fix: use appropriate size

* fix: deal with displays densities

Use <img /> secret attribute to better expose display density-compliant images. Being the only image really showed in the entire theme, it deserves polish.
---
 layouts/partials/bio.html | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/layouts/partials/bio.html b/layouts/partials/bio.html
index a2b9c489..025cac37 100644
--- a/layouts/partials/bio.html
+++ b/layouts/partials/bio.html
@@ -8,9 +8,16 @@
         <image width="25em" height="25em" href="{{ $image.RelPermalink }}" />
     </svg>
     {{ else }}
-    {{ $image := $image.Fill "100x100 webp" }}
-    <img class="author-avatar" src="{{ $image.RelPermalink }}" alt="{{ $avatar_img_alt }}" width="{{ .Width }}"
-        height="{{ .Height }}" />
+    {{ $image1x := $image.Fill "70x70 webp" }}
+    {{ $image2x := $image.Fill "140x140 webp" }}
+    {{ $image3x := $image.Fill "210x210 webp" }}
+    <img 
+        class="author-avatar"
+        src="{{ $image1x.RelPermalink }}"
+        srcset="{{ $image2x.RelPermalink }} 2x, {{ $image3x.RelPermalink }} 3x"
+        alt="{{ $avatar_img_alt }}"
+        width="{{ $image1x.Width }}"
+        height="{{ $image1x.Height }}" />
     {{ end }}
     {{ end }}
     <h2 class="author-name">{{ .Site.Params.author.intro }}</h2>