Web image resizing
Resize images for the web without losing sharpness
The fastest page-speed win is displaying images at the size you actually use. The image resizer scales photos and graphics locally in your browser.
Resize an image for the web
Two steps: set the dimensions, then compress the result.
Add the image
Open the image resizer and select the source image.
Set the target size
Enter the width used by your layout, or scale by percentage; the height follows automatically with the ratio lock.
Preview the result
Check that the resized image still looks sharp at the intended display size.
Download and compress
Download the resized image, then compress it with the image compressor as the finishing step.
How to prepare web images
Sizing, format, and compression each remove a different kind of waste.
Resize dimensions
Match the image to the largest container that will display it. The image resizer sets exact pixels locally.
Best when images are larger than the layoutCompress the result
After resizing, run the image compressor at 80 percent quality to remove encoding waste.
Best as the second step, alwaysServe modern formats
WebP often saves another 25 to 35 percent over JPG. Convert with the image converter when your stack supports it.
Best for modern sitesChoosing the target dimensions
Find the largest width your layout shows the image at, then multiply by 2 for sharp screens. An image displayed at 800 pixels wide should be exported at 1600 pixels. Going beyond that adds bytes without visible benefit.
Common widths: full-width hero around 1920 to 2560 pixels, content columns around 1200 to 1600, thumbnails and avatars around 300 to 600. Resize to these targets and the page stays light.
Resizing smaller images upward
Upscaling cannot create detail that does not exist. A 400 pixel photo stretched to 1600 pixels looks soft no matter the algorithm. When the source is too small, consider a different crop or a lower display size instead.
Jump to tool
Resize your images for the web now
Open the image resizer, set the target width, and download a correctly sized image. Free and fully local.
Open Image ResizerWhat oversized images cost you
- A 4000 pixel photo shown at 800 pixels wastes most of its bytes
- Oversized images delay first paint and push content down
- Mobile browsers download full-resolution images before scaling them down
- CMS uploads without resizing multiply storage and bandwidth costs
Web image sizing practices
- Export at 2x the display width for sharp screens
- Resize before compressing, never after
- Use descriptive filenames and alt text with the new dimensions
- Re-run the workflow after layout changes
Frequently asked questions
What width should my website images be?
Match the largest container in your layout, doubled for sharp screens. Content images are often 1200 to 1600 pixels wide, heroes 1920 to 2560, thumbnails 300 to 600.
Does resizing reduce image quality?
Downscaling keeps quality when the image is viewed at its new size; it only discards pixels the layout would not show. Upscaling, by contrast, softens the image because no new detail can be created.
Should I resize before or after compressing?
Always resize first. Compressing a huge image still leaves a huge file; resizing first removes the pixels, then compression removes encoding waste from the smaller image.
Can I resize many images at once?
Yes, the image resizer accepts multiple files and applies the same target size to the whole batch, which is ideal for photo galleries and product catalogs.
Sizing happens on your device
Image Resizer scales images locally in your browser. Your photos are read on your device and the resized versions are produced there, with no upload and no storage.
Open Image Resizer