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. With several files loaded, the width you type applies to the first image and the rest scale by the same factor, so nothing gets distorted.
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 drop the SVG on the PNG converter instead.
Once the dimensions are right, the WebP converter is usually the second half of the job.