Optimize news card image sizes

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'
 			}
 		}
 	)

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>
 

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
 	}

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}