The short answer
Find out how wide the image appears on your page, export it at that width (or twice that for sharp retina screens), choose WebP or JPG for photos and PNG for graphics with sharp edges or transparency, and compress it until it is small without visible damage.
Resize first, then compress. Reducing the pixel dimensions has the biggest effect on file size.
How many pixels do you need?
Look at the largest width the image is displayed at on your site. A full-width banner may be 1200 to 1600 pixels wide on a laptop, an article image perhaps 800, and a small thumbnail 300 or less. High-density screens show sharper images if the file is about twice the displayed width, but going beyond that adds weight without adding quality.
| Image use | Typical displayed width | File width to export (retina) |
|---|---|---|
| Full-width banner | 1200–1600 px | 2400–3200 px, or less if the weight is too high |
| Article image | 700–900 px | 1400–1800 px |
| Thumbnail | 300 px | 600 px |
| Logo or icon | 100–200 px | Use SVG when possible |
Choose the right format
| Format | Use it for | Notes |
|---|---|---|
| WebP | Photos and graphics | Small files, supported by current browsers |
| JPG | Photos | Widely supported, no transparency |
| PNG | Screenshots, logos, transparency | Larger files for photos |
| SVG | Logos and icons | Scales to any size |
Step by step
- Open the Image Resizer and choose your image.
- Keep the aspect ratio locked and enter the new width. Use the 25%, 50% or 75% presets for quick reductions.
- Pick the output format and quality.
- Resize and download.
- If the file is still heavy, run it through the image compressor.
Good habits
- Keep the original in full size and save resized copies for the web.
- Give the image a descriptive file name and alt text.
- Set width and height on the image element so the page does not jump while loading.
- Remove location metadata from photos before publishing.
Frequently asked questions
What size should website images be?
About the width they are displayed at, or up to twice that for high-density screens. Many article images are 800 to 1800 pixels wide.
Is WebP better than JPG?
WebP usually gives smaller files at similar quality and is supported by current browsers. JPG remains a safe, universal choice for photos.
How do I reduce image file size without losing quality?
Resize to the displayed dimensions first, then compress with a moderate quality setting.
Should I use PNG or JPG?
Use JPG or WebP for photos, and PNG for screenshots, logos and graphics that need sharp edges or transparency.
Is my image uploaded when I resize it?
No. The resizer works in your browser.
Try these tools
Image Resizer
Resize JPG, PNG and WebP images to exact pixel dimensions or a percentage while keeping the aspect ratio. Free, private and no upload.
Open toolImage Compressor
Reduce image file size up to 90% without visible quality loss. Compress JPG, PNG and WebP in your browser. Free, private, batch download.
Open toolImage Converter (PNG, JPG, WebP)
Convert images between PNG, JPG and WebP in bulk. Adjust quality and download as a ZIP. Free and private, with no upload.
Open toolCrop Image
Crop any photo online with a drag-to-select box and presets for 1:1, 4:3 and 16:9. Works on phones, runs in your browser, so your image is never uploaded.
Open toolRemove EXIF Metadata
Strip EXIF data, GPS location and camera details from JPG, PNG and WebP photos. Re-saves the image on a clean canvas in your browser, showing file sizes.
Open toolKeep reading
How to remove metadata from PDFs and photos, and check that it is really gone
What hidden metadata PDFs and photos carry, why EXIF GPS is risky, and how to remove it in your browser and verify that it worked. Steps and limits.
Read guideHow to compress images without uploading them
How in-browser image compression works, with measured JPG and PNG results, quality settings that make sense, and how to strip EXIF data for privacy.
Read guideHow to convert currency offline when travelling abroad
No signal abroad? Learn how to convert currencies offline, what the mid-market rate is, how to spot a bad exchange deal and how to check prices before you pay.
Read guide