chore: cleanup image component (#9760)

* chore: cleanup image component * upgrade imagetools * better defaultDirectives
sveltejs · Apr 25, 2023 · fe1cdae · fe1cdae
1 parent f940f1c
commit fe1cdae
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 44 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/sites/kit.svelte.dev/package.json b/sites/kit.svelte.dev/package.json
@@ -28,7 +28,7 @@
 		"typescript": "^4.9.4",
 		"uvu": "^0.5.6",
 		"vite": "^4.3.0",
-		"vite-imagetools": "^4.0.16"
+		"vite-imagetools": "^4.0.19"
 	},
 	"type": "module",
 	"dependencies": {

diff --git a/sites/kit.svelte.dev/src/lib/Image.svelte b/sites/kit.svelte.dev/src/lib/Image.svelte
@@ -4,30 +4,15 @@
 
 	/** @type {string} */
 	export let alt;
-
-	/** @type {number} */
-	export let width = undefined;
-
-	/** @type {number} */
-	export let height = undefined;
 </script>
 
 {#if typeof src === 'string'}
-	<img {src} {alt} {width} {height} />
+	<img {src} {alt} {...$$restProps} />
 {:else}
 	<picture>
 		{#each Object.entries(src.sources) as [format, images]}
-			<source srcset={images.map((i) => `${i.src}`).join(', ')} type={'image/' + format} />
+			<source srcset={images.map((i) => `${i.src} ${i.w}w`).join(', ')} type={'image/' + format} />
 		{/each}
-		<img src={src.fallback.src} {alt} />
+		<img src={src.fallback.src} {alt} {...$$restProps} />
 	</picture>
 {/if}
-
-<style>
-	picture,
-	img {
-		width: 100%;
-		height: 100%;
-		object-fit: cover;
-	}
-</style>
diff --git a/sites/kit.svelte.dev/src/routes/home/Hero.svelte b/sites/kit.svelte.dev/src/routes/home/Hero.svelte
@@ -1,7 +1,8 @@
 <script>
 	import { base } from '$app/paths';
 	import Logotype from './svelte-kit-logotype.svg.svelte';
-	import background from './svelte-kit-machine.webp?w=1440;960&format=avif;webp;png&picture';
+	import Image from '$lib/Image.svelte';
+	import background from './svelte-kit-machine.webp?w=1440;960';
 </script>
 
 <section class="hero">
@@ -15,12 +16,9 @@
 			<a class="cta" href="{base}/docs/introduction">read the docs</a>
 		</div>
 
-		<picture class="hero-image">
-			{#each Object.entries(background.sources) as [format, images]}
-				<source srcset={images.map((i) => `${i.src} ${i.w}w`).join(', ')} type="image/{format}" />
-			{/each}
-			<img src={background.fallback.src} alt="SvelteKit illustration" />
-		</picture>
+		<div class="hero-image">
+			<Image src={background} alt="SvelteKit illustration" />
+		</div>
 	</div>
 </section>
 
@@ -38,6 +36,7 @@
 				hsla(207, 22%, 84%, 0.62) 92.49%
 			),
 			linear-gradient(0deg, hsl(204, 38%, 90%), hsl(204, 38%, 90%));
+
 		--dark-gradient: radial-gradient(
 				64.14% 72.25% at 47.58% 31.75%,
 				hsl(209deg 6% 47% / 52%) 0%,
@@ -50,6 +49,7 @@
 				hsla(207, 22%, 13%, 0.62) 92.49%
 			),
 			linear-gradient(0deg, hsl(204, 38%, 20%), hsl(204, 10%, 90%));
+
 		max-width: 100vw;
 		background: hsl(210, 7%, 84%);
 		background: var(--gradient);
@@ -93,7 +93,9 @@
 		pointer-events: none;
 	}
 
-	.hero-image img {
+	/* this sucks but it's the best we can do.
+	   https://github.com/sveltejs/svelte/issues/2870#issuecomment-1161082065 */
+	.hero-image :global(img) {
 		width: var(--size);
 		aspect-ratio: 4 / 3;
 		object-fit: cover;

diff --git a/sites/kit.svelte.dev/src/routes/home/Showcase.svelte b/sites/kit.svelte.dev/src/routes/home/Showcase.svelte
@@ -28,7 +28,7 @@
 	<div class="showcase">
 		{#each showcase as { url, image }}
 			<a href="https://{url}" target="_blank" rel="noreferrer">
-				<Image src={image} alt="" />
+				<Image src={image} alt="" style="width:100%; height:100%; object-fit:cover" />
 				<span>{url}</span>
 			</a>
 		{/each}

diff --git a/sites/kit.svelte.dev/vite.config.js b/sites/kit.svelte.dev/vite.config.js
@@ -2,7 +2,17 @@ import { sveltekit } from '@sveltejs/kit/vite';
 import * as path from 'path';
 import { imagetools } from 'vite-imagetools';
 
-const supportedExtensions = ['.png', '.jpg', '.jpeg'];
+const fallback = {
+	'.heic': 'jpg',
+	'.heif': 'jpg',
+	'.avif': 'png',
+	'.jpeg': 'jpg',
+	'.jpg':  'jpg',
+	'.png':  'png',
+	'.tiff': 'jpg',
+	'.webp': 'png',
+	'.gif':  'gif'
+};
 
 /** @type {import('vite').UserConfig} */
 const config = {
@@ -13,14 +23,13 @@ const config = {
 	plugins: [
 		imagetools({
 			defaultDirectives: (url) => {
-				const extension = path.extname(url.pathname);
-				if (supportedExtensions.includes(extension)) {
-					return new URLSearchParams({
-						format: 'avif;webp;' + extension.slice(1),
-						picture: true
-					});
+				const ext = path.extname(url.pathname);
+				const params = new URLSearchParams();
+				params.set('format', 'avif;webp;' + fallback[ext]);
+				if (!params.has('meta') && !params.has('metadata') && !params.has('source') && !params.has('srcset') && !params.has('url')) {
+					params.set('picture', true);
 				}
-				return new URLSearchParams();
+				return params;
 			}
 		}),
 		sveltekit()