index: Replace header image with WebP version

bmndc · Apr 22, 2024 · e14e1f6 · e14e1f6
1 parent 402547c
commit e14e1f6
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 2 deletions.
diff --git a/assets/css/main.scss b/assets/css/main.scss
@@ -8,7 +8,9 @@
 	display: flow-root;
 }
 
-#toc > .header {
+#toc > .header img {
+	max-width: 400px;
+	max-height: 100%;
 	aspect-ratio: 1;
 	// Undo float: right on header image on small screens
 	@media (max-width: 800px) {

diff --git a/assets/img/0.webp b/assets/img/0.webp
diff --git a/assets/img/leo-emotionalRange-600px.png b/assets/img/leo-emotionalRange-600px.png
diff --git a/index.md b/index.md
@@ -43,7 +43,10 @@
 *Source code [provided by HMD] for B2G, Linux 4.9 kernel and certain LGPL-2.1 licensed libraries used on the 6300 4G can be found in [`leo-v20` branch of this repository]. Note that it doesn't contain proprietary code from third parties and thus cannot be used to compile a fully working KaiOS firmware.*
 
 <div id="toc">
-	<img class="header" align="right" width="400" height="100%" src="assets/img/leo-emotionalRange-600px.png" alt="Nokia 6300 4G in three colours stacking on top of each other" fetchpriority="high">
+	<picture class="header">
+		<source srcset="assets/img/0.webp" type="image/webp">
+		<img align="right" src="assets/img/nokia_6300_4G-emotional-Range.png" alt="Nokia 6300 4G in three colours stacking on top of each other" fetchpriority="high">
+	</picture>
 	<p><strong>Table of Contents</strong></p>
 	<ul><li><a href="#dont-buy-a-counterfeit">Don't buy a counterfeit</a>
 	<ul><li><a href="#about-kosher-phones">About Kosher phones</a></li></ul></li>