From bccb8f2e1d49537de879be81b20b4697b67d963b Mon Sep 17 00:00:00 2001
From: Wituareard <87208350+Wituareard@users.noreply.github.com>
Date: Thu, 11 Jun 2026 15:30:59 +0200
Subject: [PATCH 1/3] Optimize news card image sizes
---
src/lib/components/LatestNews.svelte | 6 +++++-
src/lib/components/NewsCard.svelte | 4 ++++
src/lib/components/PressCoveragePanel.svelte | 7 ++++++-
3 files changed, 15 insertions(+), 2 deletions(-)
diff --git a/src/lib/components/LatestNews.svelte b/src/lib/components/LatestNews.svelte
index ff5a67a90..8e187298f 100644
--- a/src/lib/components/LatestNews.svelte
+++ b/src/lib/components/LatestNews.svelte
@@ -5,6 +5,10 @@
import { onMount } from 'svelte'
const pageSize = 6
+ // Matches the 1/2/3-column grid below so browsers choose thumbnail-sized
+ // responsive image variants rather than downloading page-width images.
+ const newsCardImageSizes =
+ '(max-width: 500px) calc(100vw - 1rem), (max-width: 850px) calc((100vw - 3rem) / 2), 13rem'
let newsItems: NewsItem[] = $state(Array.from({ length: pageSize }))
let loading = $state(true)
let currentPage = $state(1)
@@ -40,7 +44,7 @@
{#if newsItems.length > 0}
{#each newsItems as item}
-
+
{/each}
diff --git a/src/lib/components/NewsCard.svelte b/src/lib/components/NewsCard.svelte
index 417026e89..32891ac79 100644
--- a/src/lib/components/NewsCard.svelte
+++ b/src/lib/components/NewsCard.svelte
@@ -9,6 +9,10 @@
interface Props {
item?: NewsItem
loading?: boolean
+ /**
+ * Passed by the parent layout so responsive images download a variant close to the
+ * card's rendered width instead of the image component's broad default.
+ */
imageSizes?: string
id?: string
}
diff --git a/src/lib/components/PressCoveragePanel.svelte b/src/lib/components/PressCoveragePanel.svelte
index 369b795f1..322ad420d 100644
--- a/src/lib/components/PressCoveragePanel.svelte
+++ b/src/lib/components/PressCoveragePanel.svelte
@@ -10,6 +10,11 @@
loading?: boolean
}
+ // Matches the 1/2/3-column grid below so browsers choose thumbnail-sized
+ // responsive image variants rather than downloading page-width images.
+ const newsCardImageSizes =
+ '(max-width: 500px) calc(100vw - 1rem), (max-width: 850px) calc((100vw - 3rem) / 2), 13rem'
+
let { coverage = [], typeOrder = [], outletOrder = [], loading = false }: Props = $props()
function toNewsItem(item: PressCoverage): NewsItem {
@@ -75,7 +80,7 @@
{#each filteredCoverage as item (item.id)}
-
+
{/each}
{/if}
From e5ae2f14edb005c7d5322c220c47fc6f1ece1757 Mon Sep 17 00:00:00 2001
From: Wituareard <87208350+Wituareard@users.noreply.github.com>
Date: Thu, 11 Jun 2026 15:56:17 +0200
Subject: [PATCH 2/3] Specify resolutions
---
src/lib/components/Image.svelte | 5 ++++-
1 file changed, 4 insertions(+), 1 deletion(-)
diff --git a/src/lib/components/Image.svelte b/src/lib/components/Image.svelte
index 22707905b..e5b0c2455 100644
--- a/src/lib/components/Image.svelte
+++ b/src/lib/components/Image.svelte
@@ -18,6 +18,8 @@
class: className = ''
}: Props = $props()
+ const optimizedResolutions = [320, 640, 800, 1280, 1920, 2560, 3840]
+
// Use import.meta.glob to statically analyze all potential static assets
const pictureModules = import.meta.glob(
'../../assets/images/**/*.{avif,heif,gif,jpeg,jpg,png,tiff,webp}',
@@ -25,7 +27,8 @@
eager: true,
import: 'default',
query: {
- enhanced: true
+ enhanced: true,
+ w: optimizedResolutions.join(';')
}
}
)
From e73b08412db65cd1ef0eb498f0f5b975812653da Mon Sep 17 00:00:00 2001
From: Wituareard <87208350+Wituareard@users.noreply.github.com>
Date: Thu, 11 Jun 2026 19:13:46 +0200
Subject: [PATCH 3/3] Dynamic values break Vite import
---
src/lib/components/Image.svelte | 4 +---
1 file changed, 1 insertion(+), 3 deletions(-)
diff --git a/src/lib/components/Image.svelte b/src/lib/components/Image.svelte
index e5b0c2455..29512e2bb 100644
--- a/src/lib/components/Image.svelte
+++ b/src/lib/components/Image.svelte
@@ -18,8 +18,6 @@
class: className = ''
}: Props = $props()
- const optimizedResolutions = [320, 640, 800, 1280, 1920, 2560, 3840]
-
// Use import.meta.glob to statically analyze all potential static assets
const pictureModules = import.meta.glob(
'../../assets/images/**/*.{avif,heif,gif,jpeg,jpg,png,tiff,webp}',
@@ -28,7 +26,7 @@
import: 'default',
query: {
enhanced: true,
- w: optimizedResolutions.join(';')
+ w: '520;640;800;1280;1920;2560;3840'
}
}
)