Image Resizer

File	Original	Aspect	Size (KB)	Target	Copy
{{ f.name }}	{{ f.originalWidth }}×{{ f.originalHeight }}	{{ f.aspect }}	{{ f.sizeKB }}	{{ f.targetWidth }}×{{ f.targetHeight }}
No files

Digital images are grids of tiny color samples called pixels, and resizing changes how many of those pixels the picture contains. Use it when you need consistent dimensions for galleries, banners, or product shots and want results that look natural across different layouts.

You bring one or more pictures, choose how the new size should be decided, and pick an output format. The result comes back at the target dimensions with the aspect handled the way you prefer so the picture fits its frame without surprises.

An everyday example is preparing a 4032 by 3024 photo for a page that shows images 1200 pixels wide. Fit to width keeps the shape of the scene and returns 1200 by 900 so nothing looks stretched or squashed.

Be mindful that enlarging a small picture can soften detail, especially for photos with fine texture. For crispness after shrinking, a light sharpening pass can help edges look clean without halos.

Technical Details:

The tool operates on raster images, treating width and height as pixel counts measured on the source. It computes a target canvas size and, depending on the mode, either scales the whole image, fits it inside a box, pads it to an exact canvas, or crops to fill a canvas before resizing. Output may be encoded as JPEG, PNG, or WebP, with optional quality control for lossy formats.

Computation proceeds by selecting a scale factor from your inputs, applying it to the source dimensions, and rounding to whole pixels. Results are interpreted as follows: a scale preserves shape at a chosen percentage, a fit keeps the entire image visible within the box, a letterbox preserves all content on an exact canvas with padding, and a cover fills the canvas by cropping evenly from the long side.

When a file size cap is set for JPEG or WebP, encoding quality is searched to stay at or below the target while favoring the highest attainable quality under that limit. PNG is lossless and ignores quality and size caps.

\begin{array}{lcl} Scale mode & : & f = \frac{p}{100}, W_{out} = round (W_{src} \cdot f), H_{out} = round (H_{src} \cdot f) \\ Fit mode & : & f = \min (\frac{W_{box}}{W_{src}}, \frac{H_{box}}{H_{src}}), W_{out} = round (W_{src} \cdot f), H_{out} = round (H_{src} \cdot f) \\ Letterbox & : & W_{canvas} = W_{box}, H_{canvas} = H_{box}, f = \min (\frac{W_{canvas}}{W_{src}}, \frac{H_{canvas}}{H_{src}}) \\ Cover & : & crop to aspect \frac{W_{box}}{H_{box}}, then resize to W_{box} by H_{box} \end{array}

Symbols and units
Symbol	Meaning	Unit/Datatype	Source
$W_{src}$ , $H_{src}$	Source width, height	px	Input
$W_{box}$ , $H_{box}$	Requested box or canvas	px	Input
p	Scale percentage	10 to 200	Input
f	Scale factor after clamping	real	Derived
$W_{canvas}$ , $H_{canvas}$	Exact canvas for letterbox or cover	px	Derived
$W_{out}$ , $H_{out}$	Output dimensions	px	Derived
Q	Lossy quality	0.1 to 1.0	Input
$S_{KB}$	File size cap	kilobytes	Input

Worked example. Source 4032 × 3024, Fit with

W_{box}

= 1200,

H_{box}

omitted. Scale factor

f = \frac{1200}{4032} = 0.2976 \dots

Output dimensions

\begin{array}{lcl} W_{out} & = & round (4032 \cdot f) = 1200 \\ H_{out} & = & round (3024 \cdot f) = 900 \end{array}

Interpretation: the full image remains visible, scaled down to 1200 × 900 with shape preserved.

Validate inputs and clamp to allowed ranges.
Compute layout by mode: scale, fit, letterbox, or cover.
Resize to the target canvas using high‑quality resampling.
Optionally pad the canvas (letterbox) or crop before resizing (cover).
Encode as JPEG, PNG, or WebP with the chosen quality.
If a size cap is set for JPEG/WebP, search for the highest quality under the cap.

Validation and bounds enforced by the app
Field	Type	Min	Max	Step/Pattern	Notes
Width, Height	integer	1	∞	—	Rounded to whole pixels; blank allowed for Fit calculations.
Scale percent	integer	10	200	1	Clamped; percent ignored in other modes.
Quality (Q)	real	0.1	1.0	—	Lossy only; PNG ignores quality.
Mode	enum	—	—	scale \| fit \| letterbox \| cover	Cover crops; letterbox pads to canvas.
No upscale	boolean	—	—	—	Prevents enlarging; cover may fall back to letterbox.
File size cap	integer	0	∞	KB	Active for JPEG/WebP; searched via quality.
Background color	string	—	—	#RGB or #RRGGBB	Used for letterbox and JPEG transparency.
Unsharp amount	integer	0	500	—	Enabled when sharpening is on.
Unsharp radius	real	0	5	0.1	Typical ~0.6 px.
Unsharp threshold	integer	0	255	—	Protects flat areas from sharpening.
Filename template	string	—	—	{name} {w} {h} {pct} {mode} {ext}	Non‑word characters become underscores.

Input and output formats
Input	Accepted Families	Output	Encoding/Precision	Rounding
Raster image files	PNG, JPEG, WebP	JPEG, PNG, WebP	Quality for JPEG/WebP; PNG is lossless	Dimensions rounded to nearest pixel

Constants used internally
Constant	Value	Unit	Notes
Quality search lower bound	0.2	—	For JPEG/WebP size targeting
Quality search upward probes	4	—	Attempts to approach the cap without overshoot
Quality search iterations	7	—	Binary search toward the cap
Size cap slack	6	KB	Permits slight overshoot

Units, precision, and rounding. Width and height are integers in pixels. Percent and quality inputs are clamped to their bounds. Offsets for padding and cropping are integer rounded to center the image. File sizes shown in kilobytes are computed from bytes and displayed to one decimal place.

Networking and storage. Processing is browser‑based. Files are read locally, resized on a canvas, and encoded to downloadable blobs. When multiple outputs are produced, a ZIP archive is created on the client. Object URLs are revoked when cleared.

Performance. Work scales with total pixels processed. Very large images may require noticeable time and memory, especially when trying multiple qualities to meet a size cap.

Diagnostics and determinism. Given the same inputs, outputs are deterministic. There is no randomness in scaling, cropping, padding, or quality search.

Security considerations. Untrusted image files are decoded and re‑encoded; scripts are not executed. Background color replaces transparency when saving JPEG, which removes alpha. Avoid opening downloaded files from unknown sources outside your workflow.

Files are processed locally; nothing is uploaded.

Assumptions & limitations

Only raster inputs are supported; vector artwork is rasterized by the browser.
JPEG/WebP quality controls apply; PNG ignores quality and size caps.
“No upscale” prevents enlarging; cover may switch to letterbox to honor it.
Letterbox pads to the exact canvas; background color fills transparent areas for JPEG.
Cover crops symmetrically from the long side to match the canvas aspect.
Color profiles and metadata are not preserved on re‑encode.
Orientation metadata is not applied; images are used as decoded by the browser.
Filename templates accept {name} {w} {h} {pct} {mode} {ext}; other characters are sanitized.
Quality search is approximate; a small slack may allow slight overshoot under the cap.
Clipboard operations depend on user permission.
CSV/JSON summaries reflect current session only.
Very large sources may exceed device memory and fail to encode.

Edge cases & error sources

Setting both width and height empty in Fit returns the original size.
Providing only width or only height in Fit derives the missing side from aspect.
Invalid color strings reset to white for padding and JPEG background.
Very small sources with “No upscale” remain unchanged in Scale and Fit.
Cover with “No upscale” and larger canvas falls back to letterbox.
PNG outputs may be larger than JPEG/WebP at the same dimensions.
Extremely low size caps can force visibly low JPEG/WebP quality.
ZIP download appears only when more than one output is produced.
Copy to clipboard may fail without user gesture or permission.
Rounding to whole pixels can shift one side by ±1 compared with exact math.
Aspect values are formatted to two decimals for display, not used for math.
Corrupted images fail on decode and are removed from the list.

How‑to · Step‑by‑Step Guide

Image resizing with precise control over dimensions and format.

Add one or more images from your device.
Select a mode: Scale, Fit, Letterbox, or Cover.
Enter Width and/or Height, or set Percent.
Choose Format and adjust Quality for JPEG/WebP.
Optional: set a Size cap (KB), pick a Background, and enable Sharpen.
Start the resize and save each result, or download a ZIP for many files.

Example. Fit a 2560 × 1707 image to 1280 width → output 1280 × 854; save as WebP at 80% quality.

You end with images sized to spec and ready for reuse.

FAQ

Is my data stored?

Processing happens in your browser. Files are read locally and not uploaded. Object URLs are revoked when cleared.

How accurate is the size cap?

JPEG/WebP quality is searched to meet or sit just under your target. A small slack allows near‑cap results without repeated retries.

Which formats are supported?

Inputs: PNG, JPEG, WebP. Outputs: JPEG, PNG, WebP. PNG ignores quality and size caps; JPEG/WebP support them.

Can I avoid enlarging images?

Yes. Enable the no‑enlarge option to keep sources from being scaled above their original size.

Why does transparency become solid?

JPEG has no alpha channel. Transparent pixels are replaced by your chosen background color when saving to JPEG.

How do I rename outputs?

Use the filename template. Placeholders include {name}, {w}, {h}, {pct}, {mode}, and {ext}. Non‑word characters are replaced with underscores.

Does it work offline?

Once loaded, it continues to work without a network connection because processing runs locally.

What does “cover” versus “fit” mean?

Fit keeps the whole image visible inside the box. Cover fills the box by cropping evenly from the long side.

Troubleshooting

Output larger than expected → lower quality for JPEG/WebP or enable a KB cap.
PNG not honoring quality → PNG is lossless; use JPEG/WebP for size control.
Canvas not exact in Fit → use Letterbox or Cover for exact canvas sizes.
Image looks soft after shrink → enable sharpening and adjust amount slightly.
Transparency lost in JPEG → pick PNG/WebP or set a background color that matches the page.
ZIP did not appear → ZIP is created only when more than one output exists.

A decode or encode error removed a file from the list. Add a known‑good copy and try again.

Advanced Tips

Tip Use Fit for galleries that must keep every pixel of content visible.
Tip Use Cover for thumbnails that must fill a frame without gaps.
Tip Combine a modest size cap with quality 70–85% to balance size and fidelity.
Tip Keep background neutral to avoid color bands around letterboxed edges.
Tip Use template tokens to encode dimensions in filenames for quick QA.
Tip Enable no‑enlarge for icons and logos to preserve crisp edges.

Glossary

Aspect ratio: Relationship of width to height; shape of the image.
Letterbox: Exact canvas with padding so the full image remains visible.
Cover: Crop to match the canvas aspect, then resize to fill it.
Lossy quality: A 0.1–1.0 scale that trades size for detail in JPEG/WebP.
Canvas: The pixel area the resized image is written into.
Unsharp mask: Post‑resize sharpening to restore edge clarity.

Image Resizer

Ready to Download

Introduction:

Technical Details:

Assumptions & limitations

Edge cases & error sources

How‑to · Step‑by‑Step Guide

FAQ

Troubleshooting

Advanced Tips

Glossary