Set a width and height on the hero image

To improve Lighthouse score (reduce CLS).
johnjago · Jul 23, 2024 · 55e5a5d · 55e5a5d
1 parent 0ff1345
commit 55e5a5d
Showing 1 changed file with 9 additions and 5 deletions.
diff --git a/layouts/index.html b/layouts/index.html
@@ -1,11 +1,15 @@
 {{ define "main" }}
 <section class="pt-40 pb-16 px-4 text-center bg-gradient-to-b from-[#9D6095B3] to-[#E8A04DB3]">
 	<h1 class="text-white text-5xl font-bold mb-16">Better WooCommerce order management.</h1>
-	<img
-		src="images/dashify-order-list.webp"
-		alt="Screenshot of the WooCommerce order list page with Dashify styles and functionality."
-		class="max-w-full lg:max-w-7xl lg:w-none mx-auto rounded-lg shadow-2xl"
-	>
+	<div class="max-w-7xl mx-auto">
+		<img
+			src="images/dashify-order-list.webp"
+			width="3048"
+			height="1717"
+			alt="Screenshot of the WooCommerce order list page with Dashify styles and functionality."
+			class="rounded-lg shadow-2xl"
+		>
+	</div>
 	<div class="mt-28">
 		<p
 			class="text-white text-[2.5rem] font-semibold mb-8"