feat: remove astro-imagetools

It's not worth the effort.

src/components/GalleryDetail.astro

@@ -3,7 +3,7 @@ import cx from 'classnames';
 
 import { animation, animationDelay } from '../data/site';
 
-import Picture from './Picture.astro';
+import Image from './Image.astro';
 import { Headline } from '.';
 
 const { entry } = Astro.props;
@@ -52,14 +52,7 @@ const imageLength = entry.data.images.length;
 					})}
 					{...animation}
 				>
-					<Picture
-						alt={entry.data.title}
-						aspect={entry.data.aspect}
-						breakpoints={[500, 1000, 1500]}
-						format={['avif']}
-						loading={index === 0 ? 'eager' : 'lazy'}
-						src={src}
-					/>
+					<Image alt={entry.data.title} src={src} />
 				</div>
 			))
 		}

src/components/Image.astro

@@ -1,15 +1,6 @@
 ---
 import cx from 'classnames';
 
-import { Img } from 'astro-imagetools/components';
-import type { ImgConfigOptions } from 'astro-imagetools';
-
-interface Props extends ImgConfigOptions {
-	class?: string;
-	noMargin?: boolean;
-	src: string;
-}
-
 const { class: className, noMargin, src, ...props } = Astro.props;
 
 const classes = cx(
@@ -22,17 +13,5 @@ const imageClasses =
 ---
 
 <div class={classes}>
-	{
-		src.includes('.svg') ? (
-			<img class={imageClasses} src={src} {...(props as any)} />
-		) : (
-			<Img
-				attributes={{ class: imageClasses }}
-				breakpoints={[500, 1000, 1500]}
-				format="webp"
-				src={src}
-				{...props}
-			/>
-		)
-	}
+	<img class={imageClasses} decoding="async" loading="lazy" src={src} {...props} />
 </div>

src/components/JournalList.astro

@@ -1,5 +1,5 @@
 ---
-import { Picture } from 'astro-imagetools/components';
+import { Picture } from 'astro:assets';
 
 import type { CollectionEntry } from 'astro:content';
 interface Props {
@@ -28,19 +28,13 @@ const { entries } = Astro.props;
 				>
 					<div class="absolute z-10 h-full w-full">
 						{data.cover ? (
-							<>
-								{data.cover.endsWith('.svg') ? (
-									<img src={data.cover} alt={data.title} />
-								) : (
-									<Picture
-										alt={data.title}
-										aspect={0.6}
-										breakpoints={[300, 500, 1000]}
-										format={['avif']}
-										src={data.cover}
-									/>
-								)}
-							</>
+							<Picture
+								alt={data.title}
+								formats={['avif', 'webp']}
+								height="937"
+								src={data.cover}
+								width="1500"
+							/>
 						) : (
 							<div
 								class="h-full w-full bg-gray-800 transition duration-300 ease-in-out group-hover:brightness-[90%] group-focus:brightness-[90%] dark:brightness-[50%] dark:group-hover:brightness-[100%] dark:group-focus:brightness-[100%]"

src/components/MarkdownImage.astro

@@ -1,8 +1,6 @@
 ---
 import cx from 'classnames';
 
-import { Img } from 'astro-imagetools/components';
-
 interface Props {
 	class?: string;
 	noMargin?: boolean;
@@ -19,11 +17,5 @@ const classes = cx(
 ---
 
 <div class={classes}>
-	{
-		src.includes('.svg') ? (
-			<img src={src} {...props} />
-		) : (
-			<Img breakpoints={[500, 1000, 1500]} format="webp" src={src} {...props} />
-		)
-	}
+	<img src={src} decoding="async" loading="lazy" {...props} />
 </div>

src/components/Picture.astro

@@ -1,38 +0,0 @@
----
-import cx from 'classnames';
-
-import { Picture as AstroImageToolsPicture } from 'astro-imagetools/components';
-import type { PictureConfigOptions } from 'astro-imagetools';
-
-interface Props extends PictureConfigOptions {
-	alt: string;
-	aspect: number;
-	breakpoints?: number[];
-	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/5 border-x-0',
-	{ 'mbe-0': noMargin },
-	className
-);
----
-
-<div class={classes}>
-	{
-		src.includes('.svg') ? (
-			<img src={src} {...(props as any)} />
-		) : (
-			<AstroImageToolsPicture
-				breakpoints={[500, 1000, 1500]}
-				format={['avif']}
-				src={src}
-				{...props}
-			/>
-		)
-	}
-</div>

src/components/ProjectImage.astro

@@ -1,6 +1,6 @@
 ---
 import type { CollectionEntry } from 'astro:content';
-import Picture from './Picture.astro';
+import Image from './Image.astro';
 
 interface Props {
 	project: CollectionEntry<'projects'>;
@@ -16,12 +16,9 @@ const { project } = Astro.props;
 				<img class="image-border" alt={project.data.title} src={project.data.image.src} />
 			</div>
 		) : (
-			<Picture
+			<Image
 				alt={project.data.title}
-				aspect={project.data.image.aspectRatio}
-				breakpoints={[500, 1000, 1500]}
 				class="[&_img]:!w-full [&_img]:!max-w-none [&_picture]:!w-full [&_picture]:!max-w-none"
-				format={['avif']}
 				src={project.data.image.src}
 			/>
 		))

src/components/Toolbox.astro

@@ -1,5 +1,5 @@
 ---
-import { Img } from 'astro-imagetools/components';
+import { Image } from 'astro:assets';
 import { Link } from '.';
 
 import type { ToolsProps } from '../data/tools';
@@ -18,16 +18,7 @@ const { tools } = Astro.props;
 		tools.map(({ name, url, image }) => (
 			<li class="print:[&_img]:!hidden">
 				<Link href={url} title={name}>
-					<Img
-						alt={name}
-						aspect={1}
-						breakpoints={[128]}
-						format="webp"
-						height={300}
-						placeholder="tracedSVG"
-						src={image}
-						width={300}
-					/>
+					<Image alt={name} widths={[128]} height={300} src={image} width={300} />
 				</Link>
 			</li>
 		))

src/data/tools.ts

@@ -8,27 +8,27 @@ export const development = [
 	{
 		name: 'Neovim',
 		url: 'https://neovim.io/',
-		image: '/assets/images/tools/neovim.png',
+		image: '/assets/images/tools/webp/neovim.webp',
 	},
 	{
 		name: 'Tmux',
 		url: 'https://tmux.github.io/',
-		image: '/assets/images/tools/tmux.png',
+		image: '/assets/images/tools/webp/tmux.webp',
 	},
 	{
 		name: 'Wezterm',
 		url: 'https://wezfurlong.org/wezterm/',
-		image: '/assets/images/tools/wezterm.png',
+		image: '/assets/images/tools/webp/wezterm.webp',
 	},
 	{
 		name: 'Visual Studio Code',
 		url: 'https://code.visualstudio.com/',
-		image: '/assets/images/tools/visual-studio-code.png',
+		image: '/assets/images/tools/webp/visual-studio-code.webp',
 	},
 	{
 		name: 'Kaleidoscope',
 		url: 'https://kaleidoscope.app/',
-		image: '/assets/images/tools/kaleidoscope.png',
+		image: '/assets/images/tools/webp/kaleidoscope.webp',
 	},
 ];
 
@@ -36,32 +36,32 @@ export const design = [
 	{
 		name: 'Affinity Designer',
 		url: 'https://affinity.serif.com/designer/',
-		image: '/assets/images/tools/affinity-designer.png',
+		image: '/assets/images/tools/webp/affinity-designer.webp',
 	},
 	{
 		name: 'Affinity Photo',
 		url: 'https://affinity.serif.com/photo/',
-		image: '/assets/images/tools/affinity-photo.png',
+		image: '/assets/images/tools/webp/affinity-photo.webp',
 	},
 	{
 		name: 'Affinity Publisher',
 		url: 'https://affinity.serif.com/publisher/',
-		image: '/assets/images/tools/affinity-publisher.png',
+		image: '/assets/images/tools/webp/affinity-publisher.webp',
 	},
 	{
 		name: 'Eagle',
 		url: 'https://eagle.cool/',
-		image: '/assets/images/tools/eagle.png',
+		image: '/assets/images/tools/webp/eagle.webp',
 	},
 	{
 		name: 'Procreate',
 		url: 'https://procreate.com/',
-		image: '/assets/images/tools/procreate.png',
+		image: '/assets/images/tools/webp/procreate.webp',
 	},
 	{
 		name: 'Typeface',
 		url: 'https://typefaceapp.com/',
-		image: '/assets/images/tools/typeface.png',
+		image: '/assets/images/tools/webp/typeface.webp',
 	},
 ];
 
@@ -69,57 +69,57 @@ export const research = [
 	{
 		name: 'iA Writer',
 		url: 'https://ia.net/writer',
-		image: '/assets/images/tools/ia-writer.png',
+		image: '/assets/images/tools/webp/ia-writer.webp',
 	},
 	{
 		name: 'iA Presenter',
 		url: 'https://ia.net/presenter',
-		image: '/assets/images/tools/ia-presenter.png',
+		image: '/assets/images/tools/webp/ia-presenter.webp',
 	},
 	{
 		name: 'Obsidian',
 		url: 'https://obsidian.md/',
-		image: '/assets/images/tools/obsidian.png',
+		image: '/assets/images/tools/webp/obsidian.webp',
 	},
 	{
 		name: 'DEVONthink',
 		url: 'https://www.devontechnologies.com/apps/devonthink',
-		image: '/assets/images/tools/devonthink.png',
+		image: '/assets/images/tools/webp/devonthink.webp',
 	},
 	{
 		name: 'Raindrop.io',
 		url: 'https://raindrop.io/',
-		image: '/assets/images/tools/raindrop.io.png',
+		image: '/assets/images/tools/webp/raindrop.io.webp',
 	},
 	{
 		name: 'Reeder',
 		url: 'https://reeder.app/',
-		image: '/assets/images/tools/reeder.png',
+		image: '/assets/images/tools/webp/reeder.webp',
 	},
 	{
 		name: 'Readwise Reader',
 		url: 'https://readwise.io/read',
-		image: '/assets/images/tools/readwise-reader.png',
+		image: '/assets/images/tools/webp/readwise-reader.webp',
 	},
 	{
 		name: 'Readwise',
 		url: 'https://readwise.io/i/stefan805',
-		image: '/assets/images/tools/readwise.png',
+		image: '/assets/images/tools/webp/readwise.webp',
 	},
 	{
 		name: 'Snipd',
 		url: 'https://www.snipd.com/',
-		image: '/assets/images/tools/snipd.png',
+		image: '/assets/images/tools/webp/snipd.webp',
 	},
 	{
 		name: 'MindNode',
 		url: 'https://www.mindnode.com/',
-		image: '/assets/images/tools/mindnode.png',
+		image: '/assets/images/tools/webp/mindnode.webp',
 	},
 	{
 		name: 'BibDesk',
 		url: 'https://bibdesk.sourceforge.io/',
-		image: '/assets/images/tools/bibdesk.png',
+		image: '/assets/images/tools/webp/bibdesk.webp',
 	},
 ];
 
@@ -127,46 +127,46 @@ export const other = [
 	{
 		name: 'Things',
 		url: 'https://culturedcode.com/things/',
-		image: '/assets/images/tools/things.png',
+		image: '/assets/images/tools/webp/things.webp',
 	},
 	{
 		name: 'Raycast',
 		url: 'https://www.raycast.com/hey/059d78ca',
-		image: '/assets/images/tools/raycast.png',
+		image: '/assets/images/tools/webp/raycast.webp',
 	},
 	{
 		name: 'Arc',
 		url: 'https://arc.net/gift/3a2fd063',
-		image: '/assets/images/tools/arc-browser.png',
+		image: '/assets/images/tools/webp/arc-browser.webp',
 	},
 	{
 		name: 'Brave Browser',
 		url: 'https://brave.com/',
-		image: '/assets/images/tools/brave-browser.png',
+		image: '/assets/images/tools/webp/brave-browser.webp',
 	},
 	{
 		name: 'Proton Mail',
 		url: 'https://proton.me/mail',
-		image: '/assets/images/tools/protonmail.png',
+		image: '/assets/images/tools/webp/protonmail.webp',
 	},
 	{
 		name: 'Proton VPN',
 		url: 'https://protonvpn.com/',
-		image: '/assets/images/tools/protonvpn.png',
+		image: '/assets/images/tools/webp/protonvpn.webp',
 	},
 	{
 		name: 'Proton Pass',
 		url: 'https://proton.me/pass',
-		image: '/assets/images/tools/protonpass.png',
+		image: '/assets/images/tools/webp/protonpass.webp',
 	},
 	{
 		name: 'Yoink',
 		url: 'https://eternalstorms.at/yoink/mac/',
-		image: '/assets/images/tools/yoink.png',
+		image: '/assets/images/tools/webp/yoink.webp',
 	},
 	{
 		name: 'Karabiner-Elements',
 		url: 'https://karabiner-elements.pqrs.org/',
-		image: '/assets/images/tools/karabiner-elements.png',
+		image: '/assets/images/tools/webp/karabiner-elements.webp',
 	},
 ];

src/layouts/AboutLayout.astro

@@ -3,7 +3,7 @@ import { site } from '../data/site';
 
 import GridLayout from './GridLayout.astro';
 import PageTitle from '../components/PageTitle.astro';
-import Picture from '../components/Picture.astro';
+import Image from '../components/Image.astro';
 
 const { frontmatter } = Astro.props;
 const schema = JSON.stringify({
@@ -35,12 +35,7 @@ const schema = JSON.stringify({
 		slot="before-content"
 		class="col-start-1 col-end-12 md:col-start-3 md:col-end-10 xl:col-start-15 xl:col-end-18 xl:row-start-2 xl:-scale-x-100 3xl:col-start-14 3xl:col-end-17"
 	>
-		<Picture
-			alt="Stefan Imhoff"
-			aspect={1}
-			breakpoints={[300, 700, 1000]}
-			src="/assets/images/ai-portrait-stefan-imhoff.jpg"
-		/>
+		<Image alt="Stefan Imhoff" src="/assets/images/ai-portrait-stefan-imhoff.jpg" />
 	</div>
 	<slot />
 	<script type="application/ld+json" set:html={schema} />

src/layouts/PageLayout.astro

@@ -1,6 +1,6 @@
 ---
 import PageTitle from '../components/PageTitle.astro';
-import Picture from '../components/Picture.astro';
+import Image from '../components/Image.astro';
 
 import GridLayout from './GridLayout.astro';
 
@@ -24,12 +24,7 @@ const gridVariant = frontmatter.grid || grid;
 				slot="before-content"
 				class="col-span-full xl:col-start-1 xl:col-end-14 3xl:col-end-13 [&_div]:!border-x-0 [&_div]:!mbe-0 [&_div]:md:!border-s-0"
 			>
-				<Picture
-					alt={frontmatter.title}
-					aspect={1.5}
-					breakpoints={[500, 1000, 1500]}
-					src={frontmatter.cover}
-				/>
+				<Image alt={frontmatter.title} src={frontmatter.cover} />
 			</div>
 		)
 	}

src/mdx-components.ts

@@ -2,7 +2,6 @@ import { YouTube } from '@astro-community/astro-embed-youtube';
 
 import Image from './components/Image.astro';
 import MarkdownImage from './components/MarkdownImage.astro';
-import Picture from './components/Picture.astro';
 import ThemeBox from './components/ThemeBox.astro';
 
 import {
@@ -71,7 +70,6 @@ export const mapping = {
 	OdyseeVideo,
 	ol: OrderedList,
 	p: Text,
-	Picture,
 	PrimeVideoFlag,
 	ProjectIntro,
 	Pullquote,
@@ -102,7 +100,6 @@ export const rssMapping = {
 	MoreLink,
 	NetflixFlag,
 	OdyseeVideo,
-	Picture,
 	PrimeVideoFlag,
 	ProjectIntro,
 	Pullquote,

src/pages/[...slug].astro

@@ -11,7 +11,7 @@ import { dateToFormat, dateToISO, wordCount } from '../utils';
 import GridLayout from '../layouts/GridLayout.astro';
 import PageTitle from '../components/PageTitle.astro';
 import Pagination from '../components/Pagination.astro';
-import Picture from '../components/Picture.astro';
+import Image from '../components/Image.astro';
 import { Banner, ListItem, OrderedList, Tag, TextLink } from '../components';
 
 import { mapping } from '../mdx-components';
@@ -29,7 +29,7 @@ export async function getStaticPaths() {
 				index + 1 === numberOfPages
 					? { slug: null, data: null }
 					: formattedJournalEntries[index + 1],
-			prev: index === 0 ? {} : formattedJournalEntries[index - 1],
+			prev: index === 0 ? { slug: null, data: null } : formattedJournalEntries[index - 1],
 		},
 	}));
 }
@@ -90,12 +90,9 @@ const schema = JSON.stringify({
 	</PageTitle>
 	{
 		entry.data.cover && (
-			<Picture
+			<Image
 				alt={entry.data.title}
-				aspect={1.6}
-				breakpoints={[500, 1000, 1500]}
-				class="col-span-full aspect-video h-auto !mbe-0 print:hidden xl:col-start-1 xl:col-end-14 3xl:col-end-13 [&_img]:!w-full [&_img]:!max-w-none [&_picture]:!w-full [&_picture]:!max-w-none"
-				format={['avif']}
+				class="col-span-full aspect-video h-auto !mbe-0 xl:col-start-1 xl:col-end-14 3xl:col-end-13 print:hidden [&_img]:!w-full [&_img]:!max-w-none [&_picture]:!w-full [&_picture]:!max-w-none"
 				loading="eager"
 				src={entry.data.cover}
 			/>
@@ -165,10 +162,10 @@ const schema = JSON.stringify({
 	</div>
 
 	<Pagination
-		nextText={'Next'}
-		nextUrl={next.slug && `/${next.slug}/`}
-		previousText={'Next'}
-		previousUrl={prev.slug && `/${prev.slug}/`}
+		nextText="Next"
+		nextUrl={next.slug ? `/${next.slug}/` : undefined}
+		previousText="Previous"
+		previousUrl={prev.slug ? `/${prev.slug}/` : undefined}
 	/>
 </GridLayout>
 

src/pages/ai-art.astro

@@ -9,7 +9,7 @@ import { animation } from '../data/site';
 
 import GridLayout from '../layouts/GridLayout.astro';
 import PageTitle from '../components/PageTitle.astro';
-import Picture from '../components/Picture.astro';
+import Image from '../components/Image.astro';
 import { Link } from '../components';
 import { Content as Intro } from '../text/ai-art/intro.mdx';
 
@@ -66,12 +66,9 @@ const description = 'This is a collection of AI art pieces I’ve created with S
 						{...animation}
 					>
 						<Link title={data.title} href={`/ai-art/${slug}/`}>
-							<Picture
+							<Image
 								alt={data.title}
-								aspect={data.images[0].aspectRatio}
-								breakpoints={[500, 1000, 1500]}
 								class="h-full mbe-10 md:w-full md:object-cover md:!mbe-0 [&_img]:!block [&_img]:!h-full [&_img]:border-solid [&_picture]:!block [&_picture]:!h-full"
-								format={['avif']}
 								loading="eager"
 								src={data.images[0].src}
 							/>

src/pages/colophon.mdx

@@ -37,7 +37,6 @@ The source code of this website is available on [GitHub](https://github.com/koga
 - My content is written in [MDX](https://mdxjs.com/), which allows using components in the [Markdown](https://daringfireball.net/projects/markdown/).
 - I use [Tailwind CSS](https://tailwindcss.com/) for my styling and [tailwindcss-logical](https://stevecochrane.github.io/tailwindcss-logical/) to get logical properties.
 - The scroll animations are created with [Sal](https://mciastek.github.io/sal/) and for page transitions I use [Swup](https://swup.js.org/).
-- All images are optimized with [Astro ImageTools](https://github.com/RafidMuhymin/astro-imagetools/).
 - My site search is build with [Pagefind](https://pagefind.app/) using the [Astro-Pagefind](https://github.com/shishkin/astro-pagefind) integration.
 - I use YouTube Lite, provided by [Astro Embed](https://github.com/astro-community/astro-embed).
 - [Astro SEO](https://github.com/jonasmerlin/astro-seo) makes it easy to add the SEO relevant information.

src/pages/index.astro

@@ -8,7 +8,7 @@ import { site, animation, animationDelay } from '../data/site';
 import GridLayout from '../layouts/GridLayout.astro';
 
 import PageTitle from '../components/PageTitle.astro';
-import Picture from '../components/Picture.astro';
+import Image from '../components/Image.astro';
 import JournalList from '../components/JournalList.astro';
 
 /* FIXME: Remove hack as soon as this issue is resolved:
@@ -46,13 +46,7 @@ rssPosts.sort(sortMarkdownByDate);
 	<div
 		class="col-start-1 col-end-19 md:col-start-1 md:col-end-11 xl:col-end-11 [&_div]:!border-x-0 [&_div]:!mbe-0 [&_div]:md:!border-s-0"
 	>
-		<Picture
-			alt="Bonsai"
-			aspect={1.5}
-			breakpoints={[500, 1000, 1500]}
-			loading="eager"
-			src="/assets/images/cover/bonsai.jpg"
-		/>
+		<Image alt="Bonsai" loading="eager" src="/assets/images/cover/bonsai.jpg" />
 	</div>
 
 	<article

src/pages/sketchnotes.astro

@@ -8,7 +8,7 @@ import { animation } from '../data/site';
 
 import GridLayout from '../layouts/GridLayout.astro';
 import PageTitle from '../components/PageTitle.astro';
-import Picture from '../components/Picture.astro';
+import Image from '../components/Image.astro';
 import { Link } from '../components';
 import { Content as Intro } from '../text/sketchnotes/intro.mdx';
 
@@ -25,7 +25,7 @@ const description = 'This is a collection of Sketchnotes I’ve drawn.';
 	<PageTitle grid="wide" innerGrid>Sketchnotes</PageTitle>
 
 	<article
-		class="col-start-1 col-end-17 grid print:block md:col-start-4 md:col-end-12 xl:col-start-5 xl:col-end-11"
+		class="col-start-1 col-end-17 grid md:col-start-4 md:col-end-12 xl:col-start-5 xl:col-end-11 print:block"
 		{...animation}
 	>
 		<Intro components={mapping} />
@@ -37,7 +37,7 @@ const description = 'This is a collection of Sketchnotes I’ve drawn.';
 		data-pagefind-ignore
 	>
 		<ol
-			class="gap-[max(25px,_2vw)] print:block md:grid md:grid-flow-row-dense md:auto-rows-[50px] md:grid-cols-[repeat(auto-fit,_minmax(50px,_1fr))] md:grid-rows-[50px]"
+			class="gap-[max(25px,_2vw)] md:grid md:grid-flow-row-dense md:auto-rows-[50px] md:grid-cols-[repeat(auto-fit,_minmax(50px,_1fr))] md:grid-rows-[50px] print:block"
 		>
 			{
 				allSketchnotes.map(({ slug, data }) => (
@@ -59,12 +59,9 @@ const description = 'This is a collection of Sketchnotes I’ve drawn.';
 						{...animation}
 					>
 						<Link title={data.title} href={`/sketchnotes/${slug}/`}>
-							<Picture
+							<Image
 								alt={data.title}
-								aspect={data.images[0].aspectRatio}
-								breakpoints={[500, 1000, 1500]}
 								class="h-full mbe-10 md:w-full md:object-cover md:!mbe-0 [&_img]:!block [&_img]:!h-full [&_img]:border-solid [&_picture]:!block [&_picture]:!h-full"
-								format={['avif']}
 								loading="eager"
 								src={data.images[0].src}
 							/>