From 6b686fb7f4c583753aa7af9a80e9247bcb94ff7d Mon Sep 17 00:00:00 2001
From: Matt Isenhower <matt@isenhower.com>
Date: Sat, 21 Feb 2026 16:08:18 -0800
Subject: [PATCH] Add lazy loading to splatfest images to reduce concurrent
 requests

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/SplatfestBox.vue        | 2 +-
 src/components/SplatfestMultiBox.vue   | 2 +-
 src/components/SplatfestResultsBox.vue | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/SplatfestBox.vue b/src/components/SplatfestBox.vue
index ef22175..549e59d 100644
--- a/src/components/SplatfestBox.vue
+++ b/src/components/SplatfestBox.vue
@@ -13,7 +13,7 @@
       </div>
 
       <div>
-        <img :src="props.festival.image.url" />
+        <img :src="props.festival.image.url" loading="lazy" />
 
         <div class="flex -mt-3 mb-4">
           <template v-for="(team, i) in festival.teams" :key="team.id">
diff --git a/src/components/SplatfestMultiBox.vue b/src/components/SplatfestMultiBox.vue
index 4971a25..d294c33 100644
--- a/src/components/SplatfestMultiBox.vue
+++ b/src/components/SplatfestMultiBox.vue
@@ -12,7 +12,7 @@
         </div>
 
         <div>
-          <img :src="festival.image.url" />
+          <img :src="festival.image.url" loading="lazy" />
 
           <div class="flex -mt-3 mb-4">
             <template v-for="(team, i) in festival.teams" :key="team.id">
diff --git a/src/components/SplatfestResultsBox.vue b/src/components/SplatfestResultsBox.vue
index 3322573..e6cc103 100644
--- a/src/components/SplatfestResultsBox.vue
+++ b/src/components/SplatfestResultsBox.vue
@@ -10,7 +10,7 @@
           <div class="w-36 sm:mx-4 lg:-mx-1" />
           <template v-for="team in festival.teams" :key="team.id">
             <div class="w-12 mx-2 sm:w-20 flex justify-center py-1 rounded-sm" :style="`background-color: ${toRgba(team.color)};`">
-              <img :src="team.image.url" class="w-6 h-6" />
+              <img :src="team.image.url" class="w-6 h-6" loading="lazy" />
             </div>
           </template>
         </div>