From 1872b26efe3383d95000df0b956f92e7c3043538 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Mon, 2 Feb 2026 23:35:15 -0800
Subject: perf(images): Optimise cover images for LCP and CLS

---
 src/lib/Image/ParallaxImage.svelte | 9 +++++++++
 src/lib/List/CleanGrid.svelte      | 7 ++++++-
 src/lib/List/covers.css            | 7 ++++++-
 3 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/lib/Image/ParallaxImage.svelte b/src/lib/Image/ParallaxImage.svelte
index 49588207..eb0383ef 100644
--- a/src/lib/Image/ParallaxImage.svelte
+++ b/src/lib/Image/ParallaxImage.svelte
@@ -11,6 +11,10 @@
   export let factor = 1.25;
   export let limit = 300 * 1.75;
   export let borderRadius = '8px';
+  export let loading: 'lazy' | 'eager' = 'lazy';
+  export let fetchpriority: 'high' | 'low' | 'auto' | undefined = undefined;
+  export let width: number | undefined = undefined;
+  export let height: number | undefined = undefined;
 
   let badgeReference: HTMLImageElement;
   const mouse = tweened({ x: 0, y: 0 }, { duration, easing });
@@ -43,4 +47,9 @@
   onmousemove={handleMouseMove}
   onmouseleave={handleMouseLeave}
   class={classList}
+  {loading}
+  {fetchpriority}
+  decoding="async"
+  {width}
+  {height}
 />
diff --git a/src/lib/List/CleanGrid.svelte b/src/lib/List/CleanGrid.svelte
index ed4a9733..1e6f5a12 100644
--- a/src/lib/List/CleanGrid.svelte
+++ b/src/lib/List/CleanGrid.svelte
@@ -25,8 +25,9 @@
   class="covers"
   style={`grid-template-columns: repeat(auto-fill, minmax(${$settings.displayCoverWidth}px, 1fr))`}
 >
-  {#each processedMedia as title}
+  {#each processedMedia as title, index}
     {@const progress = (title.mediaListEntry || { progress: 0 }).progress}
+    {@const isAboveFold = index < 6}
 
     {#if type === 'anime' ? upcoming || notYetReleased || progress !== (title.nextAiringEpisode?.episode || 9999) - 1 : progress != title.episodes}
       <div class="cover-card" id={`${type}-${title.id}-${uniqueID}`}>
@@ -59,6 +60,10 @@
                   classList={`cover${
                     title.isAdult && $settings.displayBlurAdultContent ? ' adult' : ''
                   }`}
+                  loading={isAboveFold ? 'eager' : 'lazy'}
+                  fetchpriority={isAboveFold ? 'high' : undefined}
+                  width={$settings.displayDataSaver ? 230 : 460}
+                  height={$settings.displayDataSaver ? 325 : 650}
                 />
               </span>
             </a>
diff --git a/src/lib/List/covers.css b/src/lib/List/covers.css
index c83b984e..0993a5c8 100644
--- a/src/lib/List/covers.css
+++ b/src/lib/List/covers.css
@@ -9,6 +9,10 @@
   background-size: cover;
   background-position: center;
   border-radius: 8px;
+  aspect-ratio: 46 / 65;
+  width: 100%;
+  height: auto;
+  object-fit: cover;
 }
 
 .cover-title {
@@ -58,11 +62,12 @@
 }
 
 .cover-container {
-  /* overflow: hidden; */
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 8px;
+  aspect-ratio: 46 / 65;
+  overflow: hidden;
 }
 
 button {
-- 
cgit v1.2.3