diff --git a/src/lib/components/Image.svelte b/src/lib/components/Image.svelte
index 22707905b..29512e2bb 100644
--- a/src/lib/components/Image.svelte
+++ b/src/lib/components/Image.svelte
@@ -25,7 +25,8 @@
 			eager: true,
 			import: 'default',
 			query: {
-				enhanced: true
+				enhanced: true,
+				w: '520;640;800;1280;1920;2560;3840'
 			}
 		}
 	)
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}
 		<div class="news-grid">
 			{#each newsItems as item}
-				<NewsCard {item} {loading} imageSizes="500px" />
+				<NewsCard {item} {loading} imageSizes={newsCardImageSizes} />
 			{/each}
 		</div>
 
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 @@
 
 		<div class="coverage-cards">
 			{#each filteredCoverage as item (item.id)}
-				<NewsCard id={item.id} item={toNewsItem(item)} />
+				<NewsCard id={item.id} item={toNewsItem(item)} imageSizes={newsCardImageSizes} />
 			{/each}
 		</div>
 	{/if}