From 73efa7601a17ea069675336f40d9da9fbb94facf Mon Sep 17 00:00:00 2001
From: Alex Bates <alex@nanaian.town>
Date: Wed, 20 Sep 2023 15:46:15 +0100
Subject: [PATCH] optimise doodle images

---
 src/components/landing-page/Doodle.svelte     |  48 +++++++++++-------
 .../doodle/doodle_horizontal/all_top_h.png    | Bin
 .../doodle/doodle_horizontal/browser_h.png    | Bin
 .../doodle/doodle_horizontal/cheerp_h.png     | Bin
 .../doodle/doodle_horizontal/cheerpj_h.png    | Bin
 .../doodle/doodle_horizontal/cheerpx_h.png    | Bin
 .../doodle/doodle_vertical/all_top.png        | Bin
 .../doodle/doodle_vertical/browser.png        | Bin
 .../doodle/doodle_vertical/cheerp_top.png     | Bin
 .../doodle/doodle_vertical/cheerpj_top.png    | Bin
 .../doodle/doodle_vertical/cheerpx_top.png    | Bin
 11 files changed, 31 insertions(+), 17 deletions(-)
 rename {public/landing => src/components/landing-page}/doodle/doodle_horizontal/all_top_h.png (100%)
 rename {public/landing => src/components/landing-page}/doodle/doodle_horizontal/browser_h.png (100%)
 rename {public/landing => src/components/landing-page}/doodle/doodle_horizontal/cheerp_h.png (100%)
 rename {public/landing => src/components/landing-page}/doodle/doodle_horizontal/cheerpj_h.png (100%)
 rename {public/landing => src/components/landing-page}/doodle/doodle_horizontal/cheerpx_h.png (100%)
 rename {public/landing => src/components/landing-page}/doodle/doodle_vertical/all_top.png (100%)
 rename {public/landing => src/components/landing-page}/doodle/doodle_vertical/browser.png (100%)
 rename {public/landing => src/components/landing-page}/doodle/doodle_vertical/cheerp_top.png (100%)
 rename {public/landing => src/components/landing-page}/doodle/doodle_vertical/cheerpj_top.png (100%)
 rename {public/landing => src/components/landing-page}/doodle/doodle_vertical/cheerpx_top.png (100%)

diff --git a/src/components/landing-page/Doodle.svelte b/src/components/landing-page/Doodle.svelte
index e0dea501..719202fb 100644
--- a/src/components/landing-page/Doodle.svelte
+++ b/src/components/landing-page/Doodle.svelte
@@ -1,14 +1,17 @@
 <script lang="ts">
-	const images = [
-		"/landing/doodle/doodle_vertical/cheerp_top.png",
-		"/landing/doodle/doodle_vertical/cheerpj_top.png",
-		"/landing/doodle/doodle_vertical/cheerpx_top.png",
-	];
-	const images_h = [
-		"/landing/doodle/doodle_horizontal/cheerp_h.png",
-		"/landing/doodle/doodle_horizontal/cheerpj_h.png",
-		"/landing/doodle/doodle_horizontal/cheerpx_h.png",
-	];
+	import verticalAll from "./doodle/doodle_vertical/all_top.png";
+	import verticalBrowser from "./doodle/doodle_vertical/browser.png";
+	import verticalCheerp from "./doodle/doodle_vertical/cheerp_top.png";
+	import verticalCheerpj from "./doodle/doodle_vertical/cheerpj_top.png";
+	import verticalCheerpx from "./doodle/doodle_vertical/cheerpx_top.png";
+	import horizontalAll from "./doodle/doodle_horizontal/all_top_h.png";
+	import horizontalBrowser from "./doodle/doodle_horizontal/browser_h.png";
+	import horizontalCheerp from "./doodle/doodle_horizontal/cheerp_h.png";
+	import horizontalCheerpj from "./doodle/doodle_horizontal/cheerpj_h.png";
+	import horizontalCheerpx from "./doodle/doodle_horizontal/cheerpx_h.png";
+
+	const images = [verticalCheerp, verticalCheerpj, verticalCheerpx];
+	const images_h = [horizontalCheerp, horizontalCheerpj, horizontalCheerpx];
 	const hrefs = [
 		"/cheerp",
 		"/cheerpj",
@@ -24,21 +27,27 @@
 <div class="doodle relative w-96 hidden md:block  md:w-full max-w-full max-h-[36rem] lg:max-h-[48rem] overflow-hidden">
 	<a href={hrefs[index]}>
 		<img
-      src="/landing/doodle/doodle_vertical/all_top.png"
+      src={verticalAll.src}
       alt=""
+			decoding="async"
+  		loading="lazy"
       class="absolute top-0 opacity-20"
 		/>
 		{#each images as image, i}
 			<img
-				src={image}
+				src={image.src}
 				alt=""
+				decoding="async"
+  			loading="lazy"
 				class="absolute top-0 transition-opacity duration-500"
 				class:opacity-0={i !== index}
 			/>
 		{/each}
 		<img
-      src="/landing/doodle/doodle_vertical/browser.png"
+      src={verticalBrowser.src}
       alt=""
+			decoding="async"
+  		loading="lazy"
       class="absolute top-0"
 		/>
 	</a>
@@ -47,27 +56,32 @@
 <div class="doodle_h relative w-full md:hidden mt-28">
 	<a href={hrefs[index]}>
 		<img
-      src="/landing/doodle/doodle_horizontal/all_top_h.png"
+      src={horizontalAll.src}
       alt=""
+			decoding="async"
+  		loading="lazy"
       class="absolute top-0 opacity-20"
 		/>
 		{#each images_h as image, i}
 			<img
-				src={image}
+				src={image.src}
 				alt=""
+				decoding="async"
+  			loading="lazy"
 				class="absolute top-0 transition-opacity duration-500"
 				class:opacity-0={i !== index}
 			/>
 		{/each}
 		<img
-      src="/landing/doodle/doodle_horizontal/browser_h.png"
+      src={horizontalBrowser.src}
       alt=""
+			decoding="async"
+  		loading="lazy"
       class="absolute top-0"
 		/>
 	</a>
 </div>
 
-<!-- TODO: <map> and <area> elements -->
 <style>
 	.doodle {
 		aspect-ratio: 1101 / 1577;
diff --git a/public/landing/doodle/doodle_horizontal/all_top_h.png b/src/components/landing-page/doodle/doodle_horizontal/all_top_h.png
similarity index 100%
rename from public/landing/doodle/doodle_horizontal/all_top_h.png
rename to src/components/landing-page/doodle/doodle_horizontal/all_top_h.png
diff --git a/public/landing/doodle/doodle_horizontal/browser_h.png b/src/components/landing-page/doodle/doodle_horizontal/browser_h.png
similarity index 100%
rename from public/landing/doodle/doodle_horizontal/browser_h.png
rename to src/components/landing-page/doodle/doodle_horizontal/browser_h.png
diff --git a/public/landing/doodle/doodle_horizontal/cheerp_h.png b/src/components/landing-page/doodle/doodle_horizontal/cheerp_h.png
similarity index 100%
rename from public/landing/doodle/doodle_horizontal/cheerp_h.png
rename to src/components/landing-page/doodle/doodle_horizontal/cheerp_h.png
diff --git a/public/landing/doodle/doodle_horizontal/cheerpj_h.png b/src/components/landing-page/doodle/doodle_horizontal/cheerpj_h.png
similarity index 100%
rename from public/landing/doodle/doodle_horizontal/cheerpj_h.png
rename to src/components/landing-page/doodle/doodle_horizontal/cheerpj_h.png
diff --git a/public/landing/doodle/doodle_horizontal/cheerpx_h.png b/src/components/landing-page/doodle/doodle_horizontal/cheerpx_h.png
similarity index 100%
rename from public/landing/doodle/doodle_horizontal/cheerpx_h.png
rename to src/components/landing-page/doodle/doodle_horizontal/cheerpx_h.png
diff --git a/public/landing/doodle/doodle_vertical/all_top.png b/src/components/landing-page/doodle/doodle_vertical/all_top.png
similarity index 100%
rename from public/landing/doodle/doodle_vertical/all_top.png
rename to src/components/landing-page/doodle/doodle_vertical/all_top.png
diff --git a/public/landing/doodle/doodle_vertical/browser.png b/src/components/landing-page/doodle/doodle_vertical/browser.png
similarity index 100%
rename from public/landing/doodle/doodle_vertical/browser.png
rename to src/components/landing-page/doodle/doodle_vertical/browser.png
diff --git a/public/landing/doodle/doodle_vertical/cheerp_top.png b/src/components/landing-page/doodle/doodle_vertical/cheerp_top.png
similarity index 100%
rename from public/landing/doodle/doodle_vertical/cheerp_top.png
rename to src/components/landing-page/doodle/doodle_vertical/cheerp_top.png
diff --git a/public/landing/doodle/doodle_vertical/cheerpj_top.png b/src/components/landing-page/doodle/doodle_vertical/cheerpj_top.png
similarity index 100%
rename from public/landing/doodle/doodle_vertical/cheerpj_top.png
rename to src/components/landing-page/doodle/doodle_vertical/cheerpj_top.png
diff --git a/public/landing/doodle/doodle_vertical/cheerpx_top.png b/src/components/landing-page/doodle/doodle_vertical/cheerpx_top.png
similarity index 100%
rename from public/landing/doodle/doodle_vertical/cheerpx_top.png
rename to src/components/landing-page/doodle/doodle_vertical/cheerpx_top.png