🔧 TL3 Tools

What This Resizer Does With Your Pixels

The tool loads an image from your device, reports its natural dimensions, and redraws it on a canvas at whatever width and height you enter, in pixels. You can keep the original proportions with an aspect-ratio lock or distort the image freely with the lock off, then export the result as PNG, JPEG, or WebP with a quality setting that only applies to the lossy formats. The original image is kept in memory the whole time, so every Apply starts from the untouched source rather than from a previously scaled version — that is what keeps repeated resizes from degrading the picture.

How the Canvas Stretches the Source

Resizing is a single drawing operation. The tool creates a canvas with your requested dimensions and calls ctx.drawImage(image, 0, 0, w, h), letting the browser's rendering engine scale the source image into the target rectangle in one pass. The browser picks its own interpolation method for that pass, so the quality depends on the browser rather than on this page. The preview is generated separately as a PNG using canvas.toDataURL('image/png') no matter which format you have selected — the preview is always lossless so that what you see is an honest rendition of the scaled pixels. The actual download is produced by canvas.toBlob(callback, format, quality), where the quality value is the slider reading divided by 100, and the file is saved with an extension matching the chosen format.

Worked Example: Halving a 3000 × 2000 Photo

Say the photo is 3000 pixels wide and 2000 pixels tall — six million pixels in total. With the aspect-ratio lock checked, type 1500 into the width field. The tool multiplies by the ratio of original height to original width, 2000 / 3000 = 0.667, and fills the height field with the rounded result: 1500 × 0.667 = 1000. The canvas now redraws the whole photo into a 1500 × 1000 box, which is exactly half the width and half the height of the original. The pixel count drops from six million to 1.5 million — a quarter of the original — because area scales with the square of the linear factor. On a photo, halving both dimensions usually makes the file a fraction of its original size with no visible difference on screen, which is why this is the classic move before uploading to a content management system.

The Aspect Lock and the Rounding It Hides

With the lock on, the tool derives one dimension from the other using the original proportions, and it rounds the result to a whole pixel with Math.round(). That rounding is a real edge case: resize a 1000 × 667 image to a width of 333 and the computed height is 333 × 0.667 = 222.1, which rounds to 222 — so the output is 333 × 222 rather than a mathematically exact 333 × 222.1. The error is always under half a pixel, invisible in practice, but it means the locked ratio is approximate, not exact. Turn the lock off and the two fields are independent: the image is stretched or squashed to whatever rectangle you enter, which is how you produce non-standard aspect ratios deliberately. A dimension of zero or a blank field is rejected with a toast asking for valid dimensions, and the width and height are limited to whole numbers because a canvas cannot hold a fractional pixel.

Formats, Quality, and the PNG Exception

The format dropdown offers PNG, JPEG, and WebP. JPEG and WebP are lossy, so the quality slider — which runs from 10 to 100 and defaults to 85 — applies to them; the higher the number, the larger the file and the fewer compression artifacts. PNG is lossless, and the tool hides the quality slider entirely when PNG is selected, because there is nothing to tune. PNG keeps any transparency in the source, while JPEG does not support an alpha channel, so a transparent background is flattened rather than preserved. WebP supports transparency and generally compresses better than JPEG at equivalent quality, at the cost of slightly narrower support in older browsers. The download filename is always resized with the format's extension, so exporting the same image twice does not overwrite your original file.

Image Resizer FAQ

Why does my transparent PNG lose its transparency when I download as JPEG?

JPEG has no alpha channel, so the canvas flattens transparency onto the default background. Choose PNG or WebP for images that must keep a transparent background, and reserve JPEG for photos that fill the whole frame.

Can I upscale an image to a larger size?

Yes, but the tool cannot invent detail. Upscaling spreads the same pixels across a larger canvas, and the browser's interpolation smooths the gaps, which makes the result look soft. For downscaling, interpolation works in your favor and quality loss is minimal.

What is the maximum size I can resize to?

There is no limit enforced by this page, but browsers cap canvas dimensions — typically around 16,384 pixels per side on modern desktop browsers, with some limits on total area as well. Attempting a canvas beyond the browser's ceiling throws an error, so stay well under that for large exports.

Does the quality slider affect the preview?

No. The preview is always rendered as a lossless PNG, so it shows the scaled pixels with no compression loss. The quality slider only changes the JPEG or WebP file that gets downloaded, which is why a low-quality download can look worse than the preview it was based on.

Why does the height field change automatically when I type a width?

Because the aspect-ratio lock is on. It keeps the image's original proportions by computing the matching dimension from the one you typed. Uncheck the lock if you want the two fields to stay independent, so you can stretch the image deliberately.

Which format should I pick for which image?

Use PNG for screenshots, logos, and anything with text or transparency. Use JPEG for photographs where file size matters more than perfect fidelity. Use WebP when the audience uses modern browsers and you want the smallest file at acceptable quality.

When to Resize Here and When to Use an Editor

Reach for this tool when you need a specific pixel size fast — a social media cover, an email header, a CMS thumbnail — and you already know the target dimensions. It is also the right place for converting between PNG, JPEG, and WebP in the same step, because the format and dimensions are applied together. Step back to a full editor when you need to crop, rotate, adjust colors, or apply filters, none of which this page does; when you must resize dozens of files in a batch, a script or bulk tool is faster; and when the source image is already smaller than your target, think twice about upscaling at all, since enlarging a small image never adds true detail.