Tutorial6 min read·Updated

SvelteKit Images: WebP for Static and Dynamic Routes

vite-imagetools and `@sveltejs/enhanced-img` help. They still decode your source. Convert blog and marketing photos to WebP at 1600 px and both build and runtime stay lighter.

Imported assets vs static

Files imported from $lib/assets can be processed. Files in static/ are copied. Convert both: processed imports get a better source; static copies are already WebP.

Why it matters

  • Adapters (Cloudflare, Node) have size and CPU limits.
  • Portfolio sites store many large PNGs in git.
  • Enhanced img still benefits from a sane max width.

How to do it

  1. Convert static/ and authoring folders.
  2. Keep enhanced:img for srcset.
  3. Do not commit 10 MB sources 'just in case'.

Settings that work

1600 px / 80% general. 1920 / 75% full-bleed.

Convert a batch in your browser. Nothing is uploaded.
Open the converter

Put it into practice

Convert your images to WebP right now, free and privately in your browser.

Open the converter

Frequently asked questions

Only if you use an image plugin or already committed WebP.

You can. Local conversion is simpler and keeps git smaller.

Keep reading

Tutorial6 min read

WebP in Astro

Astro can transform images at build time. Pre-convert large photos to WebP so builds stay fast and pages stay light.

Read more
Tutorial6 min read

WebP in Remix

Remix does not magically convert images. Pre-convert public assets to WebP and use srcset or a loader you control.

Read more
Workflow6 min read

Portfolio photos to WebP

How photographers can convert portfolio JPEGs to WebP without flattening grain or killing blacks.

Read more