Bildoptimierung mit einem WASM-Build-Pipeline 2025 automatisieren — esbuild und Lightning CSS in der Praxis

{
  "hero-landing": {
    "source": "assets/hero-source.tif",
    "variants": [
      { "format": "avif", "width": 1600, "quality": 0.82 },
      { "format": "webp", "width": 1200, "quality": 0.88 },
      { "format": "jpeg", "width": 800, "quality": 0.92, "icc": "profiles/display-p3.icc" }
    ],
    "responsive": {
      "breakpoints": ["(min-width: 1280px) 1200px", "(min-width: 768px) 65vw", "100vw"],
      "density": ["1x", "2x"]
    }
  }
}

// build/plugins/image-pipeline.ts
import { Plugin } from 'esbuild'
import { readFile } from 'node:fs/promises'
import { runPipeline } from '../wasm/run-pipeline'

export const imagePipeline = (): Plugin => ({
  name: 'image-pipeline',
  setup(build) {
    build.onStart(async () => {
      const manifest = JSON.parse(await readFile('assets.manifest.json', 'utf-8'))
      await runPipeline(manifest)
    })
  }
})

// build/wasm/run-pipeline.ts
import { Worker } from 'node:worker_threads'
import os from 'node:os'

const workerCount = Math.max(1, Math.min(os.cpus().length - 1, 4))

export async function runPipeline(manifest: Record<string, any>) {
  const entries = Object.entries(manifest)
  await Promise.all(entries.map(([id, config]) => dispatchWorker(id, config)))
}

function dispatchWorker(id: string, config: any) {
  return new Promise((resolve, reject) => {
    const worker = new Worker(new URL('./workers/image-worker.ts', import.meta.url), {
      workerData: { id, config }
    })
    worker.once('message', resolve)
    worker.once('error', reject)
    worker.once('exit', code => code !== 0 && reject(new Error(`worker ${id} exited ${code}`)))
  })
}

// build/wasm/workers/image-worker.ts
import { parentPort, workerData } from 'node:worker_threads'
import { createRequire } from 'node:module'
const require = createRequire(import.meta.url)

const squoosh = require('@squoosh/lib')
const avif = require('@squoosh/avif')

(async () => {
  const { id, config } = workerData
  const { source, variants } = config
  const jobs = variants.map(async variant => {
    const image = await squoosh.ImagePool.fromPath(source)
    await image.encode({
      [variant.format]: {
        quality: Math.round(variant.quality * 100),
        effort: 7
      }
    })
    await image.save(`public/images/${id}-${variant.width}.${variant.format}`)
  })
  await Promise.all(jobs)
  parentPort?.postMessage({ id, ok: true })
})()

// build/styles/picture-plugin.ts
import { readFileSync } from 'node:fs'
import { transform } from 'lightningcss'
import manifest from '../../asset-map.json'

export function injectImageSets(cssPath: string) {
  const css = readFileSync(cssPath)
  const result = transform({
    filename: cssPath,
    code: css,
    drafts: { nesting: true },
    visitor: {
      Rule(rule) {
        if (!rule.selectors.includes('.hero-visual')) return
        const sources = manifest['hero-landing'].imageSet
        rule.declarations.push({
          kind: 'declaration',
          property: 'background-image',
          value: {
            type: 'value',
            value: `image-set(${sources.join(', ')})`
          }
        })
      }
    }
  })
  return result.code
}

# .github/workflows/build.yml
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npm run build:images
      - run: npm run test:visual
      - run: npm run sign:fallback
      - uses: actions/upload-artifact@v4
        with:
          name: wasm-assets
          path: public/images