[site] hero fixes (#6488)

sveltejs · Aug 31, 2022 · cade00d · cade00d
1 parent fb7b115
commit cade00d
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 4 deletions.
diff --git 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
@@ -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>