Prepare a photo for the web
A photo straight from a phone is several thousand pixels wide, several megabytes, and carries the place and time it was taken. Three tools in order turn it into a file that loads quickly and says nothing about you. Each step opens the next tool with the file already in it.
The steps
- 1
Resize to the size it will be shown at
A hero image needs 1600 to 2000 pixels on the long edge; a thumbnail needs 400. Sending more pixels than the layout can show is the largest single waste in most page weights.
Open Image Resizer - 2
Compress to the target weight
Choose WebP where the site supports it, JPEG otherwise, and a quality around 80. Watch the preview at 100% for banding in skies and halos around edges before going lower.
Open Image Compressor - 3
Confirm the metadata is gone
Re-encoding through a canvas drops EXIF, but checking takes five seconds and shows you what would have shipped: camera, GPS coordinates, time, and sometimes an embedded thumbnail of the uncropped original.
Open EXIF Viewer & Remover
Each tool offers the next one from its result. The file is handed on in memory, in this tab, and is not stored.
Why this order
Resizing before compressing means the encoder works on the pixels that will actually be shown, so the quality setting applies to the final image rather than to one that will be scaled down later by the browser. Compressing before resizing would encode at full size, throw most of it away, and leave compression artefacts that the downscale then smears. The metadata check comes last because it is a check, not a change; the compressor has already removed it.
Choosing sizes and quality
| Use | Long edge | Format and quality |
|---|---|---|
| Full-width hero | 1600 to 2000 px | WebP 75 to 80, or JPEG 80 |
| Article image | 1200 px | WebP 75 to 80 |
| Thumbnail or avatar | 400 px | WebP 80; PNG if it has flat colour or text |
| Open Graph preview | 1200 by 630 px, cropped | JPEG 80 |
If the page serves responsive images, resize to the largest size in the set and let the build produce the rest; otherwise resize once to the largest size the layout uses.
What the file hand-off does
When you finish a step and choose the next tool, the result is passed in memory to the next page, in this tab, without a download and an upload in between. The hand-off expires after a minute and does not survive a reload, so if you take a detour, drop the file again. Nothing is stored, and nothing leaves the browser at any step.
Questions
- Should I crop as well?
- If the framing needs work, add the cropper between resizing and compressing; it accepts the handed-off file too. Cropping after compression re-encodes a second time.
- Does the compressor always strip metadata?
- It re-encodes the pixels, so the original metadata does not survive. The EXIF step exists so you can see that for yourself rather than trust the sentence.