refactor: reduce the amount of image formats and sizes

Use the least amount of image formats and sizes:

- WebP for images
- Avif with JPEG fallback for pictures

src/components/GalleryDetail.astro

@@ -53,8 +53,8 @@ const imageLength = entry.data.images.length;
 					<Picture
 						alt={entry.data.title}
 						aspect={entry.data.aspect}
-						breakpoints={[300, 500, 700, 1000, 1280]}
+						breakpoints={[500, 1000, 1500]}
-						format={['webp', 'avif']}
+						format={['avif']}
 						src={src}
 					/>
 				</div>

src/components/Image.astro

@@ -26,7 +26,13 @@ const imageClasses =
 		src.includes('.svg') ? (
 			<img class={imageClasses} src={src} {...(props as any)} />
 		) : (
-			<Img src={src} attributes={{ class: imageClasses }} {...props} />
+			<Img
+				attributes={{ class: imageClasses }}
+				breakpoints={[500, 1000, 1500]}
+				format="webp"
+				src={src}
+				{...props}
+			/>
 		)
 	}
 </div>

src/components/JournalList.astro

@@ -30,10 +30,11 @@ const { entries } = Astro.props;
 								<img src={data.cover} alt={data.title} />
 							) : (
 								<Picture
-									src={data.cover}
 									alt={data.title}
 									aspect={0.6}
-									breakpoints={[300, 512, 768, 1024]}
+									breakpoints={[300, 500, 1000]}
+									format={['avif']}
+									src={data.cover}
 								/>
 							)}
 						</>

src/components/MarkdownImage.astro

@@ -19,5 +19,11 @@ const classes = cx(
 ---
 
 <div class={classes}>
-	{src.includes('.svg') ? <img src={src} {...props} /> : <Img src={src} {...props} />}
+	{
+		src.includes('.svg') ? (
+			<img src={src} {...props} />
+		) : (
+			<Img breakpoints={[500, 1000, 1500]} format="webp" src={src} {...props} />
+		)
+	}
 </div>

src/components/Picture.astro

@@ -24,7 +24,7 @@ const classes = cx(
 		src.includes('.svg') ? (
 			<img src={src} {...(props as any)} />
 		) : (
-			<Picture src={src} {...props} />
+			<Picture breakpoints={[500, 1000, 1500]} format={['avif']} src={src} {...props} />
 		)
 	}
 </div>

src/components/ProjectImage.astro

@@ -19,9 +19,9 @@ const { project } = Astro.props;
 			<Picture
 				alt={project.data.title}
 				aspect={project.data.image.aspectRatio}
-				breakpoints={[300, 500, 700, 1000, 1200, 1500]}
+				breakpoints={[500, 1000, 1500]}
 				class="[&_img]:!w-full [&_img]:!max-w-none [&_picture]:!w-full [&_picture]:!max-w-none"
-				format={['webp', 'avif']}
+				format={['avif']}
 				src={project.data.image.src}
 			/>
 		))

src/components/Toolbox.astro

@@ -21,7 +21,8 @@ const { tools } = Astro.props;
 					<Img
 						alt={name}
 						aspect={1}
-						format="avif"
+						breakpoints={[128]}
+						format="webp"
 						height={300}
 						placeholder="tracedSVG"
 						src={image}

src/layouts/AboutLayout.astro

@@ -38,7 +38,7 @@ const schema = JSON.stringify({
 		<Picture
 			alt="Stefan Imhoff"
 			aspect={1}
-			breakpoints={[300, 512]}
+			breakpoints={[300, 700, 1000]}
 			src="/assets/images/ai-portrait-stefan-imhoff.png"
 		/>
 	</div>

src/layouts/PageLayout.astro

@@ -27,7 +27,7 @@ const gridVariant = frontmatter.grid || grid;
 				<Picture
 					alt={frontmatter.title}
 					aspect={1.5}
-					breakpoints={[300, 512, 768, 1024, 1280, 1536, 1700, 2000]}
+					breakpoints={[500, 1000, 1500]}
 					src={frontmatter.cover}
 				/>
 			</div>

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

@@ -93,9 +93,9 @@ const schema = JSON.stringify({
 			<Picture
 				alt={entry.data.title}
 				aspect={1.6}
-				breakpoints={[300, 500, 700, 1000, 1300, 1500, 1800, 2000]}
+				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={['webp', 'avif']}
+				format={['avif']}
 				src={entry.data.cover}
 			/>
 		)

src/pages/ai-art.astro

@@ -67,8 +67,8 @@ const description = 'This is a collection of AI art pieces I’ve created with S
 								src={data.images[0].src}
 								alt={data.title}
 								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={['webp', 'avif']}
+								format={['avif']}
-								breakpoints={[300, 500, 700, 1000, 1280]}
+								breakpoints={[500, 1000, 1500]}
 							/>
 						</Link>
 					</li>

src/pages/index.astro

@@ -40,7 +40,7 @@ const description = 'Front-End Web Developer from Hamburg, Germany';
 		<Picture
 			alt="Bonsai"
 			aspect={1.5}
-			breakpoints={[300, 512, 768, 1024, 1280, 1536, 1700, 2000]}
+			breakpoints={[500, 1000, 1500]}
 			src="/assets/images/cover/bonsai.jpg"
 		/>
 	</div>

src/pages/sketchnotes.astro

@@ -63,8 +63,8 @@ const description = 'This is a collection of Sketchnotes I’ve drawn.';
 								src={data.images[0].src}
 								alt={data.title}
 								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={['webp', 'avif']}
+								format={['avif']}
-								breakpoints={[300, 500, 700, 1000, 1280]}
+								breakpoints={[500, 1000, 1500]}
 							/>
 						</Link>
 					</li>