optimize image handling

Author: polent

.claude/settings.json

@@ -0,0 +1,9 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(node -e ':*)",
+      "Read(//c/Projekte/XE/recipe/{split\\($1, a, \"M\"\\); total=a[1]; print \"Total in dist/**)",
+      "Read(//c/Projekte/XE/recipe/{split\\($1, a, \"M\"\\); images=a[1]; print \"Total in dist/img/**)"
+    ]
+  }
+}

.github/workflows/jekyll-gh-pages.yml

@@ -38,34 +38,29 @@ jobs:
           node-version: ${{ env.NODE_VERSION }}
           cache: 'npm'
 
-      - name: Cache Eleventy build artifacts
+      - name: Cache Eleventy incremental build state
         uses: actions/cache@v4
         with:
-          path: |
-            dist
-            .cache
-            _site
-          key: eleventy-build-${{ runner.os }}-${{ hashFiles('src/**/*', 'content/**/*', 'media/**/*', 'eleventy.config.js', 'postcss.config.js', 'package-lock.json') }}
+          path: .cache
+          key: eleventy-build-${{ runner.os }}-${{ hashFiles('eleventy.config.js', 'package-lock.json') }}-${{ github.sha }}
           restore-keys: |
-            eleventy-build-${{ runner.os }}-${{ hashFiles('eleventy.config.js', 'postcss.config.js', 'package-lock.json') }}
-      
+            eleventy-build-${{ runner.os }}-${{ hashFiles('eleventy.config.js', 'package-lock.json') }}-
+
       - name: Cache processed images
         uses: actions/cache@v4
         with:
-          path: |
-            dist/img
-            .cache/img
-          key: eleventy-img-${{ runner.os }}-${{ hashFiles('media/**/*', 'src/_11ty/shortcodes.js') }}
+          path: dist/img
+          key: eleventy-img-${{ runner.os }}-${{ hashFiles('src/_11ty/shortcodes.js') }}-${{ github.sha }}
           restore-keys: |
-            eleventy-img-${{ runner.os }}-${{ hashFiles('media/**/*') }}
-      
+            eleventy-img-${{ runner.os }}-${{ hashFiles('src/_11ty/shortcodes.js') }}-
+
       - name: Cache CSS build
         uses: actions/cache@v4
         with:
           path: dist/styles
-          key: css-build-${{ runner.os }}-${{ hashFiles('src/site.css', 'src/_styles/**/*', 'postcss.config.js') }}
+          key: css-build-${{ runner.os }}-${{ hashFiles('postcss.config.js') }}-${{ github.sha }}
           restore-keys: |
-            css-build-${{ runner.os }}-${{ hashFiles('postcss.config.js') }}
+            css-build-${{ runner.os }}-${{ hashFiles('postcss.config.js') }}-
       
       - name: Install dependencies
         run: npm ci

src/_11ty/shortcodes.js

@@ -1,4 +1,18 @@
 const Image = require("@11ty/eleventy-img");
+const fs = require("fs");
+
+const imageOptions = {
+	widths: [320, 640, 960, 1280, 1600],
+	formats: ["avif", "webp"],
+	urlPath: "/img/",
+	outputDir: "./dist/img/",
+	sharpAvifOptions: {
+		quality: 50,
+	},
+	sharpWebpOptions: {
+		quality: 65,
+	},
+};
 
 const picture = async function (
 	src,
@@ -8,18 +22,14 @@ const picture = async function (
 	sizes = "(min-width: 64rem) 1024px, 100vw",
 	fetchpriority = undefined
 ) {
-	const metadata = await Image(src, {
-		widths: [320, 640, 960, 1280, 1600],
-		formats: ["avif", "webp"],
-		urlPath: "/img/",
-		outputDir: "./dist/img/",
-		sharpAvifOptions: {
-			quality: 50,
-		},
-		sharpWebpOptions: {
-			quality: 65,
-		},
-	});
+	// Use statsSync to compute expected output filenames without processing
+	const stats = Image.statsSync(src, imageOptions);
+	const allExist = Object.values(stats)
+		.flat()
+		.every((s) => fs.existsSync(`${imageOptions.outputDir}${s.filename}`));
+
+	// Skip expensive Sharp processing if all output files already exist (e.g. from CI cache)
+	const metadata = allExist ? stats : await Image(src, imageOptions);
 
 	const imageAttributes = {
 		title,