Static HTML

Use ImageForge CLI with static HTML

Complete a framework-free first integration using generated static assets.

1. Preview and generate

Start with public/images/hero.jpg and preview the bounded derivative set before generating it. Published version 0.1.10 keeps --dry-run filesystem-pure: it does not write derivatives, the manifest, cache state, output directories, or cache locks.

npx @imageforge/cli@0.1.10 ./public/images --formats webp,avif --widths 320,640,960,1280 --dry-run
npx @imageforge/cli@0.1.10 ./public/images --formats webp,avif --widths 320,640,960,1280

2. Inspect the manifest and files

Use imageforge.json as the source of truth for effective widths and paths. Requested widths are targets, so do not assume every candidate below exists when the original is smaller.

public/images/
├── hero.jpg
├── hero.w320.avif
├── hero.w320.webp
├── hero.w640.avif
└── hero.w640.webp

3. Render native responsive markup

Build each srcset from the variants recorded in imageforge.json. This abbreviated markup shows the resulting browser contract for candidates that actually exist; keep the original source as the final fallback.

<picture>
  <source
    type="image/avif"
    srcset="/images/hero.w320.avif 320w, /images/hero.w640.avif 640w"
    sizes="(min-width: 48rem) 50vw, 100vw"
  />
  <source
    type="image/webp"
    srcset="/images/hero.w320.webp 320w, /images/hero.w640.webp 640w"
    sizes="(min-width: 48rem) 50vw, 100vw"
  />
  <img src="/images/hero.jpg" width="1200" height="800" alt="Product dashboard" />
</picture>

4. Verify before deploy

Published version 0.1.10 exits with code 1 when source, cache, output, or manifest state is stale. Check mode does not write project state. Preview the page at its real breakpoints and use the browser network panel to confirm a generated AVIF or WebP candidate is selected.

npx @imageforge/cli@0.1.10 ./public/images --formats webp,avif --widths 320,640,960,1280 --check