refactor: use AstroImageTools to optimize Markdown images

astro.config.mjs

@@ -2,6 +2,7 @@ import image from '@astrojs/image';
 import mdx from '@astrojs/mdx';
 import preact from '@astrojs/preact';
 import tailwind from '@astrojs/tailwind';
+import { astroImageTools } from 'astro-imagetools';
 
 import { defineConfig } from 'astro/config';
 
@@ -11,6 +12,7 @@ export default defineConfig({
 		mdx(),
 		tailwind(),
 		preact(),
+		astroImageTools,
 		image({
 			serviceEntryPoint: '@astrojs/image/sharp',
 		}),

package.json

@@ -18,9 +18,14 @@
 		"@astrojs/tailwind": "^3.0.1",
 		"astro": "^2.4.0",
 		"astro-icon": "^0.8.0",
+		"astro-imagetools": "^0.8.1",
 		"autoprefixer": "^10.4.13",
 		"classnames": "^2.3.2",
+		"file-type": "^18.4.0",
+		"find-cache-dir": "^4.0.0",
+		"object-hash": "^3.0.0",
 		"postcss": "^8.4.21",
+		"potrace": "^2.1.8",
 		"preact": "^10.6.5",
 		"sharp": "^0.31.3",
 		"tailwindcss": "^3.0.24"

src/components/FloatingImage.tsx

@@ -1,33 +0,0 @@
-import cx from 'classnames';
-
-import type { FunctionalComponent } from 'preact';
-
-interface Props {
-	alt: string;
-	class?: string;
-	noMargin?: boolean;
-	src: string;
-}
-
-export const FloatingImage: FunctionalComponent<Props> = ({
-	alt,
-	class: className,
-	noMargin,
-	src,
-	...props
-}) => {
-	const classes = cx('image-shadow mbe-10 mbs-0', { 'mbe-0': noMargin }, className);
-
-	return (
-		<div class={classes}>
-			<img
-				alt={alt}
-				class="block h-auto w-full rounded-1 border-1 border-solid border-black/[0.1] bg-black/[0.1] shadow shadow-black/10 dark:border-white/[0.1] dark:opacity-[0.87] dark:shadow-white/10"
-				decoding="async"
-				loading="lazy"
-				src={src}
-				{...props}
-			/>
-		</div>
-	);
-};

src/components/MarkdownImage.astro

@@ -0,0 +1,23 @@
+---
+import cx from 'classnames';
+
+import { Img } from 'astro-imagetools/components';
+
+interface Props {
+	class?: string;
+	noMargin?: boolean;
+	src: string;
+}
+
+const { class: className, noMargin, src, ...props } = Astro.props;
+
+const classes = cx(
+	'image-shadow block h-auto w-full rounded-1 border-1 border-solid border-black/[0.1] bg-black/[0.1] shadow shadow-black/10 mbe-10 mbs-0 dark:border-white/[0.1] dark:opacity-[0.87] dark:shadow-white/10',
+	{ 'mbe-0': noMargin },
+	className
+);
+---
+
+<div class={classes}>
+	{src.includes('.svg') ? <img src={src} {...props} /> : <Img src={src} {...props} />}
+</div>

src/components/index.ts

@@ -7,7 +7,6 @@ export * from './ColorSwatch';
 export * from './DisplayBox';
 export * from './Divider';
 export * from './Flag';
-export * from './FloatingImage';
 export * from './Headline';
 export * from './LegalDate';
 export * from './Link';

src/mdx-components.ts

@@ -1,5 +1,6 @@
 import DownloadLink from './components/DownloadLink.astro';
 import EmailLink from './components/EmailLink.astro';
+import MarkdownImage from './components/MarkdownImage.astro';
 import MoreLink from './components/MoreLink.astro';
 import ThemeBox from './components/ThemeBox.astro';
 
@@ -13,7 +14,6 @@ import {
 	DisplayBox,
 	Divider,
 	Flag,
-	FloatingImage,
 	Headline,
 	ListItem,
 	NetflixFlag,
@@ -50,7 +50,7 @@ export const mapping = {
 	h5: Subsubheadline,
 	h6: Subsubheadline,
 	hr: Divider,
-	img: FloatingImage,
+	img: MarkdownImage,
 	li: ListItem,
 	MoreLink,
 	NetflixFlag,

types/astro-imagetools.d.ts

@@ -0,0 +1 @@
+declare module 'astro-imagetools/components';