How to resize an image

Loading an image

Three ways in, identical results

Three methods, identical results:

• Drag — the converter accepts a drop anywhere on the page (replacing the current image); bulk compression appends when results already exist; the forge wants it on the upload area.
• Pick a file — click the upload area to open the file picker.
• Paste — after a screenshot, ⌘/Ctrl + V, which even skips saving to disk first.

On formats: the converter and forge accept JPG / PNG / WebP / AVIF / GIF (GIF takes the first frame only, animation is not preserved); bulk compression accepts JPG / PNG / WebP / AVIF and skips animated GIF and SVG with an explanation.

On size: aim for a long edge no smaller than the target. The converter and forge downsample anything above 4096px to 4096 before generating — that step only bounds memory and does not affect output, because the largest spec is just YouTube channel banner (2560 × 1440). Bulk compression caps each file at 50.00 MB and each batch at 60.

One easy trap: dragging an image on the home page jumps to the converter with that image in tow, handed over through the same tab’s memory. A refresh or a new tab loses it, so pick again.

Cover or contain

Cut the edges, or pad around them

This is the one choice that visibly changes the result. Neither mode is better; it depends what you need.

Switching recomputes every result immediately — no button to press.

Focal point

Framing when the subject is off-centre

The focal point decides which side is discarded. Top keeps the upper part, bottom keeps the lower; with contain it controls which end the padding collects on.

When it matters: a portrait image going to a 16:9 thumbnail, a landscape image going to a 9:16 cover, a portrait photo going to a square post. In those three cases the default centre tends to cut exactly where it should not.

Crop dialog

Manual selection, ratio locking

The focal point only gets you close. To land a specific region exactly, use the crop dialog. It has two independent concepts, and keeping them apart is what stops it feeling confusing:

• The selection box is pinned to the screen; dragging it decides which region survives.
• Image zoom only changes the image behind the box; the box itself does not move.

The ratio chips come from the 8 distinct ratios among the 11 specs: 16:9 (1280×720), 3:1 (1500×500), 1:1 (400×400), 9:16 (1080×1920), 1:1.56 (420×654), 40:21 (1200×630), 4:1 (1584×396), 2:3 (1000×1500). Each chip shows the pixel size of the first spec with that ratio, and while a chip is active the corner handles scale proportionally.

Crops stack: every “apply crop” cuts again from the current image rather than starting over from the original. To undo, use “Restore crop” on the source bar. The forge’s crop dialog offers only 1:1 because every output is square.

On mobile there is no space bar: one finger drags the box, two fingers pinch to zoom and pan the image. Everything else behaves the same.

Format and quality

Choosing between JPEG and PNG

JPEG suits photographs and most content, and halves the file when no transparency is needed. Quality defaults to 92 (range 40–100): below 80 you get visible banding on gradients and flat areas, above 95 the file grows with no visible gain.

PNG is for transparency (caption bars over video, cut-out logos) or large areas of flat colour with type. Turning on transparency switches to PNG automatically because JPEG has no alpha channel at all; switching back to JPEG turns the toggle off, so you never end up with “shown as transparent, exported as white”.

PNG is lossless, so the quality slider greys out. That is expected.

Export and naming

Single files, ZIP, filename rules

Single downloads live at the bottom right of each card, or inside the preview as “Download this one”; the whole set is the “Download ZIP” button on the results header. The preview has two modes: platform view renders the real platform shape (circular avatar, rounded card, interface overlays included), while original shows the exported pixels 1:1.

Filenames are fixed so they drop straight into an asset library: platform-use-widthxheight.jpg, for example {sample}. The archive is named social-sizes-20261024-1208.zip with a local timestamp.

When you do not need everything, use “Export sizes” on the right of the toolbar to tick only what you need. Generating fewer files saves time and canvas memory.

From one logo to a full set

A whole size range from one source

The forge turns one image into 20 files across six groups: browser tab (favicon), navigation logo, iPhone home screen, Android / PWA, Chrome extension, and circular avatars plus small sizes. Every size, format and filename follows the platform documentation rather than our own invention.

A 1024 × 1024 square logo is the recommended source. Non-square works too — it is embedded proportionally with padding and never stretched.

What the four controls do

• Shape (square / rounded / circle) only changes the outline drawn. iOS home-screen icons and maskable are always full-bleed: the system applies the mask, and pre-cropping yourself gives you a double border with black-filled corners.
• Inset (0–20%) applies only to the sizes that actually represent the logo (favicon, nav logo, PWA main icon). Avatars and touch icons stay full-bleed, otherwise people think “the image shrank”; maskable keeps at least 10% because the system only guarantees the middle 80%.
• Background / transparent: iOS does not allow alpha, and transparent pixels get filled with black, so apple-touch and PWA sizes are forced opaque and the transparency toggle does nothing for them.
• No upscale embeds native pixels. When the source is smaller than the target you keep the pixel grid instead of a blur — which makes the problem with a small logo immediately visible.

Two outputs people misread

favicon.ico is a single file embedding 16 / 32 / 48 PNGs, and the browser picks one — do not split it into three files. favicon.svg and logo.svg are bitmaps embedded in SVG as a transitional container: a bitmap cannot become a true vector, so these only get the filename and referencing right. For production, have design export a real vector over the same name.

Shipping it

The files use each platform’s conventional names (favicon.ico, favicon-16x16.png, apple-touch-icon.png, android-chrome-512x512.png, android-chrome-maskable-512x512.png, icon-192.png); drop them all into the site root. “Download all as ZIP” on the source bar takes the whole bundle, named icons-20261024-1208.zip, including a README.txt with source dimensions, crop region, render parameters and the file list. The snippets at the bottom of the page give you the HTML head and manifest.json blocks to copy.

To judge the result, look at the cards — each draws the icon at its real display size, and opening one enlarges it to pixel level. If the 16px version has no recognisable outline, the mark needs to be simpler.

Making a batch smaller

Quality ladder and target size

Bulk compression does exactly one thing: make a set of similar images smaller without touching composition. Unlike the converter it never crops or changes ratio; unlike the forge it does not produce new file types.

Output format

Smart (default) keeps JPEG sources as JPEG and converts PNG / WebP / AVIF sources to WebP — WebP keeps alpha, is usually less than half the size of PNG, and re-encoding PNG to PNG barely helps. You can also force JPEG / WebP / PNG. If the browser cannot encode WebP it falls back to PNG, the extension follows, and the page says so at the top.

Quality and dimensions

The quality slider runs 40–100, default 80; the three presets beside it are 轻压缩 90 / 推荐 80 / 高压缩 60. Anything lower shows visible block artefacts, which is why the floor is 40.

“Longest edge” offers no scaling / 3840 / 2560 / 1920 / 1280 and only ever scales down: a source below the ceiling is left untouched, never interpolated upward. With PNG selected, both the quality slider and the target size stop applying — PNG is lossless, so controlling it by size is meaningless.

How the target size is chased

Given a KB ceiling, it first walks down the quality ladder (up to six steps, down to 30), then shrinks dimensions in 25% steps (up to three rounds, never below 320px). Only when neither works is the row marked “missed” — it will not claim success.

The result is never worse than the original

If nothing was scaled and the encode came out larger, the original file is delivered and marked “kept original”. That rule means compression can never be a net loss, at the cost of some rows looking like they did nothing.

Parameters do not re-compress automatically

Changing quality, size or format only raises a notice; the results on screen are still from the old parameters. Confirm and press “Re-compress N images”. Batch × multiple passes is expensive, and recomputing per slider tick would lock the main thread.

Naming and comparison

Output names add -min to the original (with a new extension if the format changed); duplicates within a batch get -2, -3, otherwise later ZIP entries would overwrite earlier ones. The archive is compressed-images-20261024-1208.zip. Click any row to open the comparison lightbox; the divider drags pixel by pixel, and ← / → move between images.

Re-encoding writes pixels only, so EXIF (camera, aperture, shutter, GPS) is dropped. That is usually what you want, but if you archive on EXIF, back up the originals first.

Boundaries

Ceilings on size, count and dimensions

• No server — no upload endpoint and no account. That buys privacy and offline use; the cost is that a refresh clears everything, results live only in this tab.
• 4096 px downsample — the converter and forge scale anything longer than 4096 down before generating. Images below the target are still upscaled; this step cannot rescue them.
• Canvas memory — generating all 11 sizes at once on mobile can stutter; fewer selections help. Bulk compression caps at 60 images per batch and 50.00 MB each.
• Format limits — re-encoding an animated GIF loses the animation, SVG is vector so rasterising it necessarily distorts, and browsers cannot decode HEIC. Bulk compression skips all three and says why.
• Transparency is tied to format — transparent output only exists as PNG; in JPEG the transparent areas get filled with your chosen background colour.

Troubleshooting

Check these in order when a result looks wrong