[a] lossy optimized image previews for faster loading

src/routes/+page.svelte

@@ -1,6 +1,8 @@
 <script>
   import { onMount } from "svelte";
 
+  let modpack = "marbled"
+
   function rand(min, max) {
     return Math.floor(Math.random() * (max - min + 1) + min);
   }
@@ -8,7 +10,7 @@
   onMount(() => {
     document.getElementById("banner").src = document
       .getElementById("banner")
-      .src.replace("pic0", `pic${rand(1, 30)}`);
+      .src.replace("pic0", `${modpack}/pic${rand(1, 30)}`);
     console.log(document.getElementById("banner").src);
   });
 </script>

src/routes/gallery/+page.svelte

@@ -9,65 +9,65 @@
 </div>
 
 <div class="grid">
-	<div><img class="gallery-image" src="assets/images/gallery/pic1.png" alt="pic1"></div>
-	<div><img class="gallery-image" src="assets/images/gallery/pic2.png" alt="pic2"></div>
-	<div><img class="gallery-image" src="assets/images/gallery/pic3.png" alt="pic3"></div>
+	<a href="assets/images/gallery/marbled/pic1.png" target="_blank" rel="noreferrer noopener"><img class="gallery-image" src="assets/images/gallery/marbled/optimized/pic1.png" alt="pic1"></a>
+	<a href="assets/images/gallery/marbled/pic2.png" target="_blank" rel="noreferrer noopener"><img class="gallery-image" src="assets/images/gallery/marbled/optimized/pic2.png" alt="pic2"></a>
+	<a href="assets/images/gallery/marbled/pic3.png" target="_blank" rel="noreferrer noopener"><img class="gallery-image" src="assets/images/gallery/marbled/optimized/pic3.png" alt="pic3"></a>
 </div>
 <div class="grid">
-	<div><img class="gallery-image" src="assets/images/gallery/pic9.png" alt="pic4"></div>
+	<a href="assets/images/gallery/marbled/pic9.png" target="_blank" rel="noreferrer noopener"><img class="gallery-image" src="assets/images/gallery/marbled/optimized/pic9.png" alt="pic4"></a>
 </div>
 <div class="grid">
-	<div><img class="gallery-image" src="assets/images/gallery/pic4.png" alt="pic5"></div>
-	<div><img class="gallery-image" src="assets/images/gallery/pic5.png" alt="pic6"></div>
-	<div><img class="gallery-image" src="assets/images/gallery/pic6.png" alt="pic7"></div>
+	<a href="assets/images/gallery/marbled/pic4.png" target="_blank" rel="noreferrer noopener"><img class="gallery-image" src="assets/images/gallery/marbled/optimized/pic4.png" alt="pic5"></a>
+	<a href="assets/images/gallery/marbled/pic5.png" target="_blank" rel="noreferrer noopener"><img class="gallery-image" src="assets/images/gallery/marbled/optimized/pic5.png" alt="pic6"></a>
+	<a href="assets/images/gallery/marbled/pic6.png" target="_blank" rel="noreferrer noopener"><img class="gallery-image" src="assets/images/gallery/marbled/optimized/pic6.png" alt="pic7"></a>
 </div>
 <div class="grid">
-	<div><img class="gallery-image" src="assets/images/gallery/pic7.png" alt="pic8"></div>
-	<div><img class="gallery-image" src="assets/images/gallery/pic8.png" alt="pic9"></div>
+	<a href="assets/images/gallery/marbled/pic7.png" target="_blank" rel="noreferrer noopener"><img class="gallery-image" src="assets/images/gallery/marbled/optimized/pic7.png" alt="pic8"></a>
+	<a href="assets/images/gallery/marbled/pic8.png" target="_blank" rel="noreferrer noopener"><img class="gallery-image" src="assets/images/gallery/marbled/optimized/pic8.png" alt="pic9"></a>
 </div>
 <div class="grid">
-	<div><img class="gallery-image" src="assets/images/gallery/pic10.png" alt="pic10"></div>
-	<div><img class="gallery-image" src="assets/images/gallery/pic11.png" alt="pic11"></div>
-	<div><img class="gallery-image" src="assets/images/gallery/pic12.png" alt="pic12"></div>
+	<a href="assets/images/gallery/marbled/pic10.png" target="_blank" rel="noreferrer noopener"><img class="gallery-image" src="assets/images/gallery/marbled/optimized/pic10.png" alt="pic10"></a>
+	<a href="assets/images/gallery/marbled/pic11.png" target="_blank" rel="noreferrer noopener"><img class="gallery-image" src="assets/images/gallery/marbled/optimized/pic11.png" alt="pic11"></a>
+	<a href="assets/images/gallery/marbled/pic12.png" target="_blank" rel="noreferrer noopener"><img class="gallery-image" src="assets/images/gallery/marbled/optimized/pic12.png" alt="pic12"></a>
 </div>
 <div class="grid">
-	<div><img class="gallery-image" src="assets/images/gallery/pic13.png" alt="pic13"></div>
+	<a href="assets/images/gallery/marbled/pic13.png" target="_blank" rel="noreferrer noopener"><img class="gallery-image" src="assets/images/gallery/marbled/optimized/pic13.png" alt="pic13"></a>
 
-	<div><img class="gallery-image" src="assets/images/gallery/pic15.png" alt="pic15"></div>
+	<a href="assets/images/gallery/marbled/pic15.png" target="_blank" rel="noreferrer noopener"><img class="gallery-image" src="assets/images/gallery/marbled/optimized/pic15.png" alt="pic15"></a>
 </div>
 <div class="grid">
-	<div><img class="gallery-image" src="assets/images/gallery/pic16.png" alt="pic16"></div>
-	<div><img class="gallery-image" src="assets/images/gallery/pic17.png" alt="pic17"></div>
-	<div><img class="gallery-image" src="assets/images/gallery/pic18.png" alt="pic18"></div>
+	<a href="assets/images/gallery/marbled/pic16.png" target="_blank" rel="noreferrer noopener"><img class="gallery-image" src="assets/images/gallery/marbled/optimized/pic16.png" alt="pic16"></a>
+	<a href="assets/images/gallery/marbled/pic17.png" target="_blank" rel="noreferrer noopener"><img class="gallery-image" src="assets/images/gallery/marbled/optimized/pic17.png" alt="pic17"></a>
+	<a href="assets/images/gallery/marbled/pic18.png" target="_blank" rel="noreferrer noopener"><img class="gallery-image" src="assets/images/gallery/marbled/optimized/pic18.png" alt="pic18"></a>
 </div>
 
 <div class="grid">
-	<div><img class="gallery-image" src="assets/images/gallery/pic19.png" alt="pic19"></div>
-	<div><img class="gallery-image" src="assets/images/gallery/pic20.png" alt="pic20"></div>
-	<div><img class="gallery-image" src="assets/images/gallery/pic21.png" alt="pic21"></div>
+	<a href="assets/images/gallery/marbled/pic19.png" target="_blank" rel="noreferrer noopener"><img class="gallery-image" src="assets/images/gallery/marbled/optimized/pic19.png" alt="pic19"></a>
+	<a href="assets/images/gallery/marbled/pic20.png" target="_blank" rel="noreferrer noopener"><img class="gallery-image" src="assets/images/gallery/marbled/optimized/pic20.png" alt="pic20"></a>
+	<a href="assets/images/gallery/marbled/pic21.png" target="_blank" rel="noreferrer noopener"><img class="gallery-image" src="assets/images/gallery/marbled/optimized/pic21.png" alt="pic21"></a>
 </div>
 <div class="grid">
-	<div><img class="gallery-image" src="assets/images/gallery/pic22.png" alt="pic22"></div>
-	<div><img class="gallery-image" src="assets/images/gallery/pic23.png" alt="pic23"></div>
-	<div><img class="gallery-image" src="assets/images/gallery/pic24.png" alt="pic24"></div>
+	<a href="assets/images/gallery/marbled/pic22.png" target="_blank" rel="noreferrer noopener"><img class="gallery-image" src="assets/images/gallery/marbled/optimized/pic22.png" alt="pic22"></a>
+	<a href="assets/images/gallery/marbled/pic23.png" target="_blank" rel="noreferrer noopener"><img class="gallery-image" src="assets/images/gallery/marbled/optimized/pic23.png" alt="pic23"></a>
+	<a href="assets/images/gallery/marbled/pic24.png" target="_blank" rel="noreferrer noopener"><img class="gallery-image" src="assets/images/gallery/marbled/optimized/pic24.png" alt="pic24"></a>
 </div>
 
 <div class="grid">
-	<div><img class="gallery-image" src="assets/images/gallery/pic25.png" alt="pic25"></div>
-	<div><img class="gallery-image" src="assets/images/gallery/pic14.png" alt="pic14"></div>
-	<div><img class="gallery-image" src="assets/images/gallery/pic26.png" alt="pic26"></div>
+	<a href="assets/images/gallery/marbled/pic25.png" target="_blank" rel="noreferrer noopener"><img class="gallery-image" src="assets/images/gallery/marbled/optimized/pic25.png" alt="pic25"></a>
+	<a href="assets/images/gallery/marbled/pic14.png" target="_blank" rel="noreferrer noopener"><img class="gallery-image" src="assets/images/gallery/marbled/optimized/pic14.png" alt="pic14"></a>
+	<a href="assets/images/gallery/marbled/pic26.png" target="_blank" rel="noreferrer noopener"><img class="gallery-image" src="assets/images/gallery/marbled/optimized/pic26.png" alt="pic26"></a>
 </div>
 
 <div class="grid">
-<div><img class="gallery-image" src="assets/images/gallery/pic27.png" alt="pic27"></div>
+<a href="assets/images/gallery/marbled/pic27.png" target="_blank" rel="noreferrer noopener"><img class="gallery-image" src="assets/images/gallery/marbled/optimized/pic27.png" alt="pic27"></a>
 </div>
 <div class="grid">
-	<div><img class="gallery-image" src="assets/images/gallery/pic28.png" alt="pic28"></div>
+	<a href="assets/images/gallery/marbled/pic28.png" target="_blank" rel="noreferrer noopener"><img class="gallery-image" src="assets/images/gallery/marbled/optimized/pic28.png" alt="pic28"></a>
 
-	<div><img class="gallery-image" src="assets/images/gallery/pic29.png" alt="pic29"></div>
+	<a href="assets/images/gallery/marbled/pic29.png" target="_blank" rel="noreferrer noopener"><img class="gallery-image" src="assets/images/gallery/marbled/optimized/pic29.png" alt="pic29"></a>
 </div>
 <div class="grid">
-<div><img class="gallery-image" src="assets/images/gallery/pic30.png" alt="pic30"></div>
+	<a href="assets/images/gallery/marbled/pic30.png" target="_blank" rel="noreferrer noopener"><img class="gallery-image" src="assets/images/gallery/marbled/optimized/pic30.png" alt="pic30"></a>
 </div>
 <style>
 	img.gallery-image {