Resize Image Online
Set a max width, downscale to the right dimensions, and compress — all in one step.
Crop & aspect ratio
Resize & compress
Output size
—
Original
—
Optimized
—
Saved
—
Recommendation
Load an image to see a tailored weight target.
100% private — your image is processed locally and never uploaded to any server.
Resizing vs. compressing: what each actually does
These two operations sound similar but affect different things. Resizing changes the pixel dimensions of an image — making it physically narrower or shorter. Compressing changes how many bits are used to encode each pixel — making the file smaller without necessarily changing dimensions. For a web image to be truly lean, you often need both: the right dimensions for your layout, and an efficient encoding at a sensible quality level.
The Image Optimizer handles both at once. Set a max width and it scales the image down proportionally — height adjusts automatically to preserve the aspect ratio. Importantly, the tool only downscales: if you set a max width larger than the original, the image is left at its original size instead of being upscaled. Upscaling a raster image never adds real detail; it only creates blurry, heavier files.
Common targets to keep in mind: full-width desktop hero images rarely need to exceed 1600 px wide. Blog content images typically sit at 800–1200 px. Sidebar thumbnails and product card images work well at 400–600 px. Pair the right dimensions with WebP at quality 80 and most images will load in under 100 ms on a typical connection.
Step by step
- Upload your image by clicking Choose file or dragging it onto the tool.
- Set the max width in the resize field — the height is calculated automatically to preserve proportions.
- Choose WebP as the output format for the best size-to-quality ratio.
- Adjust the quality slider — 80 is a solid default. Watch the compressed size readout update live.
- Check the preview to confirm the image looks sharp at the new dimensions.
- Click Download to save the resized and compressed file.
Tips
- Never upscale. If you need a larger image, go back to the original high-resolution source — this tool intentionally skips upscaling to prevent blurry output.
- Resize to the largest dimension actually displayed in your layout. Serving a 2400 px image scaled to 600 px in CSS wastes 4x the bandwidth.
- Retina displays (2x density) benefit from images at 2x the CSS display size. A 300 px wide thumbnail could use a 600 px source image for crisp rendering on modern screens.
- For email campaigns, keep images under 600 px wide — email clients constrain content width and most users are on mobile.
- If the file size is still too large after resizing, reduce quality by 5–10 points. Anything above quality 65 in WebP looks good for standard web use.
- GIFs are flattened to a single static frame when processed. For animated GIFs, keep the original file and only use this tool on static images.