Image Resizer: Pixels, Aspect Ratios and Formats in One Pass

By Alexey Zimarev · Norway

An image resizer sounds like the simplest tool in a browser, and most of the time it is: type a number, press a button, download the result. The difficulty appears the moment the number you type is wrong for the source you have, or the format you need is not the one the file arrived in. This resizer handles both parts of that problem in a single pass. It changes pixel dimensions in four different ways, crops to a chosen ratio, stamps a text or image watermark, and writes the output in any of 107 formats, without ever sending the file to a server.

What Image Resizing Actually Changes

A digital image is a rectangular grid of pixels, and its dimensions are the count of columns and rows in that grid. The number 1920 by 1080 means 1920 pixels across and 1080 down, which comes to roughly 2.1 million pixels in total. Resizing replaces that grid with a different one, and every new pixel has to be given a colour value computed from the old pixels. Nothing about centimetres, inches or print density is stored inside the picture in any meaningful way; those numbers only appear when the grid is drawn onto a screen or onto paper at a given density.

The direction of the change matters more than any setting in the interface. When you shrink an image, the resampler has more information than it needs and averages several source pixels into each output pixel. Detail is discarded, but the result looks sharp because the detail being discarded is detail the new size could not display anyway. When you enlarge an image, the resampler has to fill gaps between known pixels by interpolation, and interpolation is an educated guess. Upscaling by a factor of k requires inventing k squared minus one pixels out of every k squared pixels in the output, which is why a small logo blown up to poster size looks soft no matter which filter is selected.

That asymmetry produces three practical rules which hold for every tool, including this one. Export from the largest source you have rather than enlarging a copy you already shrank. Perform one resize instead of a chain of them, because going from 4000 pixels to 2000 and then to 800 accumulates softening at each pass, while going from 4000 straight to 800 costs one pass. And keep the original file, because once a downscaled version overwrites the source, the discarded detail is gone permanently.

Four Ways to State the Target Size

The Resize tab offers four modes, and the right one depends on whether you know the exact dimensions you need or only the direction you want to travel.

Dimensions is the mode people reach for most, and it carries an aspect lock plus a swap button. With the lock engaged, typing a width recalculates the height from the original ratio, so the picture cannot be stretched. With the lock released, both fields accept independent values, which is the correct choice only when the source and the target share a ratio and the difference is deliberate.

Percentage exists because many jobs are described in relative terms: half the original, a quarter of the original, twice the original. Presets cover the common fractions and leave a free field for everything else. Longest Side answers a different question, namely how to keep a folder of images below some limit on their larger edge while preserving each individual ratio, which is the usual requirement for thumbnails and previews. Preset Size is the fastest path for repeated work on one platform, since the numbers are already known and do not need to be recalled.

The original dimensions are printed next to the fields as soon as the file loads, which removes the guesswork from the ratio arithmetic that follows.

Aspect Ratio Arithmetic Without Distortion

An aspect ratio is the proportional relationship between width and height, written as two numbers separated by a colon. A 3:2 photograph and a 16:9 video frame describe different shapes, and forcing one into the other without a decision produces either distortion or cropping. The arithmetic is short: the ratio is width divided by height, and preserving it means the new width divided by the new height must equal the old one.

Suppose a photograph measures 6000 by 4000 pixels, which is 3:2. A target width of 1200 pixels gives a height of 1200 multiplied by 4000 and divided by 6000, so 800 pixels. Rounding matters at small sizes: computed values are rounded to whole pixels, and a single pixel of difference in a thumbnail is visible as a slightly uneven border. The aspect lock in the Dimensions mode performs this division continuously, which is why the height field updates while the width is being typed.

When the target ratio differs from the source ratio, there are only two honest options. Cropping keeps the subject at its true proportions and throws away the edges that do not fit, and the Crop tab exists for exactly that. Stretching keeps every pixel and distorts the subject, which is occasionally acceptable for backgrounds and almost never acceptable for faces, text or logos. A resizer that silently stretches is not doing the user a favour; it is hiding a decision that belongs to the person holding the image.

Resampling Filters and What They Cost

The filter decides how old pixels are combined into new ones, and the four common families form a clear ladder of cost against quality.

Nearest neighbour copies the value of the single closest source pixel and performs no averaging at all. That makes it wrong for photographs, where it produces visible stair-stepping, and exactly right for pixel art or a QR code, where the block structure is the content and any smoothing destroys it. Bilinear takes a weighted average of a 2 by 2 neighbourhood, which is cheap enough for interactive use and soft enough to be noticeable on fine detail. Bicubic fits a smooth cubic curve through a 4 by 4 neighbourhood and remains the default in general-purpose editors because it balances quality against speed. Lanczos3 approximates an ideal sinc filter and samples a 6 by 6 grid, giving the sharpest traditional result at the cost of some ringing along high-contrast edges and a higher processor load.

A separate question is filtering on downscale. Shrinking by a large factor without prefiltering skips source pixels entirely and produces aliasing, which appears as moiré patterns in fine textures. Browsers apply their own smoothing when a canvas is drawn at a smaller size, and image libraries such as the one behind this tool use proper area averaging for the formats they handle. After an aggressive reduction, a light unsharp mask restores the apparent crispness that area averaging takes away, and the usual starting point is a radius of about one pixel.

DPI Is Metadata, Pixels Are the Image

Print density is the most misunderstood number in digital imaging, and it deserves a clear statement: DPI stored in a file is a hint about how densely the pixels should be laid onto paper, and screens ignore it completely. A 1080 by 1080 image looks identical whether its density field says 72 or 300, because the display simply draws the pixel grid. Changing the number without resampling changes exactly zero pixels.

Print is the case where the arithmetic becomes real, because the required pixel count is the physical size in inches multiplied by the density. A 4 by 6 inch print at 300 DPI needs 1200 by 1800 pixels. An A4 page of 8.27 by 11.69 inches at the same density needs about 2481 by 3508 pixels. A large-format banner viewed from several metres is acceptable at 150 DPI, while fine art printing may call for 600 or more. The consequence for a resizer is straightforward: you supply the pixel grid that satisfies those numbers, and the density tag is a separate concern that does not alter sharpness on screen.

One Pass, Any Format

The format menu is where this tool differs most from a typical browser resizer. Output lists 107 writable formats, selected in the same panel that holds the dimension fields, so conversion and resizing happen together rather than in two separate operations. Input accepts 86 formats, including TIFF, PSD, HEIC and HEIF, JPEG XL, DNG, OpenEXR, Radiance HDR, PCX, ICO, DDS, JPEG 2000 and GIMP XCF.

Two engines sit behind that menu. PNG, JPEG, WebP, GIF and AVIF are handled by the browser's own canvas, which means no download of any library and near-instant work on ordinary photographs. Every other format is decoded and encoded by ImageMagick compiled to WebAssembly, which is fetched on first use of an uncommon format and then cached. The size of that engine is the price of supporting PSD and TIFF without a server, and it is paid only by the people who need those formats.

The quality slider applies to lossy targets and appears only when it is relevant, since a lossless format has no such setting. It runs from 10 to 100 with a default of 85, and its effect is easy to measure: on a small test image, the same JPEG at quality 10 weighed 893 bytes and at quality 100 weighed 2377 bytes, a factor of roughly 2.7 for the same pixel grid. That is compression, not resizing, and the two controls are deliberately independent.

One caution belongs here. Formats whose own specification fixes the canvas size are excluded from the output list, because a resizer that promises 1200 by 800 and delivers 768 by 512 is worse than no option at all. Photo CD and its variants fall into that category. Formats that require an external interpreter, such as PostScript and PDF readers, are excluded from input for the same reason: a browser cannot run Ghostscript.

Crop and Watermark in the Same Pass

Resizing rarely happens alone. A photo prepared for a square feed slot usually needs cropping first, and an image published on several sites often needs a visible mark. Both live in the same workspace as tabs, so the file is decoded once and the operations compose.

The Crop tab sets a rectangle with draggable handles for the whole frame and for each corner, alongside six ratio presets: free, 1:1, 4:3, 3:2, 16:9 and 9:16. The resulting output size is printed live while dragging, which turns the crop into a measurement rather than an estimate.

The Watermark tab supports text and image marks. Text takes content, font size and colour. An image mark is an uploaded logo, previewed before applying. Both kinds share nine anchor positions on a three by three grid, an opacity from 0 to 100, a scale from 10 to 300 percent, a rotation in degrees and a tile mode that repeats the mark across the canvas. Tile uses a step of the mark width plus the font size horizontally and the mark height plus the font size vertically, so the spacing scales with the mark instead of staying fixed.

Sizes Worth Memorizing

Exact targets save time, and the numbers below cover most requests that arrive as an instruction rather than a measurement.

For delivery formats, the guidance has been stable for years. Photographs belong in JPEG or WebP, and WebP typically produces files 25 to 35 percent smaller than JPEG at comparable visual quality. Graphics with transparency belong in PNG, and AVIF is the better choice for modern browsers when the encoder is available. Repeated conversions through lossy formats accumulate artefacts, so a single conversion from the original beats a chain of them, and PNG is the safe intermediate when several steps are unavoidable. Resize before compressing rather than after, since compressing a large image and then shrinking it wastes effort and bakes artefacts into pixels that could have been discarded.

What a Browser Resizer Cannot Do

Running entirely on the device is a privacy property rather than a marketing phrase: the file is read into memory, processed there and written back through a download link, and no upload occurs at any point. That also removes the file size caps that server-side tools impose to protect their bandwidth, and it removes the queue that makes large uploads slow.

The limits are equally concrete. Memory constrains the maximum image size, though a 1800 by 1800 PNG of 9.3 megabytes loads in roughly half a second and larger files follow the same pattern until the tab runs out of room. Camera raw files are only partly supported, since DNG, 3FR, FFF, IIQ, KDC, MEF, RW2 and RWL decode while several other raw containers do not. Animated content is treated as a still frame. Multi-page documents are out of scope. Within those bounds, the tool does the mechanical work and returns a file in the format that was asked for, which is the entire job.

Alexey Zimarev

Norway · SO reputation 19891 · Badges: 2🥇68🥈93🥉 · SO member since 2010