Resize & Convert
Resize images and convert between JPG, PNG, and WebP.
Resize & Convert takes one image, scales its longest side down to a target you choose, and optionally converts it between JPG, PNG, and WebP — all in your browser, as the card says: "Resize an image and convert between JPG, PNG, and WebP — entirely in your browser." A live line under the preview shows exactly what will happen: "{w}×{h} → {newW}×{newH}" before you commit.
The tool never upscales. If the image already fits the target with the same format and quality, it tells you with an "already fits" toast instead of writing a pointless file. Lossy quality only appears when it matters (JPEG/WebP outputs), so the form stays honest about what each setting actually does.
How it works
On upload, the page reads dimensions via getDataUrlFromFile and loadImage, then a zod-validated form supplies maxDimension (integer 32–8192, default 1920), outputType (keep/jpeg/png/webp), and quality (0.1–1, default 0.8). computeResizedDimensions scales the longest side down proportionally — it never enlarges a small image.
shouldResize skips the pipeline entirely when dimensions already fit, the format is unchanged, and quality is 1 (or there is nothing lossy to re-encode), surfacing "Image already fits the target size — no changes needed." Otherwise browser-image-compression re-encodes, and a success toast confirms; the quality slider only renders for JPEG/WebP outputs or keep on JPEG/WebP sources.
How to use
- Drop a single image into the upload zone.
- Check the preview for original dimensions; use the preview clear control to swap files.
- Set "Max Width / Height (px)" between 32 and 8192 — the description notes it is the longest side; the other side scales to match.
- Choose "Output Format": Keep Original, JPEG, PNG, or WebP.
- If a lossy format is selected, adjust the "Quality" percentage slider.
- Watch the live "{w}×{h} → {newW}×{newH}" line to confirm the target size.
- Click "Resize Image" (becomes "Resizing..."); a toast reports success, an already-fits skip, or an error.
- Download the result or Start Over for another file.
Tips
- Values above the current longest side do nothing — the tool only scales down.
- Form validation messages are "Must be at least 32px" and "Must be at most 8192px".
- Converting to WebP at quality ~0.8 is usually the best size/quality tradeoff for the web.
- "Keep Original" preserves the MIME; quality below 1 still re-encodes lossy sources.
- "Could not read image dimensions." means the file is corrupt or not a decodable image — try another export.
Resize & Convert FAQ
Does it upscale small images?
No. computeResizedDimensions only scales down when the longest side exceeds the target; smaller images keep their dimensions.
Does the quality slider apply to PNG?
No — the slider only renders for JPEG/WebP outputs, or Keep Original when the source is JPEG/WebP.
What does Max Width / Height mean?
It is the longest side in pixels; the other dimension scales proportionally to preserve aspect ratio.
Is anything uploaded?
No — resize and conversion run fully in-browser through browser-image-compression.
Why did I get an "already fits" toast?
shouldResize returned false: dimensions, format, and quality all need no change, so the tool skips re-encoding.
Credits
- browser-image-compression — Resize + format conversion pipeline