Image Resizer

How image resizing works

When you open an image, the browser decodes it into raw pixels using createImageBitmap(). The tool then creates an HTML canvas at your target dimensions and draws the image onto it using ctx.drawImage(), which scales the pixels using the browser's built-in bilinear interpolation. Finally, canvas.toBlob() encodes the result to JPEG, PNG or WebP — and everything stays in your tab; nothing is sent to a server.

• Exact dimensions: stretches or shrinks to precisely the width and height you enter. With the aspect-ratio lock on, the image fits inside the box without distortion.
• By percentage: scales both dimensions by the same factor (e.g. 50% = half the width and half the height = quarter the pixel count).
• Fit within: resizes the longest side to the value you set, keeping the original proportions. The other side scales down automatically.

Common exam and form photo sizes (India)

Always check the official notification before uploading — requirements change between exam cycles. Use the preset buttons above to apply the required dimensions in one click.

Tips for best results

• Resize before compressing. Resize to the exact pixel dimensions first, then use the Compress to Target Size tool to hit the KB limit — this order gives the highest quality.
• Use JPEG for exam uploads. Most government and exam portals require JPEG. PNG and WebP are fine for web use but may be rejected by upload forms.
• Avoid upsizing a small photo. Enlarging a low-resolution image makes it blurry. Start from the highest-quality original you have.
• Quality 80–90 for photos. For JPEG output, 80–90 is the sweet spot — visually identical to 100 but much smaller. Drop to 70 only if you need to hit a tight KB limit.
• PNG stays lossless. The quality slider applies only to JPEG and WebP. PNG is always re-saved without quality loss.

Resize vs compress — what you need

Raster vs vector: why resizing has limits

Digital images come in two fundamentally different kinds, and they resize in opposite ways. A raster image — a JPG, PNG, WebP or any photo from a camera — is a fixed grid of coloured pixels. A vector image — an SVG logo or icon — is a set of mathematical shapes (lines, curves and fills) that the computer draws fresh at whatever size you ask for. Because a vector is recomputed from formulae, it scales to any dimension with no loss of quality; because a raster has a finite number of pixels baked in, enlarging it forces the computer to invent pixels that were never captured.

This tool works on raster images, which is what almost every photo, screenshot and exam upload actually is. That single fact drives every recommendation on this page: you can always discard pixels cleanly when you shrink an image, but you can never truly add detail back when you enlarge one. If you need an asset that stays crisp at every size — a logo for both print and screen, say — keep a vector (SVG) master and export raster copies from it, rather than scaling a small PNG up.

Pixels, resolution, aspect ratio and the DPI myth

A few terms get used loosely, so it helps to pin them down:

• Pixel — the smallest unit of a raster image: one coloured dot.
• Resolution / dimensions — the pixel count, written width × height (for example 1920 × 1080). This is the only measurement that decides how large an image looks on a screen.
• Aspect ratio — the proportion of width to height, such as 16:9 or 1:1 (square). Keeping it constant is what prevents a photo from looking stretched or squashed.

The most common source of confusion is DPI (dots per inch) and its digital cousin PPI (pixels per inch). On a screen, DPI is meaningless: a 1000 × 1000-pixel image displays at exactly the same size whether its file is tagged 72 DPI or 300 DPI, because a stored digital image has no inherent physical dimensions in inches or centimetres. A DPI/PPI value only tells a printer how many pixels to pack into each physical inch of paper — it sets the print size, not the screen size and not the pixel count.

So when an exam form asks for a “300 DPI photo,” what actually matters for an on-screen upload is the pixel dimensions and the file size in kilobytes — the values this resizer controls directly. Set the required width and height in pixels and you have met the real requirement, whatever DPI label the file happens to carry.

How resampling actually works

When you change an image’s pixel count, the software has to decide what colour each new pixel should be — a process called resampling or interpolation. The algorithm chosen is the single biggest factor in how good the result looks:

• Nearest-neighbour simply copies the closest existing pixel. It is fast and keeps hard edges perfectly sharp — ideal for pixel art — but it produces blocky, jagged results on photographs.
• Bilinear blends the four surrounding pixels for smooth gradients. It is a good, cheap default and the method most browsers use.
• Bicubic considers sixteen neighbouring pixels for noticeably smoother, higher-quality output at a higher computational cost; it is the workhorse of desktop photo editors.
• Lanczos uses a windowed sinc function over an even wider neighbourhood and generally produces the sharpest downscales of real-world photographs, at the greatest cost.

Two principles follow. First, downscaling (making an image smaller) is the easy direction: there is more information than you need, so the result stays clean — although for the best quality the image should be gently filtered before sampling to avoid aliasing (jagged or moiré-like artefacts), which good downscalers do automatically. Second, upscaling can never recover detail that was not captured in the first place; interpolation can only produce a larger, softer version of what is already there. Modern “AI upscalers” appear to add detail, but they are inventing plausible pixels rather than restoring real ones.

This tool resizes with the browser’s built-in Canvas engine. Drawing an image onto a canvas at a new size applies the browser’s image smoothing — typically a bilinear-class filter — which is fast, private and more than good enough for photos, profile pictures and form uploads.

Choosing a format for the resized image

Resizing and file format are separate decisions, and both affect the final size. Fewer pixels always means a smaller file, but the encoding matters too. Here is how the common web formats compare:

WebP, developed by Google and announced in 2010, typically produces files around a quarter to a third smaller than a comparable PNG, and it supports both transparency and animation. AVIF usually compresses even harder and adds 10-bit colour. Both are supported by all major current browsers, so they are excellent choices for images you publish on the web. For an upload form, however, stick to JPEG unless the instructions say otherwise: many portals accept only JPG/JPEG and will reject a WebP or PNG outright.

One subtlety this tool handles for you: JPEG has no transparency, so when you convert a transparent PNG to JPEG the see-through areas are filled with white rather than turning black. If you need to keep transparency, choose PNG or WebP as the output format.

Resizing images for web performance and Core Web Vitals

Oversized images are the most common cause of slow web pages. If a layout displays a photo at 400 pixels wide but the file is 4000 pixels wide, the browser downloads many times more data than it can show, then scales it down anyway — wasting bandwidth and delaying the page. Serving an image at the dimensions it will actually be displayed is one of the highest-impact performance fixes available.

This matters directly for Core Web Vitals, Google’s set of user-experience metrics. The headline metric, Largest Contentful Paint (LCP), often measures how long the main image takes to load and render, so smaller, correctly sized files improve the score. Three complementary techniques help:

• Serve appropriately sized images — resize each image to the largest size it is actually shown at, not the size it came off the camera.
• Use modern formats — WebP and AVIF cut file size substantially versus JPEG and PNG, shortening load time with no visible quality loss.
• Offer several sizes with srcset — the responsive-images attributes srcset and sizes let the browser pick the best resolution for each device, so phones never download desktop-sized images.

A practical workflow: resize a master image to a few widths (for example 400, 800 and 1200 pixels), export each as WebP, and list them in a srcset. You get fast pages on every device without ever shipping more pixels than the screen can use.

Social media and profile photo sizes

Every platform crops and displays images to its own template, so resizing to the right shape before you upload keeps faces centred and text readable instead of letting an automatic crop cut them off. Exact pixel specifications change often, but a few widely used targets are stable enough to plan around:

• Link share / Open Graph image: 1200 × 630 px (a 1.91:1 landscape rectangle) is the long-standing recommendation for the preview card shown when a page is shared on Facebook, LinkedIn or X.
• Square posts and profile pictures: a 1:1 square (for example 1080 × 1080 px, or smaller for an avatar) suits most profile photos and feed posts. Profiles are usually shown inside a circle, so keep the subject away from the corners.
• Vertical / story formats: a 9:16 portrait (such as 1080 × 1920 px) fills a phone screen for stories and short-video covers.

Because a resize keeps the whole image and only changes its proportions if you unlock the aspect ratio, the safest approach for these fixed shapes is to crop to the target ratio first, then resize the cropped image to the exact pixel dimensions. Always check each platform’s current help pages before a campaign, since the displayed sizes are updated from time to time.

Working out print sizes from pixels

Although DPI is irrelevant on screen, it matters the moment you print — and the relationship is simple arithmetic. The printed size of an image is its pixel dimension divided by the print resolution: pixels ÷ DPI = inches. A 1200-pixel-wide image printed at 300 DPI is 4 inches wide (1200 ÷ 300); the same file printed at 150 DPI spreads to 8 inches but looks softer, because each inch now contains fewer pixels.

This gives you a practical way to plan a resize for print. If you need a photo to print 6 inches wide at a crisp 300 DPI, resize it to 1800 pixels wide (6 × 300). For high-quality photo printing, 300 DPI is the usual target; large posters viewed from a distance can drop to 150 DPI or lower without looking poor. Work out the pixels you need first, then resize the image to that width and height — and remember you can only shrink to a smaller print cleanly, never invent the extra pixels a larger print at full resolution would demand.

Related tools

• Crop Image (ratio, circle)
• Image Compressor (by quality)
• Compress to Target Size (KB)
• HEIC to JPG Converter
• Image to PDF