From cade00d1a64566ec83228f003faaeb4c09cd0dd7 Mon Sep 17 00:00:00 2001
From: Ben McCann <322311+benmccann@users.noreply.github.com>
Date: Wed, 31 Aug 2022 14:08:27 -0700
Subject: [PATCH] [site] hero fixes (#6488)

---
 sites/kit.svelte.dev/src/routes/+page.svelte | 3 +--
 sites/kit.svelte.dev/src/routes/Hero.svelte  | 4 ++--
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/sites/kit.svelte.dev/src/routes/+page.svelte b/sites/kit.svelte.dev/src/routes/+page.svelte
index 6dfd673fbbfb..bcd2a02bd792 100644
--- a/sites/kit.svelte.dev/src/routes/+page.svelte
+++ b/sites/kit.svelte.dev/src/routes/+page.svelte
@@ -2,7 +2,7 @@
 	import { Blurb } from '@sveltejs/site-kit';
 	import Hero from './Hero.svelte';
 	import Logotype from './svelte-kit-logotype.svg';
-	import Machine from './svelte-kit-machine.webp?w=1440;800&format=avif;webp;png&picture';
+	import Machine from './svelte-kit-machine.webp?w=1440;800;600;480&format=avif;webp;png&picture';
 </script>
 
 <svelte:head>
@@ -20,7 +20,6 @@
 	tagline="The fastest way to build svelte apps"
 	background={Machine}
 	alt="SvelteKit illustration"
-	width={800}
 />
 
 <div class="blurb-shifter">
diff --git a/sites/kit.svelte.dev/src/routes/Hero.svelte b/sites/kit.svelte.dev/src/routes/Hero.svelte
index 5428908362c2..1d8266103cab 100644
--- a/sites/kit.svelte.dev/src/routes/Hero.svelte
+++ b/sites/kit.svelte.dev/src/routes/Hero.svelte
@@ -14,9 +14,9 @@
 		</div>
 
 		<div class="hero-image">
-			<picture>
+			<picture sizes="(min-width: 480px) 800px, (min-width: 1024px) 480px, 600px">
 				{#each Object.entries(background.sources) as [format, images]}
-					<source srcset={images.map((i) => `${i.src} ${i.width}w`).join(', ')} type={'image/' + format} /> 
+					<source srcset={images.map((i) => `${i.src} ${i.w}w`).join(', ')} type={'image/' + format} /> 
 				{/each}
 				<img src={background.fallback} {alt} />
 			</picture>