perf(images): lazy-load and async-decode off-screen imagery

Add loading=lazy and decoding=async to the 16 <img> elements that
weren't already deferring across Tools/Wrapped, Events, EasterEvent,
Hololive, and the rate-limited fallback. Also drop the
backdrop-filter: blur(160px) the dropdown items were paying on every
hover; the background-color change already gives sufficient feedback,
and the parent card's own blur stays.

10 files changed, 25 insertions, 8 deletions

diff --git a/src/lib/Error/AnimeRateLimited.svelte b/src/lib/Error/AnimeRateLimited.svelte
index b3eb1ccb..70509a0c 100644
--- a/src/lib/Error/AnimeRateLimited.svelte
+++ b/src/lib/Error/AnimeRateLimited.svelte
@@ -13,7 +13,7 @@ import Popup from "$lib/Layout/Popup.svelte";
       <Spacer />
 
       <a href={`https://trace.moe/?url=${encodeURIComponent(json.url)}`} target="_blank">
-        <img src={json.url} alt="" style="width: 30vw;" />
+        <img src={json.url} alt="" loading="lazy" decoding="async" style="width: 30vw;" />
       </a>
     {/await}
   {/await}
diff --git a/src/lib/Events/AniListBadges/EasterEvent2025/ClickableAreaPage.svelte b/src/lib/Events/AniListBadges/EasterEvent2025/ClickableAreaPage.svelte
index 8faf0ba3..f606f366 100644
--- a/src/lib/Events/AniListBadges/EasterEvent2025/ClickableAreaPage.svelte
+++ b/src/lib/Events/AniListBadges/EasterEvent2025/ClickableAreaPage.svelte
@@ -21,6 +21,8 @@ const handleClick = (index: number) => {
       <img
         src={url}
         alt="Option {i + 1}"
+        loading="lazy"
+        decoding="async"
         style={selectedIndex === i
           ? i === correctIndex
             ? 'border: 3px solid var(--base0B)'
diff --git a/src/lib/Events/AniListBadges/EasterEvent2025/EasterEgg.svelte b/src/lib/Events/AniListBadges/EasterEvent2025/EasterEgg.svelte
index d717f5d0..bd77ab4c 100644
--- a/src/lib/Events/AniListBadges/EasterEvent2025/EasterEgg.svelte
+++ b/src/lib/Events/AniListBadges/EasterEvent2025/EasterEgg.svelte
@@ -107,6 +107,8 @@ const onLeavePopup = () => {
     id="egg-visual-{targetID}-{id}"
     src="https://images.vexels.com/media/users/3/162149/isolated/preview/7f9f0546b21308e4851956e9c15313c9-egg-easter-painted-easter-egg-easter-egg-spot-pattern-stripe-flat.png"
     alt="Easter Egg"
+    loading="lazy"
+    decoding="async"
     class="egg"
   />
 
@@ -133,6 +135,8 @@ const onLeavePopup = () => {
           <img
             src="https://files.anilist-badges.com/badges/events/2025/04/20-Easter-2025-Epexity-event-banner-1.png"
             alt="Banner"
+            loading="lazy"
+            decoding="async"
           />
         </a>
       </div>
@@ -156,6 +160,8 @@ const onLeavePopup = () => {
           <img
             src="https://files.anilist-badges.com/badges/events/2025/04/20-Easter-2025-Basurahan-1.png"
             alt="Badge 1"
+            loading="lazy"
+            decoding="async"
           />
         </a>
 
@@ -169,6 +175,8 @@ const onLeavePopup = () => {
           <img
             src="https://files.anilist-badges.com/badges/events/2025/04/20-Easter-2025-Dxvxdffm-1.png"
             alt="Badge 2"
+            loading="lazy"
+            decoding="async"
           />
         </a>
       </div>
diff --git a/src/lib/Events/Event.svelte b/src/lib/Events/Event.svelte
index f8d0efbc..a1d6cf42 100644
--- a/src/lib/Events/Event.svelte
+++ b/src/lib/Events/Event.svelte
@@ -12,14 +12,14 @@ let { event, avatar = false }: { event: Event; avatar?: boolean } = $props();
   style={`background-image: ${event.banner ? `url(${event.banner})` : 'none'}; padding: 0;`}
 >
   {#if event}
-    <img src={event.banner} alt="" id="cover-image" />
+    <img src={event.banner} alt="" loading="lazy" decoding="async" id="cover-image" />
   {/if}
 
   <div class="card" id="user-grid-content">
     {#if avatar}
       <div id="user-grid-avatar">
         <a href={root(`/events/group/${event.group.anilist_username}`)}>
-          <img src={event.group.avatar} alt="" width="100vw" id="avatar" />
+          <img src={event.group.avatar} alt="" loading="lazy" decoding="async" width="100vw" id="avatar" />
         </a>
       </div>
     {/if}
diff --git a/src/lib/Events/Group.svelte b/src/lib/Events/Group.svelte
index 02cd53ac..9b0ddba5 100644
--- a/src/lib/Events/Group.svelte
+++ b/src/lib/Events/Group.svelte
@@ -11,13 +11,13 @@ let { group }: { group: Group } = $props();
   style={`background-image: ${group.banner ? `url(${group.banner})` : 'none'}; padding: 0;`}
 >
   {#if group}
-    <img src={group.banner} alt="" id="cover-image" />
+    <img src={group.banner} alt="" loading="lazy" decoding="async" id="cover-image" />
   {/if}
 
   <div class="card" id="user-grid-content">
     <div id="user-grid-avatar">
       <a href={`https://anilist.co/user/${group.anilist_username}`} target="_blank">
-        <img src={group.avatar} alt="" width="100vw" id="avatar" />
+        <img src={group.avatar} alt="" loading="lazy" decoding="async" width="100vw" id="avatar" />
       </a>
     </div>
 
diff --git a/src/lib/Hololive/Stream.svelte b/src/lib/Hololive/Stream.svelte
index 7ad681fd..d8122f50 100644
--- a/src/lib/Hololive/Stream.svelte
+++ b/src/lib/Hololive/Stream.svelte
@@ -39,7 +39,7 @@ export let icon: string;
     <span class="opaque">|</span>
     {#if icon}
       <a href={root(`/hololive/${encodeURIComponent(live.streamer)}`)}>
-        <img src={icon} alt="Avatar" class="stream-icon" />
+        <img src={icon} alt="Avatar" loading="lazy" decoding="async" class="stream-icon" />
       </a>
     {/if}
     <a href={root(`/hololive/${encodeURIComponent(live.streamer)}`)} class="streamer-link">
diff --git a/src/lib/Layout/Dropdown.svelte b/src/lib/Layout/Dropdown.svelte
index 4e2f8617..105b29f3 100644
--- a/src/lib/Layout/Dropdown.svelte
+++ b/src/lib/Layout/Dropdown.svelte
@@ -206,7 +206,6 @@ const handleItemKey = async (e: KeyboardEvent, index: number) => {
 
   .dropdown-content a:hover {
     border-radius: 8px;
-    backdrop-filter: blur(160px);
     background-color: var(--base01);
   }
 </style>
diff --git a/src/lib/Tools/Wrapped/Media.svelte b/src/lib/Tools/Wrapped/Media.svelte
index f7dd3007..674f5f90 100644
--- a/src/lib/Tools/Wrapped/Media.svelte
+++ b/src/lib/Tools/Wrapped/Media.svelte
@@ -28,6 +28,8 @@ export let mangaMostTitle: string;
             )}
             alt="Highest Rated Anime Cover"
             class="cover-image"
+            loading="lazy"
+            decoding="async"
             onload={updateWidth}
           />
         </a>
@@ -67,6 +69,8 @@ export let mangaMostTitle: string;
             )}
             alt="Highest Rated Manga Cover"
             class="cover-image"
+            loading="lazy"
+            decoding="async"
             onload={updateWidth}
           />
         </a>
diff --git a/src/lib/Tools/Wrapped/MediaExtras.svelte b/src/lib/Tools/Wrapped/MediaExtras.svelte
index 6eefcbe9..9097fa90 100644
--- a/src/lib/Tools/Wrapped/MediaExtras.svelte
+++ b/src/lib/Tools/Wrapped/MediaExtras.svelte
@@ -22,6 +22,8 @@ export let genreTagTitle: string;
             src={proxy(topMedia.topGenreMedia.coverImage.extraLarge)}
             alt="Highest Rated Genre Cover"
             class="cover-image"
+            loading="lazy"
+            decoding="async"
             onload={updateWidth}
           />
         </a>
@@ -53,6 +55,8 @@ export let genreTagTitle: string;
             src={proxy(topMedia.topTagMedia.coverImage.extraLarge)}
             alt="Highest Rated Tag Cover"
             class="cover-image"
+            loading="lazy"
+            decoding="async"
             onload={updateWidth}
           />
         </a>
diff --git a/src/lib/Tools/Wrapped/Top/Activity.svelte b/src/lib/Tools/Wrapped/Top/Activity.svelte
index ce0b1b00..15b646e0 100644
--- a/src/lib/Tools/Wrapped/Top/Activity.svelte
+++ b/src/lib/Tools/Wrapped/Top/Activity.svelte
@@ -15,7 +15,7 @@ const currentYear = new Date(Date.now()).getFullYear();
 
 <div class="grid-item image-grid avatar-grid category top-category">
   <a href={`https://anilist.co/user/${$identity.name}`} target="_blank">
-    <img src={proxy(wrapped.avatar.large)} alt="User Avatar" onload={updateWidth} />
+    <img src={proxy(wrapped.avatar.large)} alt="User Avatar" loading="lazy" decoding="async" onload={updateWidth} />
   </a>
   <div>
     <div>