build: optimize SVG assets during production builds

README.md

@@ -22,7 +22,7 @@ requests-per-second velocity gauge in the hero.
 | ------------------ | ------------------------------------------------------------------------------------------------------------------------ |
 | `npm install`     | Install dependencies                                                                                                     |
 | `npm run dev`     | Start the dev server at `localhost:4321`                                                                                 |
-| `npm run build:website` | Build to `build/` and generate the Pagefind search index                                                        |
+| `npm run build:website` | Build to `build/`, optimize production images, and generate the Pagefind search index                                     |
 | `npm run preview` | Preview the production build locally                                                                                     |
 | `npm run lint`    | Lint with [Biome](https://biomejs.dev)                                                                                   |
 | `npm run format`  | Format with Biome (`format` to verify)                                                                                   |
@@ -32,6 +32,9 @@ requests-per-second velocity gauge in the hero.
 > Pagefind index is generated from the built HTML. In `dev` the search modal
 > shows a graceful fallback message.
 >
+> Production builds optimize imported SVG components with Astro and all supported
+> bundled and public image assets with Vite. Source image files are not modified.
+>
 > Icons come from [Lucide](https://lucide.dev) (`@lucide/astro`). The GitHub
 > star count is fetched client-side on page load so it always matches GitHub.
 > Internal links respect Astro's `base` via the `withBase` helper in

astro.config.mjs

@@ -3,9 +3,10 @@ import { unified } from "@astrojs/markdown-remark";
 import mdx from "@astrojs/mdx";
 import sitemap from "@astrojs/sitemap";
 import tailwindcss from "@tailwindcss/vite";
-import { defineConfig } from "astro/config";
+import { defineConfig, svgoOptimizer } from "astro/config";
 import astroInference from "astro-inference";
 import pagefind from "astro-pagefind";
+import { ViteImageOptimizer } from "vite-plugin-image-optimizer";
 import baseConfig from "./astro.base.config.mjs";
 import { rehypeCodeCopy } from "./src/lib/rehype-code-copy.mjs";
 import { remarkReadingTime } from "./src/lib/remark-reading-time.mjs";
@@ -21,6 +22,9 @@ export default defineConfig({
 	site: "https://fastify.dev",
 	base: baseConfig.base,
 	outDir: "./build",
+	experimental: {
+		svgOptimizer: svgoOptimizer({ multipass: true }),
+	},
 	markdown: {
 		shikiConfig: {
 			themes: {
@@ -49,6 +53,12 @@ export default defineConfig({
 		}),
 	],
 	vite: {
-		plugins: [tailwindcss()],
+		plugins: [
+			tailwindcss(),
+			ViteImageOptimizer({
+				includePublic: true,
+				svg: { multipass: true },
+			}),
+		],
 	},
 });

package.json

@@ -44,6 +44,8 @@
 		"pagefind": "^1.5.2",
 		"pino": "^10.3.1",
 		"pino-pretty": "^13.1.3",
-		"typescript": "^5.9.3"
+		"svgo": "^4.0.2",
+		"typescript": "^5.9.3",
+		"vite-plugin-image-optimizer": "^2.0.3"
 	}
 }