[a] lossy optimized image previews for faster loading

This commit is contained in:
Sangelo 2024-06-21 09:10:48 +02:00
parent 63db3f5b6a
commit 6fc6fbaa45
62 changed files with 33 additions and 31 deletions

View file

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

View file

@ -9,65 +9,65 @@
</div> </div>
<div class="grid"> <div class="grid">
<div><img class="gallery-image" src="assets/images/gallery/pic1.png" alt="pic1"></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>
<div><img class="gallery-image" src="assets/images/gallery/pic2.png" alt="pic2"></div> <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>
<div><img class="gallery-image" src="assets/images/gallery/pic3.png" alt="pic3"></div> <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>
<div class="grid"> <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>
<div class="grid"> <div class="grid">
<div><img class="gallery-image" src="assets/images/gallery/pic4.png" alt="pic5"></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>
<div><img class="gallery-image" src="assets/images/gallery/pic5.png" alt="pic6"></div> <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>
<div><img class="gallery-image" src="assets/images/gallery/pic6.png" alt="pic7"></div> <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>
<div class="grid"> <div class="grid">
<div><img class="gallery-image" src="assets/images/gallery/pic7.png" alt="pic8"></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>
<div><img class="gallery-image" src="assets/images/gallery/pic8.png" alt="pic9"></div> <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>
<div class="grid"> <div class="grid">
<div><img class="gallery-image" src="assets/images/gallery/pic10.png" alt="pic10"></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>
<div><img class="gallery-image" src="assets/images/gallery/pic11.png" alt="pic11"></div> <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>
<div><img class="gallery-image" src="assets/images/gallery/pic12.png" alt="pic12"></div> <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>
<div class="grid"> <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>
<div class="grid"> <div class="grid">
<div><img class="gallery-image" src="assets/images/gallery/pic16.png" alt="pic16"></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>
<div><img class="gallery-image" src="assets/images/gallery/pic17.png" alt="pic17"></div> <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>
<div><img class="gallery-image" src="assets/images/gallery/pic18.png" alt="pic18"></div> <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>
<div class="grid"> <div class="grid">
<div><img class="gallery-image" src="assets/images/gallery/pic19.png" alt="pic19"></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>
<div><img class="gallery-image" src="assets/images/gallery/pic20.png" alt="pic20"></div> <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>
<div><img class="gallery-image" src="assets/images/gallery/pic21.png" alt="pic21"></div> <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>
<div class="grid"> <div class="grid">
<div><img class="gallery-image" src="assets/images/gallery/pic22.png" alt="pic22"></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>
<div><img class="gallery-image" src="assets/images/gallery/pic23.png" alt="pic23"></div> <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>
<div><img class="gallery-image" src="assets/images/gallery/pic24.png" alt="pic24"></div> <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>
<div class="grid"> <div class="grid">
<div><img class="gallery-image" src="assets/images/gallery/pic25.png" alt="pic25"></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>
<div><img class="gallery-image" src="assets/images/gallery/pic14.png" alt="pic14"></div> <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>
<div><img class="gallery-image" src="assets/images/gallery/pic26.png" alt="pic26"></div> <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>
<div class="grid"> <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>
<div class="grid"> <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>
<div class="grid"> <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> </div>
<style> <style>
img.gallery-image { img.gallery-image {

View file

Before

Width:  |  Height:  |  Size: 316 KiB

After

Width:  |  Height:  |  Size: 316 KiB

View file

Before

Width:  |  Height:  |  Size: 510 KiB

After

Width:  |  Height:  |  Size: 510 KiB

View file

Before

Width:  |  Height:  |  Size: 480 KiB

After

Width:  |  Height:  |  Size: 480 KiB

View file

Before

Width:  |  Height:  |  Size: 105 KiB

After

Width:  |  Height:  |  Size: 105 KiB

View file

Before

Width:  |  Height:  |  Size: 71 KiB

After

Width:  |  Height:  |  Size: 71 KiB

View file

Before

Width:  |  Height:  |  Size: 561 KiB

After

Width:  |  Height:  |  Size: 561 KiB

View file

Before

Width:  |  Height:  |  Size: 648 KiB

After

Width:  |  Height:  |  Size: 648 KiB

View file

Before

Width:  |  Height:  |  Size: 357 KiB

After

Width:  |  Height:  |  Size: 357 KiB

View file

Before

Width:  |  Height:  |  Size: 309 KiB

After

Width:  |  Height:  |  Size: 309 KiB

View file

Before

Width:  |  Height:  |  Size: 332 KiB

After

Width:  |  Height:  |  Size: 332 KiB

View file

Before

Width:  |  Height:  |  Size: 876 KiB

After

Width:  |  Height:  |  Size: 876 KiB

View file

Before

Width:  |  Height:  |  Size: 338 KiB

After

Width:  |  Height:  |  Size: 338 KiB

View file

Before

Width:  |  Height:  |  Size: 1.1 MiB

After

Width:  |  Height:  |  Size: 1.1 MiB

View file

Before

Width:  |  Height:  |  Size: 1.2 MiB

After

Width:  |  Height:  |  Size: 1.2 MiB

View file

Before

Width:  |  Height:  |  Size: 860 KiB

After

Width:  |  Height:  |  Size: 860 KiB

View file

Before

Width:  |  Height:  |  Size: 611 KiB

After

Width:  |  Height:  |  Size: 611 KiB

View file

Before

Width:  |  Height:  |  Size: 547 KiB

After

Width:  |  Height:  |  Size: 547 KiB

View file

Before

Width:  |  Height:  |  Size: 560 KiB

After

Width:  |  Height:  |  Size: 560 KiB

View file

Before

Width:  |  Height:  |  Size: 572 KiB

After

Width:  |  Height:  |  Size: 572 KiB

View file

Before

Width:  |  Height:  |  Size: 570 KiB

After

Width:  |  Height:  |  Size: 570 KiB

View file

Before

Width:  |  Height:  |  Size: 526 KiB

After

Width:  |  Height:  |  Size: 526 KiB

View file

Before

Width:  |  Height:  |  Size: 780 KiB

After

Width:  |  Height:  |  Size: 780 KiB

View file

Before

Width:  |  Height:  |  Size: 817 KiB

After

Width:  |  Height:  |  Size: 817 KiB

View file

Before

Width:  |  Height:  |  Size: 606 KiB

After

Width:  |  Height:  |  Size: 606 KiB

View file

Before

Width:  |  Height:  |  Size: 299 KiB

After

Width:  |  Height:  |  Size: 299 KiB

View file

Before

Width:  |  Height:  |  Size: 434 KiB

After

Width:  |  Height:  |  Size: 434 KiB

View file

Before

Width:  |  Height:  |  Size: 426 KiB

After

Width:  |  Height:  |  Size: 426 KiB

View file

Before

Width:  |  Height:  |  Size: 781 KiB

After

Width:  |  Height:  |  Size: 781 KiB

View file

Before

Width:  |  Height:  |  Size: 351 KiB

After

Width:  |  Height:  |  Size: 351 KiB

View file

Before

Width:  |  Height:  |  Size: 472 KiB

After

Width:  |  Height:  |  Size: 472 KiB

View file

Before

Width:  |  Height:  |  Size: 1.8 MiB

After

Width:  |  Height:  |  Size: 1.8 MiB

View file

Before

Width:  |  Height:  |  Size: 2.4 MiB

After

Width:  |  Height:  |  Size: 2.4 MiB

View file

Before

Width:  |  Height:  |  Size: 2.2 MiB

After

Width:  |  Height:  |  Size: 2.2 MiB

View file

Before

Width:  |  Height:  |  Size: 105 KiB

After

Width:  |  Height:  |  Size: 105 KiB

View file

Before

Width:  |  Height:  |  Size: 71 KiB

After

Width:  |  Height:  |  Size: 71 KiB

View file

Before

Width:  |  Height:  |  Size: 2.7 MiB

After

Width:  |  Height:  |  Size: 2.7 MiB

View file

Before

Width:  |  Height:  |  Size: 3.2 MiB

After

Width:  |  Height:  |  Size: 3.2 MiB

View file

Before

Width:  |  Height:  |  Size: 1.9 MiB

After

Width:  |  Height:  |  Size: 1.9 MiB

View file

Before

Width:  |  Height:  |  Size: 1.7 MiB

After

Width:  |  Height:  |  Size: 1.7 MiB

View file

Before

Width:  |  Height:  |  Size: 1.6 MiB

After

Width:  |  Height:  |  Size: 1.6 MiB

View file

Before

Width:  |  Height:  |  Size: 4.8 MiB

After

Width:  |  Height:  |  Size: 4.8 MiB

View file

Before

Width:  |  Height:  |  Size: 377 KiB

After

Width:  |  Height:  |  Size: 377 KiB

View file

Before

Width:  |  Height:  |  Size: 3.4 MiB

After

Width:  |  Height:  |  Size: 3.4 MiB

View file

Before

Width:  |  Height:  |  Size: 3.4 MiB

After

Width:  |  Height:  |  Size: 3.4 MiB

View file

Before

Width:  |  Height:  |  Size: 3 MiB

After

Width:  |  Height:  |  Size: 3 MiB

View file

Before

Width:  |  Height:  |  Size: 4.1 MiB

After

Width:  |  Height:  |  Size: 4.1 MiB

View file

Before

Width:  |  Height:  |  Size: 3.9 MiB

After

Width:  |  Height:  |  Size: 3.9 MiB

View file

Before

Width:  |  Height:  |  Size: 3.8 MiB

After

Width:  |  Height:  |  Size: 3.8 MiB

View file

Before

Width:  |  Height:  |  Size: 2.5 MiB

After

Width:  |  Height:  |  Size: 2.5 MiB

View file

Before

Width:  |  Height:  |  Size: 2.5 MiB

After

Width:  |  Height:  |  Size: 2.5 MiB

View file

Before

Width:  |  Height:  |  Size: 2.5 MiB

After

Width:  |  Height:  |  Size: 2.5 MiB

View file

Before

Width:  |  Height:  |  Size: 3 MiB

After

Width:  |  Height:  |  Size: 3 MiB

View file

Before

Width:  |  Height:  |  Size: 3.1 MiB

After

Width:  |  Height:  |  Size: 3.1 MiB

View file

Before

Width:  |  Height:  |  Size: 2.5 MiB

After

Width:  |  Height:  |  Size: 2.5 MiB

View file

Before

Width:  |  Height:  |  Size: 1 MiB

After

Width:  |  Height:  |  Size: 1 MiB

View file

Before

Width:  |  Height:  |  Size: 2.7 MiB

After

Width:  |  Height:  |  Size: 2.7 MiB

View file

Before

Width:  |  Height:  |  Size: 2.7 MiB

After

Width:  |  Height:  |  Size: 2.7 MiB

View file

Before

Width:  |  Height:  |  Size: 2.8 MiB

After

Width:  |  Height:  |  Size: 2.8 MiB

View file

Before

Width:  |  Height:  |  Size: 2.3 MiB

After

Width:  |  Height:  |  Size: 2.3 MiB

View file

Before

Width:  |  Height:  |  Size: 2.4 MiB

After

Width:  |  Height:  |  Size: 2.4 MiB