fix(site): Optimise contributors donors images (#8956)

Author: PuruVJ

sites/svelte.dev/scripts/get_contributors.js

@@ -68,11 +68,6 @@ try {
 			new URL(`../src/routes/_components/Supporters/contributors.jpg`, import.meta.url).pathname
 		);
 
-	// TODO: Optimizing the static/contributors.jpg image should probably get automated as well
-	console.log(
-		'remember to additionally optimize the resulting /static/contributors.jpg image file via e.g. https://squoosh.app '
-	);
-
 	const str = `[\n\t${authors.map((a) => `'${a.login}'`).join(',\n\t')}\n]`;
 
 	writeFile(outputFile, `export default ${str};`);

sites/svelte.dev/scripts/get_donors.js

@@ -61,10 +61,6 @@ try {
 		.writeAsync(
 			new URL(`../src/routes/_components/Supporters/donors.jpg`, import.meta.url).pathname
 		);
-	// TODO: Optimizing the static/donors.jpg image should probably get automated as well
-	console.log(
-		'remember to additionally optimize the resulting /static/donors.jpg image file via e.g. https://squoosh.app '
-	);
 
 	const str = `[\n\t${included.map((a) => `${JSON.stringify(a.backer.name)}`).join(',\n\t')}\n]`;
 

sites/svelte.dev/src/routes/_components/Supporters/index.svelte

@@ -2,6 +2,11 @@
 	import { Section } from '@sveltejs/site-kit/components';
 	import contributors from './contributors.js';
 	import donors from './donors.js';
+
+	// @ts-ignore
+	import contributors_img from './contributors.jpg?w=1200&format=webp';
+	// @ts-ignore
+	import donors_img from './donors.jpg?w=1200&format=webp';
 </script>
 
 <Section --background="var(--sk-back-2">
@@ -20,6 +25,7 @@
 				<a
 					class="supporter"
 					style="background-position: {(100 * i) / (contributors.length - 1)}% 0"
+					style:background-image="url({contributors_img})"
 					href="https://github.com/{contributor}"
 				>
 					{contributor}
@@ -37,6 +43,7 @@
 				<a
 					class="supporter"
 					style="background-position: {(100 * i) / (donors.length - 1)}% 0"
+					style:background-image="url({donors_img})"
 					href="https://opencollective.com/svelte">{donor}</a
 				>
 			{/each}
@@ -85,14 +92,6 @@
 		filter: drop-shadow(1px 2px 8px rgba(0, 0, 0, 0.3));
 	}
 
-	.contributors .supporter {
-		background-image: url(./contributors.jpg);
-	}
-
-	.donors .supporter {
-		background-image: url(./donors.jpg);
-	}
-
 	@media (min-width: 480px) {
 		.grid {
 			grid-template-columns: repeat(8, minmax(0, 1fr));