How to Prepare Images for the Web
Reviewed by Chad Solomon · Updated June 2026
Web-ready images use a modern format, are sized to their display dimensions, and are compressed to the smallest file that still looks sharp. Getting all three right cuts page weight, speeds up loading, and improves Core Web Vitals. Every step below runs in your browser — your images are never uploaded.
1. Choose the right format
Pick the format by image type:
- Photographs: WebP or JPG. WebP files are typically 25–35% smaller than JPG at the same quality.
- Logos, icons, screenshots: PNG, or WebP for transparency at a smaller size.
- Graphics needing transparency: PNG or WebP — never JPG, which has no transparency.
Convert to a web format with PNG to WebP or JPG to WebP. Not sure which to use? See PNG vs JPG and WebP vs PNG.
2. Resize to the display dimensions
Resize images to the largest size they actually display at. A photo shown in a 800-pixel-wide column does not need to be 4000 pixels wide — the extra pixels only inflate the file. Use the resize images tool to set exact dimensions before upload.
3. Compress the file
Compress to the smallest size that still looks sharp. For photos, a quality setting around 75–85% removes weight with no visible loss. The compress images tool lets you balance file size against quality and preview the result.
4. Strip unnecessary metadata
Remove camera metadata to shrink files and protect privacy. Photos carry EXIF metadata — including GPS location — that web pages never need. Converting an image in your browser drops this data automatically, because only the pixels are re-encoded.
A quick checklist
- Convert photos to WebP, graphics to PNG.
- Resize to the maximum display width.
- Compress to 75–85% quality for photos.
- Confirm metadata is stripped after conversion.
Following these four steps typically reduces a web image's file size by 70–90% with no visible quality loss.