Image Resizer

{{ modeLabel }} {{ formatLabel }} {{ qualityBadge }} Max {{ max_kb }} KB {{ keepRatio ? 'Aspect locked' : 'Aspect free' }} No upscale Demo image

Unable to resize this image

Source image:

Use PNG, JPEG, WebP, GIF, SVG, BMP, or any image your browser can decode.

Files stay in this browser; paste also works when an image is on your clipboard.

Ignored {{ ignoredCount }} extra file(s). This tool processes one image at a time.

Resize settings

Resize preset:

Choose a starting point, then adjust any control below.

Resize mode:

Pixel size:

px wide

px high

Aspect lock:

Leave on for fit-mode dimension entry; contain and cover preserve the source by padding or cropping instead of stretching.

Scale: {{ percent }}%

Use Percent scale for quick 25%, 50%, 75%, 100%, or 200% jobs.

No upscale:

Keep on for web assets; turn off only when enlargement is acceptable.

Output format:

Changing format can also convert the downloaded image.

Quality: {{ qualityBadge }}

File size cap:

Enter 0 to use the quality slider, or a KB target such as 250 for upload limits.

Background:

Use a matte color such as #ffffff when the output must sit on a white page.

Sharpen after resize:

Use for softened photos or screenshots; leave off for smooth gradients.

Unsharp amount:

Range: 0 to 500; 80 is a moderate starting point.

Unsharp radius:

Range: 0 to 5 px; 0.6 keeps sharpening tight for web images.

Unsharp threshold:

Range: 0 to 255; higher values protect flat skies, skin, and gradients.

Filename template:

Available tokens: {name}, {w}, {h}, {pct}, {mode}, and {ext}.

Download Open

Updating resized preview...

Original {{ originalLabel }}

Resized {{ resultLabel }}

Field	Value	Detail	Copy
{{ row.field }}	{{ row.value }}	{{ row.detail }}

Check	Status	Recommendation	Copy
{{ row.check }}	{{ row.status }}	{{ row.recommendation }}

Embed:

Customize

Include current inputs

Size

Advanced

Width

Height

Aspect ratio

Max height

Collapsible embed

Allow fullscreen

Referrer policy

Sandbox tokens

Image resizing changes the pixel grid behind a raster image. The practical goal is usually simple: make a file fit a web slot, email body, avatar square, product card, or upload limit without stretching the subject or wasting bytes.

Pixels matter because a browser, editor, or upload form reads width and height as real dimensions. A 4032 by 3024 photo contains far more samples than a 1200 by 900 article image needs, so reducing the grid can cut download weight while keeping the same 4:3 shape. Changing only one side while preserving aspect ratio keeps circles round and faces natural.

Most resize decisions come down to geometry and format. Fit-style resizing keeps the whole image visible but may not fill both sides of a fixed frame. Contain creates the exact canvas and pads the unused space. Cover fills the frame by cropping from the longer side, which works for thumbnails and cards when the subject is safely centered.

Format choice is separate from geometry. JPEG is usually practical for photos, PNG preserves lossless detail and transparency, and WebP can create compact web images when the publishing system accepts it.

How to Use This Tool:

Use this sequence when you need one finished image with predictable dimensions, framing, and file weight.

Choose Browse image, drop a file into Source image, paste an image from the clipboard, or use Use demo to inspect the workflow before loading your own file. Extra files are ignored because the page processes one image at a time.
Choose a Resize preset when it matches the job, such as web hero, email inline, social square, marketplace contain, or half-size WebP. Pick Custom settings when you want full control.
Select Resize mode. Use Percent scale for proportional resizing, Fit within bounds when the whole image must remain visible, Contain on canvas for exact dimensions with padding, or Cover canvas for exact dimensions with cropping.
Set Pixel size or Scale. Keep Aspect lock on for fit-mode dimension entry, and keep No upscale on when enlargement would create a soft result.
Choose Output format, Quality, and File size cap. The cap applies to JPEG and WebP output; PNG remains lossless and ignores the cap.
Open Advanced when you need a background matte for JPEG or contain padding, sharpening after resize, or a custom filename template.
Inspect Preview Compare before downloading, then use Resize Details, Delivery Checks, or JSON when you need an audit trail for the resized file.

If the selected file cannot be decoded, choose a browser-supported image such as PNG, JPEG, WebP, GIF, SVG, BMP, or AVIF, then try again.

Interpreting Results:

Read the target dimensions first. Resize Details shows the source size, source aspect value, target dimensions, output file, resize mode, and size change. The Resize Receipt summary is better for file-weight checks because it reports the encoded output size and cap status.

How to interpret image resize outcomes
Result cue	Meaning	What to check next
Correct dimensions, cropped image	`Cover canvas` filled the frame by removing source pixels outside the centered crop.	Inspect the preview for faces, labels, product edges, and captions near the crop boundary.
Correct dimensions, empty space	`Contain on canvas` preserved the whole source and filled the mismatch with background padding.	Change background color or switch to cover only if losing edges is acceptable.
Output smaller than requested	`No upscale` capped scaling at the source size.	Use a larger source or turn off the guard only if softer enlargement is acceptable.
Above file size cap	The lowest searched JPEG or WebP quality still did not meet the target.	Reduce dimensions, switch format, or accept a higher size limit.
Transparent art becomes solid	JPEG output has no alpha channel, so transparent pixels are drawn against the selected background.	Use PNG or WebP when transparency must remain.

Do not treat a smaller kilobyte number as automatic success. Open the downloaded image once and verify dimensions, crop, transparency, and visible compression before using it in a CMS, email, marketplace listing, or design handoff.

Technical Details:

A raster resize starts with source width, source height, and aspect ratio. The aspect ratio is width divided by height, so a 2400 by 1350 image has a 16:9 shape because both sides reduce to the same proportion as 1600 by 900. Preserving that ratio keeps the subject from being squeezed; changing the ratio requires padding or cropping.

Resampling creates a new pixel grid from the old one. Downscaling combines source pixels into fewer output pixels, which can remove detail and soften edges. Upscaling spreads existing samples across a larger grid, which cannot add real camera detail. The no-upscale guard prevents a small source from being enlarged just because a target box is larger.

Formula Core:

The core geometry uses a scale factor. Percent scaling uses the percent value directly. Fit and contain use the smaller factor so the whole image remains visible. Cover uses the larger factor, then crops the overflow to the requested frame.

r = \frac{W_{src}}{H_{src}}

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

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

f_{cover} = \max (\frac{W_{box}}{W_{src}}, \frac{H_{box}}{H_{src}})

Resize mode geometry rules
Mode	Geometry rule	Canvas result	Main risk
`Percent scale`	Apply the same 10% to 200% multiplier to width and height.	New dimensions follow the source shape.	Values above 100% enlarge the source unless `No upscale` is on.
`Fit within bounds`	Use the largest scale factor that fits inside the requested width and height.	The final canvas may be smaller than one side of the box.	It does not force exact dimensions when the box ratio differs from the source.
`Contain on canvas`	Fit the whole image, center it, and keep the requested canvas.	Width and height match the requested frame.	Padding appears when source and frame ratios differ.
`Cover canvas`	Center-crop the source to the target ratio, then resize it to the exact canvas.	Width and height match the requested frame.	Content near the edges can be removed.

Cover cropping compares the destination ratio with the source ratio. If the destination is wider than the source, the crop keeps the full source width and cuts height. If the destination is narrower, the crop keeps the full source height and cuts width. A 2400 by 2400 square image going to 1200 by 630 keeps the width, trims height to about 1260 source pixels, then resamples that crop to 1200 by 630.

Image resizer setting bounds and effects
Setting	Accepted range or values	Effect on output
`Width` and `Height`	Whole pixels greater than 0; blank is allowed where the mode can derive a side.	Controls target box or exact canvas size, depending on mode.
`Scale`	10% to 200%.	Used only by `Percent scale` mode as the direct multiplier.
`No upscale`	On or off.	Caps scale and fit results at the source size; in cover mode, an oversized requested canvas falls back to centered padding.
`Quality`	10 to 100 for JPEG and WebP; PNG remains lossless.	Lower values usually reduce bytes and increase visible artifacts.
`File size cap`	0 disables the cap; positive values are kilobyte targets.	Runs an approximate quality search for JPEG or WebP output only.
`Sharpen`	Amount 0 to 500, radius 0 to 5 px, threshold 0 to 255.	Adds edge contrast after resize; high values can create halos.

Canvas safety limits reject outputs larger than 16000 pixels on either side or about 80 megapixels in total. Those limits avoid oversized browser canvases that are likely to fail during decode, resample, or encode.

Privacy and Accuracy Notes:

The selected image is read, resized, previewed, and exported in the browser. The page does not show an upload step for the image contents, but sensitive files should still be handled on a trusted device.

Browser image decoding can flatten or rasterize formats such as animated GIF and SVG; output choices are JPEG, PNG, and WebP.
JPEG output flattens transparency against the selected background because JPEG has no alpha channel.
The file size cap is approximate because encoded byte size depends on image content, format support, and quality search results.
Copied preview links are temporary browser links for the current session, not permanent hosted URLs.

Worked Examples:

Article photo downsize:

A 4032 by 3024 phone photo needs to sit in a content column that never shows images wider than 1200 px. Use Fit within bounds, enter Width = 1200, leave height blank, keep No upscale on, and choose JPEG around 85 quality. Resize Details should show a target near 1200 x 900.

Square product image to wide card:

A 2400 by 2400 product image must become a 1200 by 630 share card with no side bars. Use Cover canvas, set Width = 1200 and Height = 630, then choose WebP or JPEG depending on the publishing system. The preview should fill the frame edge to edge, but the centered crop removes part of the top and bottom of the square source.

Logo with a size limit:

A transparent PNG logo is 1800 by 600 and an upload form asks for a file under 150 KB. If transparency must remain, use Fit within bounds, reduce the width, and keep Output format = PNG, then check the summary. If PNG still exceeds the limit, switch to WebP only when the destination accepts WebP transparency.

Small source and no upscale:

A 400 by 300 thumbnail is requested as a 1200 by 900 image. With Fit within bounds and No upscale on, Resize Details stays at 400 x 300 because the scale factor is capped at 1. Turning No upscale off can create the larger dimensions, but it cannot add real detail.

FAQ:

Does resizing upload my image?

The selected image is read and resized in the browser, then returned as a temporary download link. Use a trusted device for sensitive files because the browser still has to load the page itself.

Why did the image not reach the width and height I entered?

Fit within bounds preserves the whole source and stays inside the requested box, so one side may be smaller when aspect ratios differ. Use Contain on canvas or Cover canvas when both dimensions must match.

Why does the kilobyte cap ignore PNG?

The cap is an approximate quality search for JPEG and WebP. PNG is exported as a lossless canvas result, so Quality and File size cap do not make a PNG obey a strict byte target.

Can this preserve animated GIF frames?

No. The source picker accepts GIF when the browser can decode it, but the output is a canvas export in JPEG, PNG, or WebP. Do not use this workflow when animation must be preserved.

Why does a copied preview link stop working later?

The preview link is a temporary browser link for the processed file. It can help during the current session, but it is not a permanent address and should not be shared as a hosted file.

Glossary:

Raster image: An image stored as a grid of pixels, such as a photo, screenshot, or bitmap export.
Aspect ratio: The relationship between width and height, such as 16:9 or 1:1.
Contain padding: Padding added around a fitted image so the final canvas has exact dimensions.
Cover crop: A centered crop that fills an exact frame while removing source pixels outside that frame.
Lossy compression: Compression that reduces file size by discarding image detail, as JPEG and lossy WebP can do.
Alpha channel: The transparency information in formats that can store partially or fully transparent pixels.

References:

Image file type and format guide, MDN Web Docs.
HTMLCanvasElement: toBlob() method, MDN Web Docs, February 2026.
An image format for the Web, Google for Developers.
Responsive images, web.dev.