Width first, codec second
A 4000 px WebP is still a 4000 px decode. Cap width, then pick quality. This table is the default we use when a client has no design system.
Why it matters
- Camera defaults are 4000–6000 px.
- CSS can only hide the problem visually.
- srcset needs a reasonable largest candidate.
How to do it
- Map each template's largest image CSS width.
- Multiply by 1.5 if you want simple retina without 3×.
- Convert the folder to WebP at that max width.
| Role | Max width | WebP quality |
|---|---|---|
| Inline article | 1200–1600 px | 80–85% |
| Full-bleed hero | 1920–2400 px | 72–80% |
| Card / thumb | 600–800 px | 75–80% |
| Avatar | 200–400 px | 80% |
| OG card (JPEG) | 1200 px | n/a — use JPEG |