Lazy loading

sites/svelte.dev/src/routes/+page.svelte

@@ -63,9 +63,9 @@
 <Supporters />
 
 {#if $theme.current === 'light'}
-	<Image src={BallsLight} alt="The Svelte logo in a ball pit" />
+	<Image lazy src={BallsLight} alt="The Svelte logo in a ball pit" />
 {:else}
-	<Image src={BallsDark} alt="The Svelte logo in a ball pit" />
+	<Image lazy src={BallsDark} alt="The Svelte logo in a ball pit" />
 {/if}
 
 <footer>

sites/svelte.dev/src/routes/_components/Image.svelte

@@ -5,14 +5,20 @@
 	/** @type {string} */
 	export let alt;
 
-	console.log(src);
+	export let lazy = false;
 </script>
 
 <picture>
 	{#each Object.entries(src?.sources ?? {}) as [format, images]}
 		<source srcset={images?.map((i) => `${i?.src} ${i?.w}w`).join(', ')} type="image/{format}" />
 	{/each}
-	<img height={src.img.h} width={src.img.w} src={src?.img?.src} {alt} />
+	<img
+		loading={lazy ? 'lazy' : 'eager'}
+		height={src.img.h}
+		width={src.img.w}
+		src={src?.img?.src}
+		{alt}
+	/>
 </picture>
 
 <style>