From 9a9870f44913e286923831d113a55bee5c152f69 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Mon, 2 Feb 2026 23:49:06 -0800
Subject: perf: Optimise LCP with image loading and animation fixes

---
 src/lib/Tools/Birthdays.svelte          | 10 +++++++++-
 src/lib/Tools/BirthdaysTemplate.svelte  | 10 +++++++++-
 src/lib/Tools/UmaMusumeBirthdays.svelte | 10 +++++++++-
 3 files changed, 27 insertions(+), 3 deletions(-)

(limited to 'src/lib/Tools')

diff --git a/src/lib/Tools/Birthdays.svelte b/src/lib/Tools/Birthdays.svelte
index 122662d4..f4a4e9c5 100644
--- a/src/lib/Tools/Birthdays.svelte
+++ b/src/lib/Tools/Birthdays.svelte
@@ -135,7 +135,13 @@
             data-tooltip-disable={birthday.origin === undefined}
           >
             {birthday.name}
-            <img src={birthday.image} alt="Character (Large)" class="character-image" />
+            <img
+              src={birthday.image}
+              alt="Character (Large)"
+              class="character-image"
+              loading="lazy"
+              decoding="async"
+            />
           </a>
         </div>
       {/each}
@@ -158,7 +164,9 @@
     img {
       width: 100%;
       height: auto;
+      aspect-ratio: 300 / 413;
       object-fit: cover;
+      object-position: top;
       border-radius: 8px;
       margin-top: 0.5rem;
       box-shadow: 0 4px 30px var(--base01);
diff --git a/src/lib/Tools/BirthdaysTemplate.svelte b/src/lib/Tools/BirthdaysTemplate.svelte
index daf4c5af..5f476275 100644
--- a/src/lib/Tools/BirthdaysTemplate.svelte
+++ b/src/lib/Tools/BirthdaysTemplate.svelte
@@ -82,7 +82,13 @@
               target="_blank"
             >
               {birthday.name}
-              <img src={birthday.pictureURL} alt="Character" class="character-image" />
+              <img
+                src={birthday.pictureURL}
+                alt="Character"
+                class="character-image"
+                loading="lazy"
+                decoding="async"
+              />
             </a>
           </div>
         {/each}
@@ -106,7 +112,9 @@
     img {
       width: 100%;
       height: auto;
+      aspect-ratio: 300 / 413;
       object-fit: cover;
+      object-position: top;
       border-radius: 8px;
       margin-top: 0.5rem;
       box-shadow: 0 4px 30px var(--base01);
diff --git a/src/lib/Tools/UmaMusumeBirthdays.svelte b/src/lib/Tools/UmaMusumeBirthdays.svelte
index 29b1faa6..8ee6697b 100644
--- a/src/lib/Tools/UmaMusumeBirthdays.svelte
+++ b/src/lib/Tools/UmaMusumeBirthdays.svelte
@@ -99,7 +99,13 @@
               use:tooltip
             >
               {name}
-              <img src={birthday.sns_icon} alt="Character" class="character-image" />
+              <img
+                src={birthday.sns_icon}
+                alt="Character"
+                class="character-image"
+                loading="lazy"
+                decoding="async"
+              />
             </a>
           </div>
         {/each}
@@ -125,7 +131,9 @@
     img {
       width: 100%;
       height: auto;
+      aspect-ratio: 300 / 413;
       object-fit: cover;
+      object-position: top;
       border-radius: 8px;
       margin-top: 0.5rem;
       box-shadow: 0 4px 30px var(--base01);
-- 
cgit v1.2.3