Resize WebP Images
Resize WebP images to the width your layout actually displays, so pages do not download more pixels than they show.
How to resize WebP Images
- 01.
Add your WebP images.
- 02.
Enter the target width and height, or choose a preset.
- 03.
Process and download.
Match the display size
A 4000-pixel image shown in an 800-pixel column wastes bandwidth. Resizing WebP images to the width they are displayed at, or twice that for high-density screens, keeps pages fast.
Proportions and transparency
Fit without cropping places each image inside your frame without stretching; Crop to exact size fills a banner shape exactly. Transparent areas are preserved in both.
Widths for common web layouts
Export twice the displayed width so images stay sharp on high-density screens:
| Image in your layout | Displayed width | Export width |
|---|---|---|
| Full-width banner | 1920 px | 1920 px (or 2560 px for very large screens) |
| Content column | 800 px | 1600 px |
| Product or card image | 400 px | 800 px |
| Link preview image | 1200 × 630 px | 1200 × 630 px |
Common problems and how to fix them
The image looks blurry on phones
It was exported at exactly the displayed width. Phones need about twice as many pixels; export at 2× the layout width.
The banner shape does not match my theme
Type the exact banner size and choose “Crop to exact size”. The preview shows which part is kept.
Pages are still slow
After resizing, continue to Compress and choose 75–85 quality.
🔗 Keep going without uploading again
Finish with Compress to choose the final quality and see the exact file size.
Related tools
Frequently Asked Questions
We answer your questions about privacy, features, and limits.