Tutorial6 min read·Updated

Remix / React Router: Serve WebP Images

Remix ships files from `public/` as-is. There is no built-in Sharp step. Convert static images to WebP yourself, then reference them in routes. For user uploads, convert on the server or with the API.

You own the files in public/

A PNG in public/img is a PNG on the network. Replace it with WebP and update src. Use <img srcset> or sizes for responsive width.

Why it matters

  • No hidden optimiser means no hidden cost — and no free conversion.
  • Marketing pages still have LCP images.
  • Fly/Render bandwidth is visible on the invoice.

How to do it

  1. Bulk convert public/img.
  2. Update JSX src to .webp.
  3. Add a JPEG <source> only if you still need IE-era clients.

Settings that work

1920 px heroes / 78%. Content 1200 / 82%.

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

Not by default. Use this converter for static files or a Sharp loader for uploads.

Same model: static files are static. Convert them.

Keep reading

Tutorial6 min read

WebP in Next.js

next/image can serve WebP, but huge files in /public still hurt. How to pre-convert static assets and CMS images for Next.js App Router.

Read more
Tutorial6 min read

picture element + WebP

Use <picture> to serve WebP with a JPEG fallback. When you still need it in 2026, and how to generate both files in one workflow.

Read more
Tutorial6 min read

WebP in SvelteKit

SvelteKit + Vite can transform imports. Pre-convert large photos so Vite plugins and adapters stay fast.

Read more