In-browser image optimizer
Resize an image before you compress it
Half of “my images are too heavy” is really “my images are too large”. Scaling a 4000-pixel photo down to the 1600 pixels the layout actually uses removes most of the bytes before the encoder even starts — and makes the result sharper than letting the browser shrink it at display time.
Resize in three steps
- Open the imageThe original dimensions are shown next to the file size, so you can see how much you are carrying.
- Set the width or heightTurn on Resize in the processor panel and enter the width you need; the height follows the aspect ratio. Enable “fit method” to control cropping versus letterboxing.
- Then pick the formatResizing happens before encoding, so the quality slider and the codec comparison both act on the scaled image.
What size should you use?
Match the largest size the layout will ever display, doubled for high-density screens: a 400-pixel-wide card needs an 800-pixel asset. Anything beyond that is downloaded and immediately thrown away.
Downscale, never upscale
Reducing dimensions discards detail you were not showing anyway. Increasing them cannot invent detail — it only makes the file larger, so resize downwards and let the browser scale up if a huge monitor asks for it.
What to expect
| Target | Typical width | Notes |
|---|---|---|
| Full-width hero | 1600–2000 px | Includes 2× screens |
| Article image | 1200 px | Covers most content widths |
| Card thumbnail | 600–800 px | 2× of a 300–400 px slot |
| Social preview | 1200×630 px | Open Graph size |
| Favicon | 512×512 px | PWA icon size |
Questions
Does resizing change the file format?
No. Resize is a processing step that runs before encoding; the format is chosen separately in the encoder panel.
What resampling method is used?
A high-quality Lanczos filter, the same family of kernels desktop editors use for downscaling.
Can I crop instead of scale?
Yes — choose the “cover” fit method to crop to the new aspect ratio instead of fitting the whole image inside it.