diff --git a/src/lib/components/Hero.svelte b/src/lib/components/Hero.svelte
index 9e0da07b..fc9097b0 100644
--- a/src/lib/components/Hero.svelte
+++ b/src/lib/components/Hero.svelte
@@ -6,34 +6,29 @@
 
 	import Link from '$lib/components/Link.svelte'
 
-	let isMobile = false
 	let tagline: HTMLDivElement
 
-	const checkMobile = () => {
-		isMobile = window.innerWidth <= 850 || window.innerHeight > window.innerWidth
-	}
-
 	onMount(() => {
-		checkMobile()
-		window.addEventListener('resize', checkMobile)
-
 		const cleanupCqwEmulation = emulateCqwIfNeeded(tagline)
 
 		return () => {
-			window.removeEventListener('resize', checkMobile)
 			cleanupCqwEmulation?.()
 		}
 	})
 </script>
 
 <div class="hero">
-	{#if isMobile}
-		<enhanced:img src={homeHeroMobile} sizes="100vw" alt="" />
-	{:else}
-		<enhanced:img src={homeHeroDesktop} sizes="100vw" alt="" />
-	{/if}
+	<picture>
+		{#each Object.entries(homeHeroMobile.sources) as [format, srcset]}
+			<source media="(max-width: 850px)" {srcset} sizes="100vw" type={'image/' + format} />
+		{/each}
+		{#each Object.entries(homeHeroDesktop.sources) as [format, srcset]}
+			<source {srcset} sizes="100vw" type={'image/' + format} />
+		{/each}
+		<img src={homeHeroDesktop.img.src} alt="" />
+	</picture>
 	<div class="content" bind:this={tagline}>
-		<h2>Don’t let AI companies<br />gamble away our future</h2>
+		<h2>Don't let AI companies<br />gamble away our future</h2>
 		<div class="actions">
 			<Link href="/join" class="btn-primary">Get involved</Link>
 			<Link href="/donate" class="btn-secondary">Donate</Link>
@@ -74,7 +69,13 @@
 		transform-origin: center bottom;
 	}
 
-	@media (max-width: 850px), (orientation: portrait) {
+	@media (min-width: 851px) {
+		.hero :global(img) {
+			transform: scale(0.95);
+		}
+	}
+
+	@media (max-width: 850px) {
 		.hero :global(img) {
 			position: absolute !important;
 			bottom: var(--mobile-hero-img-pos, 0px) !important;
@@ -82,7 +83,6 @@
 			width: 100% !important;
 			height: auto !important;
 			object-fit: initial !important;
-			transform: none !important;
 		}
 
 		.content {
@@ -114,12 +114,6 @@
 		}
 	}
 
-	@media (min-width: 851px) and (orientation: landscape) {
-		.hero :global(img) {
-			transform: scale(0.95);
-		}
-	}
-
 	.hero {
 		display: block;
 		height: 100vh;