search⌘KtranslateENexpand_moreupload_fileConvert

Image resizer

Resize an image to exact pixel dimensions, a percentage or a ready-made size: fit, fill, or stretch. Everything happens on your device.

lockNo uploadtuneReal resamplingblockNo watermark

imagetest-chart.png · 2400 × 1800 · 1.21 MB

uploadOpen image

1920 × 1440progress_activityresampling…whole image, padded

fit_screenFitWhole image, adds paddingcropFillCovers frame, trims edgesopen_in_fullStretchExact size, may distort

Drop an image on the preview or open one. Everything is decoded, resampled and encoded by your browser; the size shown is the real encoded file.

~/three-different-jobs

Resize, crop or compress?

All three make images “smaller”, but in different ways. Picking the right one avoids blurry or squashed results.

arrow_forward

Resizethis tool

Changes the number of pixels. The whole picture is kept, just smaller or larger.

pixelsfewerframingsamequalitysame

You’re here

arrow_forward

Cropthis tool

Cuts away the edges to change the framing or shape. Kept pixels stay exactly as they were.

pixelsfewerframingchangedqualitysame

Open Image Crop →

arrow_forward

Compressthis tool

Keeps the same dimensions but stores the image more efficiently, making the file smaller.

pixelssameframingsamequalityslightly less

Open Image Compressor →

~/pixels-to-paper

How big will it print?

Screens only care about pixels. Paper cares about pixels per inch. Your current output (1920 × 1440) at different print qualities:

300pixels per inch

Photo print

16.3 × 12.2 cmCrisp at arm’s length: photo books, framed prints.

150pixels per inch

Poster / flyer

32.5 × 24.4 cmLooks sharp from a metre or more away.

72pixels per inch

Screen only

67.7 × 50.8 cmFine on screen; blurry if printed close up.

~/sizes-people-need

Common sizes, one click away.

Tap any size to load it into the resizer above.

Instagram square1080×1080Instagram portrait1080×1350Story / Reel1080×1920Facebook cover1640×624LinkedIn banner1584×396X header1500×500YouTube thumbnail1280×720Full HD wallpaper1920×10804K wallpaper3840×2160Blog image1200×675Favicon512×512Passport photo413×531

~/sharp-results

Four rules for sharp resizes.

south_westShrink, don’t stretchMaking an image smaller keeps it sharp. Making it bigger than the original invents pixels and looks soft.

linkLock the aspect ratioUnless you want a different shape, keep width and height linked so nothing looks squashed.

devicesExport 2× for sharp screensFor a 600 px slot on a website, export 1200 px so it looks crisp on high-resolution displays.

saveResize from the originalEach resize of an already-resized JPG loses detail. Always start from the biggest version you have.

~/resampling-filters

Eight filters, one zone plate.

A zone plate is a ring pattern whose detail gets finer towards the edge, reaching the finest a 480 px image can hold. Shrinking it shows a filter’s two jobs: keep the rings that still fit, and turn the ones that don’t into flat grey. Anything left in the grey zone is aliasing, false rings that were never in the source.

Shrink 480 px by

Nearest4 ms

detail

96%aliasing

100%

Bilinear, 2-tap2 ms

detail

96%aliasing

36%

Box (area)2 ms

detail

96%aliasing

36%

Catmull: Rom4 ms

detail

98%aliasing

12%

Mitchell6 ms

detail

93%aliasing

Lanczos-37 ms

detail

101% ↑aliasing

10%

Browser · low2 ms

detail

96%aliasing

36%

Browser · high2 ms

detail

96%aliasing

36%

Kernel shapesweight vs distance in output pixels

Lanczos-3w(x) = sinc(x)·sinc(x/3) for |x| < 3A sinc windowed to three lobes. The closest of these to an ideal low-pass filter, most detail kept, least aliasing, at the cost of the most taps and visible ringing next to sharp edges.

output size240 × 240

taps per pixel, 2D144

detail kept101%

aliasing left10%

Detail = how much of the ring contrast below half the new Nyquist limit survives (100% = untouched; slightly over, marked ↑, means the kernel’s negative lobes sharpen, the same overshoot that causes ringing). Aliasing = RMS ripple left where the source detail is too fine to keep, as a share of full ring contrast (0% = perfectly flat). Both are measured on the canvases above.

~/linear-light

Averaging the numbers isn’t averaging the light.

Image files store sRGB values, which are gamma-encoded: 128 is about 22% of white’s light, not 50%. A resizer that averages stored values makes fine detail darker and shifts colours. Below, alternating one-device-pixel stripes are shrunk 2× three ways, including by your own browser.

ABStep back or squint: the stripes blend into the colour of the light average.

stripes

value average#808080

light average#bcbcbc

your browser#7f7f7f

Value average (A + B) ÷ 2rgb(128, 128, 128)

Light average, re-encoded to sRGBrgb(188, 188, 188)

Your browser, drawImage highrgb(127, 127, 127)

Luminance of value average vs light-57.1%

PairValue averageLight averageYour browserBrightness error

#808080#bcbcbc#7f7f7f-57%

#808000#bcbc00#7f7f00-57%

#808080#bcbcbc#7f7f7f-57%

#803d0d#bc5810#7f3d0d-55%

#97b5ff#bec7ff#97b5ff-21%

Brightness error = relative luminance of the value average vs the light average (IEC 61966-2-1 transfer, BT.709 weights). “Your browser” is drawImage at imageSmoothingQuality “high”, read back with getImageData.

contrastYour browser’s drawImage matches the value average (rgb(127, 127, 127)), so it filters gamma-encoded numbers. Fine stripes, text and foliage come out darker after shrinking. The exact Lanczos and Mitchell options above avoid this.

~/reference

Kernels, defaults and history.

Tap counts are computed by the same weight code the lab uses. Library defaults are from general knowledge of current documentation: check the linked docs for the version you run.

KernelRadiusTaps at 2×Taps at 4×Weight functionCharacter

Nearest0.5 px11w(x) = 1 if −½ < x ≤ ½ · not widenedCopies one pixel. Sharp and fast, worst aliasing.

Bilinear, 2-tap1 px22w(x) = 1 − |x| · not widenedWhat a GPU texture lookup does without mipmaps; skips most pixels when shrinking.

Box (area)0.5 px × factor24w(x) = 1 if −½ < x ≤ ½ · widenedAverages the covered pixels. Cheap, slightly soft, some residual aliasing.

Catmull: Rom2 px × factor816cubic, B = 0, C = ½ (Keys a = −½)Interpolating cubic; crisp with mild edge halos.

Mitchell2 px × factor816cubic, B = ⅓, C = ⅓Mitchell: Netravali’s recommended balance of blur, ringing and anisotropy.

Lanczos-33 px × factor1224w(x) = sinc(x)·sinc(x/3) for |x| < 3Closest to an ideal low-pass here; most taps, strongest ringing.

What other tools use by default

Browser canvasctx.imageSmoothingQualityDefaults to "low". The algorithm behind low/medium/high is up to the browser; filtering happens on stored sRGB values.

CSSimage-renderingauto (browser’s choice), smooth, pixelated or crisp-edges for scaled <img> and backgrounds.

PillowImage.resize()Bicubic by default since Pillow 7.0 (nearest for palette and 1-bit images). Support widens when shrinking; works on stored values.

ImageMagickmagick in.jpg -resize 50% out.jpgLanczos for most shrinks; Mitchell when enlarging or for images with transparency or a palette. Add -colorspace RGB … -colorspace sRGB for linear light.

libvips / sharpvips resize · sharp().resize()Lanczos-3 kernel by default, after a fast box shrink for large factors.

FFmpeg-vf scale=1280:-2swscale defaults to bicubic; flags=lanczos or flags=area change it.

PhotoshopImage Size › Resample“Automatic” picks Bicubic Sharper for reductions and Preserve Details or Bicubic Smoother for enlargements.

Your browser, tested live

Encode JPEGcanvas.toBlob(cb, "image/jpeg")yes

Encode PNGcanvas.toBlob(cb, "image/png")yes

Encode WebPcanvas.toBlob(cb, "image/webp")yes

Encode AVIFcanvas.toBlob(cb, "image/avif")no

Smoothing quality control"imageSmoothingQuality" in ctxyes

createImageBitmap resize{ resizeWidth, resizeQuality }yes

OffscreenCanvastypeof OffscreenCanvasyes

drawImage averages lightblack/white stripes → 127 (light ≈ 188, value 128)no

Timeline

1949Shannon publishes the sampling theorem: a signal sampled above twice its highest frequency can be rebuilt exactly.

1974Catmull and Rom describe the interpolating spline family later used as a resampling cubic.

1979Duchon describes Lanczos filtering in one and two dimensions for smoothing gridded data.

1981Keys publishes cubic convolution interpolation and shows a = −½ gives third-order accuracy.

1983Williams introduces mipmaps, prefiltered half-size copies, for texture minification.

1988Mitchell and Netravali publish the B, C cubic family and recommend B = C = ⅓.

1996HP and Microsoft propose sRGB as a default colour space for the web.

1999IEC 61966-2-1 standardises sRGB and its transfer function.

2004Apple introduces canvas in WebKit; drawImage scaling is left to each browser.

c. 2007Eric Brasseur’s “Gamma error in picture scaling” shows most software averages gamma-encoded values.

c. 2016The HTML standard gains imageSmoothingQuality and createImageBitmap resize options.

2020Pillow 7.0 makes bicubic the default filter for Image.resize.

Sources

Shannon (1949), Proc. IRE 37(1)Communication in the presence of noise.Keys (1981), IEEE Trans. ASSP 29(6)Cubic convolution interpolation for digital image processing.Mitchell & Netravali (1988), SIGGRAPHReconstruction filters in computer graphics.Duchon (1979), J. Applied Meteorology 18(8)Lanczos filtering in one and two dimensions.Williams (1983), SIGGRAPHPyramidal parametrics, the origin of mipmapping.WHATWG HTML: Image smoothingimageSmoothingEnabled and imageSmoothingQuality.IEC 61966-2-1:1999Default RGB colour space: sRGB.Pillow: FiltersResampling filters and their support sizes.libvips: Resamplevips_resize and its kernels.ImageMagick: Resampling filtersDefault filter choice, Lanczos, Mitchell and colourspace advice.

More image tools

Resizing is often one step. These handle the rest.

All tools →

cropImage Cropbefore resizing

Choose the framing first, then resize the cropped part to the exact size.

photo 4:3arrow_forward1:1 square

compressImage Compressorafter resizing

Shrink the resized file further without changing its dimensions.

1920×1440 · 720 KBarrow_forward240 KB

swap_horizImage Converterafter resizing

Change the format, for example to WebP for a faster website.

photo.jpgarrow_forwardphoto.webp

paletteImage Color Pickerhandy alongside

Read exact pixel colours from the resized image.

click a pixelarrow_forward#0d9488

water_dropImage Watermarkafter resizing

Stamp your name or logo on the resized image before sharing.

aspect_ratioAspect Ratio Calculatorhandy alongside

Work out the missing width or height for any ratio.

16:9 · width 1280arrow_forwardheight 720