all: optimize images

Author: zegl

package.json

@@ -36,6 +36,7 @@
 		"tslib": "^2.3.1",
 		"typescript": "~4.6.2",
 		"vite": "^3.0.4",
+		"vite-imagetools": "^4.0.5",
 		"vite-plugin-image-presets": "^0.3.2",
 		"web-vitals": "^2.1.4"
 	},

static/armadillo/at-the-computer-2.png src/lib/armadillo/at-the-computer-2.png

@@ -1,5 +1,6 @@
 <script lang="ts">
 	export let img: string | undefined;
+	export let srcset: string | undefined;
 	export let title: string;
 	export let rainbow = false;
 	export let reverse = false;
@@ -21,6 +22,13 @@
 			<img
 				src={img}
 				class="float-left m-4 h-20 max-w-[8rem] flex-shrink-0 md:float-none md:m-0 md:h-auto md:max-w-[12rem] lg:max-w-[14rem]"
+				width="150"
+			/>
+		{:else if srcset}
+			<img
+				{srcset}
+				class="float-left m-4 h-20 max-w-[8rem] flex-shrink-0 md:float-none md:m-0 md:h-auto md:max-w-[12rem] lg:max-w-[14rem]"
+				width="150"
 			/>
 		{/if}
 

static/armadillo/at-the-computer.png src/lib/armadillo/at-the-computer.png

@@ -1,13 +1,13 @@
 <script lang="ts">
-	export let img: string;
+	export let srcset: string;
 	export let title: string;
 	export let pill: string;
 </script>
 
 <div
 	class="flex items-start gap-4 rounded-xl bg-violet-100 p-4 md:items-center md:gap-8 md:p-8 lg:mx-0 lg:w-full lg:gap-16"
 >
-	<img src={img} class="h-20 flex-shrink-0 md:h-40 " />
+	<img {srcset} class="h-20 flex-shrink-0 md:h-40 " />
 
 	<div class="flex flex-col items-end gap-4 lg:flex-row lg:items-end lg:gap-16">
 		<div class="flex flex-col gap-2 text-gray-600">

static/armadillo/big-office.png src/lib/armadillo/big-office.png

@@ -10,6 +10,10 @@
 	import Button from '$lib/Button.svelte';
 
 	import { FeatureList, BigFeatureBox, FeatureBox, Hero } from '$lib/components/index';
+	import armadilloGraphHD from '$lib/armadillo/graph.png?preset=hd&srcset';
+	import armadilloPlug from '$lib/armadillo/plug.png?preset=thumbnail&srcset';
+	import armadilloDataScientist from '$lib/armadillo/data-scientist.png?preset=thumbnail&srcset';
+	import armadilloCoffee from '$lib/armadillo/coffee-2.png?preset=thumbnail&srcset';
 </script>
 
 <Hero>
@@ -39,12 +43,12 @@
 	</slot>
 
 	<slot slot="right">
-		<img src="/armadillo/graph.png" />
+		<img srcset={armadilloGraphHD} />
 	</slot>
 </Hero>
 
 <FeatureList>
-	<BigFeatureBox title="DORA Metrics" img="/armadillo/data-scientist.png" reverse={true}>
+	<BigFeatureBox title="DORA Metrics" srcset={armadilloDataScientist} reverse={true}>
 		<slot slot="content">
 			<p>
 				Engineering teams love to track their DORA metrics (<a
@@ -63,7 +67,7 @@
 		</slot>
 	</BigFeatureBox>
 
-	<BigFeatureBox title="Not a dashboard" img="/armadillo/plug.png">
+	<BigFeatureBox title="Not a dashboard" srcset={armadilloPlug}>
 		<slot slot="content">
 			<p>
 				There are many companies that will sell you dashboards, but not doing much to <em
@@ -96,7 +100,7 @@
 		</slot>
 	</BigFeatureBox>
 
-	<FeatureBox title="Start Now" img="/armadillo/coffee-2.png">
+	<FeatureBox title="Start Now" srcset={armadilloCoffee}>
 		<slot slot="content">
 			<p>
 				Get started with Codeball for free today <span class="text-gray-400"

static/armadillo/cartoon-datacenter.png src/lib/armadillo/cartoon-datacenter.png

@@ -20,6 +20,14 @@
 	} from '$lib/components/index';
 	import Button from '$lib/Button.svelte';
 
+	import armadilloCoffee from '$lib/armadillo/coffee-2.png?preset=thumbnail&srcset';
+	import armadilloPingPong from '$lib/armadillo/pingpong-2.png?preset=thumbnail&srcset';
+	import armadilloTrackAndField from '$lib/armadillo/track-and-field.png?preset=thumbnail&srcset';
+	import armadilloGraph from '$lib/armadillo/graph.png?preset=thumbnail&srcset';
+
+	import armadilloAtTheComputerHD from '$lib/armadillo/at-the-computer-2.png?preset=hd&srcset';
+	import armadilloBigOfficeHD from '$lib/armadillo/big-office.png?preset=hd&srcset';
+
 	export let login: string | null;
 </script>
 
@@ -56,7 +64,7 @@
 		</div>
 	</slot>
 	<slot slot="right">
-		<img src="/armadillo/at-the-computer-2.png" />
+		<img srcset={armadilloAtTheComputerHD} />
 		<Logos />
 	</slot>
 </Hero>
@@ -79,12 +87,12 @@
 	</div>
 	<img
 		class="select-none md:-mt-[6rem] lg:-mr-[44rem] lg:-mt-[16rem] xl:-mr-[32rem]"
-		src="/armadillo/big-office.png"
+		srcset={armadilloBigOfficeHD}
 	/>
 </div>
 
 <FeatureList>
-	<FeatureBox title="Codeball Approver" img="/armadillo/coffee-2.png">
+	<FeatureBox title="Codeball Approver" srcset={armadilloCoffee}>
 		<slot slot="content">
 			<p>
 				Approver uses advanced Artificial Intelligence to grade Pull Requests, and will approve Pull
@@ -101,7 +109,7 @@
 		</div>
 	</FeatureBox>
 
-	<FeatureBox title="Codeball Suggester" img="/armadillo/pingpong-2.png" pill="BETA">
+	<FeatureBox title="Codeball Suggester" srcset={armadilloPingPong} pill="BETA">
 		<slot slot="content">
 			<p>
 				The Suggester is powered by OpenAI Codex and converts comment feedback in Code Review to
@@ -117,7 +125,7 @@
 		</div>
 	</FeatureBox>
 
-	<FeatureBox title="Really fast, running on GitHub Actions" img="/armadillo/track-and-field.png">
+	<FeatureBox title="Really fast, running on GitHub Actions" srcset={armadilloTrackAndField}>
 		<slot slot="content">
 			<p>
 				All of our tools runs on GitHub Actions, making it easy as <strong>⌘+V</strong> to setup, and
@@ -130,7 +138,7 @@
 		</div>
 	</FeatureBox>
 
-	<FeatureBox title="Not a dashboard" img="/armadillo/graph.png">
+	<FeatureBox title="Not a dashboard" srcset={armadilloGraph}>
 		<slot slot="content">
 			<p>
 				Collecting data and rendering a graph is easy &mdash; making you a better coder and

static/armadillo/coffee-2.png src/lib/armadillo/coffee-2.png

@@ -1,4 +1,4 @@
-import imagePresets, { densityPreset } from 'vite-plugin-image-presets';
+import imagePresets, { densityPreset, widthPreset } from 'vite-plugin-image-presets';
 import { sveltekit } from '@sveltejs/kit/vite';
 
 const withRoundBorders = (image) => {
@@ -29,6 +29,22 @@ const config = {
 					webp: { quality: 40 },
 					png: { quality: 40 }
 				}
+			}),
+
+			thumbnail: widthPreset({
+				loading: 'lazy',
+				widths: [50, 300],
+				formats: {
+					webp: { quality: 90 }
+				}
+			}),
+
+			hd: widthPreset({
+				loading: 'lazy',
+				widths: [50, 300, 1024],
+				formats: {
+					webp: { quality: 90 }
+				}
 			})
 		}),
 		sveltekit()

static/armadillo/coffee-transformed.png src/lib/armadillo/coffee-transformed.png

@@ -144,7 +144,7 @@
   resolved "https://registry.yarnpkg.com/@rgossiaux/svelte-headlessui/-/svelte-headlessui-1.0.2.tgz#9493251a40cd56d8bdc8f0f64623d886bb872b1e"
   integrity sha512-sauopYTSivhzXe1kAvgawkhyYJcQlK8Li3p0d2OtcCIVprOzdbard5lbqWB4xHDv83zAobt2mR08oizO2poHLQ==
 
-"@rollup/pluginutils@^4.2.1":
+"@rollup/pluginutils@^4.1.2", "@rollup/pluginutils@^4.2.1":
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-4.2.1.tgz#e6c6c3aba0744edce3fb2074922d3776c0af2a6d"
   integrity sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==
@@ -1472,6 +1472,13 @@ ignore@^5.1.8, ignore@^5.2.0:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.0.tgz#6d3bac8fa7fe0d45d9f9be7bac2fc279577e345a"
   integrity sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==
 
+imagetools-core@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/imagetools-core/-/imagetools-core-3.0.3.tgz#ed454c47abb21e85c272798a8a47b569ca344c72"
+  integrity sha512-JK7kb0ezkzD27zQgZs7mtRd7DekC+/RTePjIzPsuBAp3S/Z17wNt+6TSEdDJRQSV5xiGV+SOG00weSGVdX3Xig==
+  dependencies:
+    sharp "^0.30.0"
+
 import-fresh@^3.0.0, import-fresh@^3.2.1:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
@@ -1637,7 +1644,7 @@ magic-string@^0.25.7:
   dependencies:
     sourcemap-codec "^1.4.8"
 
-magic-string@^0.26.2:
+magic-string@^0.26.0, magic-string@^0.26.2:
   version "0.26.2"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.26.2.tgz#5331700e4158cd6befda738bb6b0c7b93c0d4432"
   integrity sha512-NzzlXpclt5zAbmo6h6jNc8zl2gNRGHvmsZW4IvZhTC4W7k4OlLP+S5YLussa/r3ixNT66KOQfNORlXHSOy/X4A==
@@ -2208,7 +2215,7 @@ set-cookie-parser@^2.4.8:
   resolved "https://registry.yarnpkg.com/set-cookie-parser/-/set-cookie-parser-2.5.1.tgz#ddd3e9a566b0e8e0862aca974a6ac0e01349430b"
   integrity sha512-1jeBGaKNGdEq4FgIrORu/N570dwoPYio8lSoYLWmX7sQ//0JY08Xh9o5pBcgmHQ/MbsYp/aZnOe1s1lIsbLprQ==
 
-[email protected]:
+[email protected], sharp@^0.30.0:
   version "0.30.7"
   resolved "https://registry.yarnpkg.com/sharp/-/sharp-0.30.7.tgz#7862bda98804fdd1f0d5659c85e3324b90d94c7c"
   integrity sha512-G+MY2YW33jgflKPTXXptVO28HvNOo9G3j0MybYAHeEmby+QuD2U98dT6ueht9cv/XDqZspSpIhoSW+BAKJ7Hig==
@@ -2551,6 +2558,15 @@ v8-compile-cache@^2.0.3:
   resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz#2de19618c66dc247dcfb6f99338035d8245a2cee"
   integrity sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==
 
+vite-imagetools@^4.0.5:
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/vite-imagetools/-/vite-imagetools-4.0.5.tgz#64892745b149f05e2a4158db3445c88baa6de901"
+  integrity sha512-Blh5Fl5tbBGkLFM+BCxtN5zoagBGedEHI+VH5GmUdpBJV7AGpuG9Y8rbTEHzwYP6mg3+nl4mgz3UaFiYhQU1cA==
+  dependencies:
+    "@rollup/pluginutils" "^4.1.2"
+    imagetools-core "^3.0.3"
+    magic-string "^0.26.0"
+
 vite-plugin-image-presets@^0.3.2:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/vite-plugin-image-presets/-/vite-plugin-image-presets-0.3.2.tgz#706eec875608bd1590c197bc5d9b583e74e38235"