Add multiple sizes and formats to portrait picture.

PGijsbers · Aug 30, 2023 · 1109ada · 1109ada
1 parent 273f60a
commit 1109ada
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 1 deletion.
diff --git a/2023/about.html b/2023/about.html
@@ -20,7 +20,21 @@
 </nav>
 <main>
     <h1>Pieter Gijsbers</h1>
-    <img src="img/portrait-q15.jpg" class="portrait-picture" alt="Portait picture of Pieter Gijsbers">
+    <picture>
+        <source
+                type="image/avif"
+                srcset="img/portrait/portrait-400.avif 400w,
+                        img/portrait/portrait-600.avif 600w"
+                sizes="200px"
+        />
+        <source
+                type="image/jpg"
+                srcset="img/portrait/portrait-400.jpg 400w,
+                        img/portrait/portrait-600.jpg 600w,"
+                sizes="200px"
+        />
+        <img src="img/portrait/portrait-q15.jpg" class="portrait-picture" alt="Portrait picture of Pieter Gijsbers">
+    </picture>
     <p>
         Hi! I am a research engineer at Eindhoven University of Technology
         (TU/e) in <a href="https://joaquinvanschoren.github.io/home/">Joaquin

diff --git a/2023/img/portrait/portrait-400.avif b/2023/img/portrait/portrait-400.avif
diff --git a/2023/img/portrait/portrait-400.jpg b/2023/img/portrait/portrait-400.jpg
diff --git a/2023/img/portrait/portrait-600.avif b/2023/img/portrait/portrait-600.avif
diff --git a/2023/img/portrait/portrait-600.jpg b/2023/img/portrait/portrait-600.jpg
diff --git a/2023/img/portrait-q15.jpg → 2023/img/portrait/portrait-q15.jpg b/2023/img/portrait-q15.jpg → 2023/img/portrait/portrait-q15.jpg