Downscaling Is the Cheapest Optimization There Is
A 4000px camera photo displayed in a 400px column sends ten times the pixels anyone will see, in both directions, so the browser downloads roughly a hundred times the data the layout can use. Resizing to the displayed size, or double it for high-DPI screens, cuts more page weight than any format trick, before compression even enters the picture.
The resizer keeps your file's own format on the way out: JPG stays JPG, WebP stays WebP, everything else lands as PNG. The quality slider applies to the lossy formats; PNG ignores it.
Numbers worth knowing
| Target | A sane width |
|---|---|
| Full-width hero image | 1600 to 2000 px |
| Article or card image | 800 to 1200 px |
| Avatar or thumbnail | 160 to 400 px |
| Open Graph preview | 1200 x 630 px exactly |
Upscaling, honestly
The 200% preset works, but interpolation can't invent detail; a doubled photo is a smoother, softer version of the same information. It's fine for a background or a quick mockup, not for print. When you need genuinely more pixels from vector art, skip the upscale entirely and re-rasterize the SVG at the size you want.
Once the dimensions are right, WebP conversion is usually the second half of the job.