The markup
Put a source type="image/webp" first, then an img JPEG/PNG fallback. Browsers pick the first supported source. This is still the correct progressive-enhancement pattern for conservative enterprises.
Why it matters
- Some intranet browsers and export-to-PDF tools are picky.
- OG scrapers vary; many now accept WebP, some prefer JPEG/PNG.
- You may have a legal requirement to support a specific old browser.
How to do it
- Convert the batch to WebP at your target width.
- If you need fallbacks, export a second JPEG pass at quality 75 from the same originals (or keep the original JPEG).
- Wrap with
<picture>and set width/height on<img>to prevent CLS.
Settings that work
WebP 80%. Fallback JPEG 75%. Same max width so layout matches.
When you can skip picture
If your analytics show zero IE / old-iOS traffic, a single <img src="…webp"> is simpler and enough. Do not cargo-cult fallbacks on a 2026 consumer site.