Added JPEG-xl support, with size alternatives for picture

src/static/css/index.css

@@ -7,7 +7,7 @@
 }
 
 .biglinks > a,
-.biglinks > img {
+.biglinks > picture {
 	max-width: calc(100% - 24px);
 }
 
@@ -22,8 +22,13 @@
 	display: block;
 }
 
-.biglinks > img {
+.biglinks > picture {
+	display: inline-block;
 	height: 156px;
 	margin: 12px;
+}
+.biglinks > picture > img {
+	height: 100%;
+	width: 100%;
 	object-fit: cover;
 }

src/views/template/index.html

@@ -27,7 +27,16 @@
 				<img class="svg" src="/static/picto/summit.svg" alt="" />
 				Komoot
 			</a>
-			<img src="/static/pic/pic1.webp" alt="Paysage" />
+			<picture>
+				<source type="image/jxl"
+					srcset="/static/pic/pic.jxl,
+						/static/pic/picx2.jxl 2x,
+						/static/pic/picx4.jxl 4x" />
+				<img alt="Paysage"
+				 	src="/static/pic/pic.webp"
+					srcset="/static/pic/picx2.webp 2x,
+						/static/pic/picx4.webp 4x" />
+			</picture>
 		</div>
 		<nav>
 			<a href="#">