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

Raster images are fixed grids of pixels, so resizing is really a choice about how many pixels the final file should contain and how those pixels should be arranged inside a target frame. That matters any time an image has to fit a page slot, an upload rule, a document layout, or a fixed social-share canvas without looking stretched, blurry, or oddly cropped.

This package takes one image at a time and lets you reshape it in four distinct ways: scale it by percentage, fit it inside a box, place it on an exact letterboxed canvas, or crop it to an exact cover canvas. After processing, it gives you a downloadable file, a preview card, a row in Resize Details, and a structured JSON summary of the same run.

A common use case is shrinking a large phone photo so it loads faster on a site while still keeping the whole scene visible. Another is building a fixed-size banner such as 1200 by 630 pixels, where the real decision is not just width and height, but whether you would rather keep every edge of the picture or allow a deliberate crop so the frame fills cleanly.

File size is only one part of that decision. JPEG and WebP can trade compression against visual quality, which makes them practical when you need smaller downloads or a rough size cap. PNG keeps a lossless pixel record and is often a better fit for logos, screenshots, or artwork with sharp edges, but it can stay larger even after dimensions are reduced.

The main caution is that a smaller file is not automatically the better result. A cover crop can remove important content, a JPEG export can change how transparent areas behave, and a copied row URL is only a temporary browser object URL, not a permanent file address you should expect to work elsewhere.

Everyday Use & Decision Guide:

The cleanest first pass is to load one image, choose Fit, enter just a target width or just a target height, and leave No Upscale turned on. That gives you a predictable downsize with the original shape preserved, and the Resize Details row will show the expected target dimensions before you even download the result.

Scale is best when you already know the percentage change you want, such as 50 percent for a quick half-size draft.
Fit is the safe choice when nothing should be cropped and the image only needs to stay inside a width or height limit.
Exact Letterbox is the right choice when the output must be an exact canvas size and blank space is acceptable.
Exact Cover is for fixed frames that must fill edge to edge, but you should expect some cropping from the longer side.

Two package-specific limits are worth remembering before you trust the output. First, the page processes one image at a time and ignores extra dropped files after the first valid image. Second, File size cap only influences JPEG and WebP exports, so switching to PNG while expecting a hard kilobyte ceiling will look like the setting stopped working when the real issue is format choice.

Use Resize Gallery and Resize Details together as your final check. The table confirms original and target dimensions, while the preview tells you whether the crop, padding, transparency, and overall feel are actually acceptable for the slot you are targeting.

Technical Details:

The resizing core starts with the decoded source width and height, then derives a target canvas from the selected mode. Width and height inputs are rounded to whole pixels. Scale percentage is clamped to 10 through 200, quality is clamped to 0.1 through 1.0, and the mode is limited to scale, fit, letterbox, or cover. If No Upscale is enabled, the effective scale factor is capped at 1 so the package will not enlarge the image beyond its original pixel dimensions.

Scale and Fit both resize the whole image without cropping. Scale uses a direct percentage multiplier. Fit computes the largest factor that keeps the full image inside the requested width and height box, or derives the missing side from aspect ratio when you enter only one dimension. Exact Letterbox also preserves the whole image, but it resizes into an exact canvas and centers the result with padding. Exact Cover does the opposite: it crops the source to the destination aspect ratio first, then resizes the crop so the canvas fills completely.

The formulas below capture the two most common paths. In both cases, the package rounds the final canvas dimensions to whole pixels. When No Upscale is enabled, the scale factor is reduced to 1 whenever these formulas would otherwise enlarge the image.

f = \frac{p}{100}, W_{out} = round (W_{src} \cdot f), H_{out} = round (H_{src} \cdot f)

f = \min (\frac{W_{box}}{W_{src}}, \frac{H_{box}}{H_{src}})

Image resize mode behavior
Mode	Canvas rule	What stays visible	What changes most
`Scale`	Apply one percentage to both source dimensions	The whole image	Absolute size
`Fit`	Stay within the requested box	The whole image	Final width and height inside the box
`Exact Letterbox`	Return the exact requested canvas	The whole image	Padding around the resized image
`Exact Cover`	Return the exact requested canvas	Only the cropped center region	Edges may be removed to match aspect ratio

Encoding happens after the resize step. JPEG and WebP honor the quality slider, while PNG ignores that setting because the package does not run a lossy-quality pass for PNG exports. If you set File size cap with JPEG or WebP, the page starts from the chosen quality and searches up or down for the best quality that lands at or near the target size. The search is approximate, which is why the summary is better treated as a practical limit check than as a guarantee to the exact kilobyte.

The advanced sharpening controls are applied during resampling, not after download. Unsharp amount, Unsharp radius, and Unsharp threshold mainly help when a downscaled photo looks a little soft and needs edge contrast back. The Background color is most relevant when a JPEG letterbox canvas needs visible padding, because JPEG has no alpha channel and cannot keep transparent borders.

All image decoding, resizing, and export generation happen in the browser after the page loads. The output download uses a temporary object URL, and the JSON panel records the exact run settings, totals, original dimensions, and target dimensions that produced the file.

Step-by-Step Guide:

Use this path when you want a predictable resize without guessing how the frame will be handled.

Drop one image into Image or browse for it with the file picker. If you drop several files, the page keeps the first valid image and shows an Ignored extra file(s) notice.
Choose the resize approach in Mode. For a simple downsize, start with Fit and enter only Width (px) or only Height (px). Leave No Upscale on unless you explicitly want enlargement.
Set Format and Quality. Open Advanced only if you need a JPEG or WebP size target, sharpening, a letterbox background, or a custom Filename template.
Press Resize Image and wait for the Ready to Download summary. If you are using PNG and a strict size target, do not trust File size cap by itself, because PNG ignores that cap in this package.
Inspect Resize Gallery before downloading. This is where you catch a cover crop that cut off a subject, a letterbox pad you did not expect, or a transparency issue that the table cannot show.
Use Resize Details, Copy CSV, Download CSV, Export DOCX, or the JSON tab if you need a record of the run. A finished job should leave you with a downloaded file whose target dimensions and visual framing both match the slot you had in mind.

Interpreting Results:

The two numbers to trust first are the target width and target height. They tell you whether the package built the shape you asked for. After that, the real judgment call is visual: did the crop, padding, and file format preserve what matters in the image?

totalSizeKB and the reduction percentage are useful for comparing versions of the same image, but they do not tell you whether the format choice was appropriate. A larger PNG can still be the right answer for line art, screenshots, or transparency.
The Aspect column in Resize Details is the source aspect ratio shown for reference. It does not tell you by itself whether Exact Cover cropped important edges or whether Exact Letterbox added visible borders.
A copied row URL is only the browser's temporary object URL for that processed file. It is useful inside the current session, but it is not a stable share link and should not be treated as one.

If the output is headed to a CMS, design handoff, printer, or platform upload, open the downloaded file once before you ship it. Verifying dimensions, crop, and transparency in the final file is the best guard against a resize that is mathematically correct but visually wrong.

Worked Examples:

Shrinking a large article photo without cropping

A phone image starts at 4032 by 3024 pixels and only needs to be 1200 pixels wide for a content page. Choose Fit, enter Width (px) = 1200, leave Height (px) blank, keep No Upscale on, and export as JPEG at 85 quality. The Resize Details row will move from 4032x3024 to 1200x900, and the Ready to Download summary should still show Mode: Fit. That is a good workflow when the whole scene matters more than squeezing every possible byte out of the file.

Building a fixed social-share canvas

A square 2400 by 2400 product image has to become a 1200 by 630 share card with no bars. Choose Exact Cover, set Width (px) = 1200 and Height (px) = 630, then export as WebP. The target in Resize Details will read 1200x630, and the preview should fill the frame edge to edge. Before downloading, check Resize Gallery closely, because cover mode achieves that exact canvas by trimming away part of the original square.

Why a size cap can appear to do nothing

A transparent logo is exported as PNG with File size cap = 150 KB. The page still returns a PNG larger than that number, even though the dimensions are correct and the summary looks healthy. That is expected in this package because PNG ignores the lossy quality search that JPEG and WebP use for capped exports. If the hard limit matters more than lossless pixels, switch Format to JPEG or WebP, rerun the job, and then compare the new totalSizeKB value against your target.

FAQ:

Does the page upload my image to a server when I resize it?

The package does not include a tool-specific upload step. The file is read in the browser, processed there, and returned as a temporary download object URL. You should still be careful with sensitive images on shared machines, but the resize run itself stays local to the page.

Why did the kilobyte cap not reduce my PNG output?

Because the cap is only used when the page can search JPEG or WebP quality. PNG export ignores the quality slider and the size cap, so changing those fields will not force a smaller PNG.

What does No Upscale change in cover mode?

If the requested cover canvas is larger than the source image, the package will not enlarge the source. Instead, it falls back to a letterbox-style result that keeps the whole image visible inside the requested canvas.

Why does the copied row URL stop working after a refresh or on another device?

The row button copies the current browser's temporary object URL for that processed blob. It is convenient for the active session, but it is not a permanent file location and should not be used as a share link.