From af47ce29567913c72efc66dbc465064382ac3e80 Mon Sep 17 00:00:00 2001 From: Luca Del Puppo Date: Fri, 21 Aug 2026 12:22:37 +0000 Subject: [PATCH 1/2] build: optimize SVG assets during production builds Signed-off-by: Luca Del Puppo --- README.md | 5 ++++- astro.config.mjs | 15 +++++++++++++-- package-lock.json | 48 ++++++++++++++++++++++++++++++++++++++++++++++- package.json | 4 +++- 4 files changed, 67 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 67c58e63..9dcaa79d 100644 --- a/README.md +++ b/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 SVGs, 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 organization +> logos copied from `public/` with Vite. Source SVG 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 diff --git a/astro.config.mjs b/astro.config.mjs index ee7e96f6..0616b23f 100644 --- a/astro.config.mjs +++ b/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,13 @@ export default defineConfig({ }), ], vite: { - plugins: [tailwindcss()], + plugins: [ + tailwindcss(), + ViteImageOptimizer({ + include: /organizations[\\/].*\.svg$/i, + includePublic: true, + svg: { multipass: true }, + }), + ], }, }); diff --git a/package-lock.json b/package-lock.json index b64b930d..a6585d4b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -36,7 +36,9 @@ "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" } }, "node_modules/@asamuzakjp/css-color": { @@ -3928,6 +3930,16 @@ "am-i-vibing": "dist/cli.mjs" } }, + "node_modules/ansi-colors": { + "version": "4.1.3", + "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz", + "integrity": "sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6" + } + }, "node_modules/ansi-regex": { "version": "6.3.0", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.3.0.tgz", @@ -7473,6 +7485,13 @@ "dev": true, "license": "MIT" }, + "node_modules/pathe": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz", + "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==", + "dev": true, + "license": "MIT" + }, "node_modules/piccolore": { "version": "0.1.3", "resolved": "https://registry.npmjs.org/piccolore/-/piccolore-0.1.3.tgz", @@ -9099,6 +9118,33 @@ } } }, + "node_modules/vite-plugin-image-optimizer": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/vite-plugin-image-optimizer/-/vite-plugin-image-optimizer-2.0.3.tgz", + "integrity": "sha512-1vrFOTcpSvv6DCY7h8UXab4wqMAjTJB/ndOzG/Kmj1oDOuPF6mbjkNQoGzzCEYeWGe7qU93jc8oQqvoJ57al3A==", + "dev": true, + "license": "MIT", + "dependencies": { + "ansi-colors": "^4.1.3", + "pathe": "^2.0.3" + }, + "engines": { + "node": ">=18.17.0" + }, + "peerDependencies": { + "sharp": ">=0.34.0", + "svgo": ">=4", + "vite": ">=5" + }, + "peerDependenciesMeta": { + "sharp": { + "optional": true + }, + "svgo": { + "optional": true + } + } + }, "node_modules/vite/node_modules/lightningcss": { "version": "1.33.0", "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.33.0.tgz", diff --git a/package.json b/package.json index 16990835..7790639c 100644 --- a/package.json +++ b/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" } } From 2c6a0c700ef36e5da27156fbe5ce87ed51ee3f31 Mon Sep 17 00:00:00 2001 From: Luca Del Puppo Date: Fri, 21 Aug 2026 13:35:25 +0000 Subject: [PATCH 2/2] build: optimize all production images Signed-off-by: Luca Del Puppo --- README.md | 6 +++--- astro.config.mjs | 1 - 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 9dcaa79d..240a8d31 100644 --- a/README.md +++ b/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/`, optimize production SVGs, 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,8 +32,8 @@ 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 organization -> logos copied from `public/` with Vite. Source SVG files are not modified. +> 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. diff --git a/astro.config.mjs b/astro.config.mjs index 0616b23f..5b8337ae 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -56,7 +56,6 @@ export default defineConfig({ plugins: [ tailwindcss(), ViteImageOptimizer({ - include: /organizations[\\/].*\.svg$/i, includePublic: true, svg: { multipass: true }, }),