How to Crop a Photo Online

Most cropping advice hands you a pixel size and stops there. That is the wrong unit. When you crop a photo online for Instagram, X, or LinkedIn, the platform enforces an aspect ratio and then re-encodes your pixels anyway. Get the ratio right and the pixel count mostly takes care of itself. Get it wrong and the platform crops a second time, usually through your subject's head.

#TL;DR

• Crop to a documented aspect ratio; pixel dimensions get re-encoded server-side.
• LinkedIn accepts 3:1 to 4:5 and centre-crops anything outside that range.
• X shows single photos in full between 2:1 and 3:4 aspect ratios.
• Cropping is lossless; the re-encode afterwards is not. Crop once, from the original.
• EXIF Orientation is why cropped phone photos come out sideways.

#How to crop a photo online without losing quality

The phrase hides two separate operations. Cutting pixels away costs nothing. Writing the result back to a file usually does.

#Crop to a ratio, not to a pixel size

A crop rectangle has four numbers, but only one of them travels with the image: the ratio of width to height. Every major platform resizes on ingest. If you crop a 6000 × 4000 photo to 1080 × 1350 and upload it, the service will decode, scale, and re-compress it to whatever its current pipeline wants. What survives is the 4:5 shape.

So the practical rule is: pick the ratio first, crop as generously as the source allows, and let the image cropper hold the ratio locked while you move the frame. Downscale afterwards with an image resizer only if you actually need a smaller file.

#Why cropping a JPEG re-encodes the whole file

JPEG is not a pixel array on disk. It is a stream of quantised frequency coefficients. To cut a rectangle out of it, a browser-based tool has to decode the whole image to RGB, draw the sub-rectangle onto a canvas, and encode a new JPEG. That second encode applies quantisation again, on pixels that already carry the first encode's artifacts. The damage is small at quality 90 and obvious at quality 60.

Two ways to avoid stacking generations:

• Crop from the original camera file, not from a copy you already exported.
• If the image will be edited again, crop to PNG or WebP lossless and convert at the end with an image format converter.

#When you can crop a JPEG losslessly

There is an exception, and it is a real one. JPEG encodes in minimum coded units — 8 × 8 blocks, or 16 × 16 when chroma subsampling is on. A crop whose top-left corner lands exactly on an iMCU boundary can be performed entirely in the coefficient domain, with no decode and no re-encode.

The jpegtran utility shipped with libjpeg-turbo and mozjpeg does this. Per the jpegtran manual page, if the requested corner is not on an iMCU boundary it is silently moved up and to the left until it is, so the output covers at least the region you asked for and possibly a little more.

# Lossless crop: 1200x1200 at offset 400,200
jpegtran -crop 1200x1200+400+200 \
  -copy none in.jpg > out.jpg

Add an f to a dimension to force the exact size instead of snapping outward. This is the right tool for archival work and the wrong tool for social crops, where you want pixel-exact framing and the re-encode is unavoidable anyway.

#What aspect ratio should I use for each platform

Cheatsheets on this topic age badly because most of them quote numbers no platform ever published. Here is what the platforms themselves document.

#LinkedIn: 3:1 to 4:5, and what happens outside it

LinkedIn is the most explicit. Its help documentation for sharing photos states a minimum of 552 × 276 pixels, recommends 1080 pixels wide, and accepts aspect ratios from 3:1 down to 4:5 (width : height). Anything taller than 4:5 gets centred and cropped to fit the maximum ratio. Uploads cap at 5 MB, and a single post can carry up to 20 images.

That last detail matters for carousels: if you upload twenty photos with twenty different ratios, LinkedIn normalises them and your composition decisions get overruled one by one. Crop the whole set to a single ratio before uploading.

#X: single photos display in full between 2:1 and 3:4

X's media best practices documentation says that a single photo with a standard aspect ratio — between 2:1 and 3:4 — displays in full in the timeline, without the preview crop that non-standard ratios trigger. A post can carry up to four photos, one animated GIF, or one video.

The practical reading: 3:4 is the tallest safe portrait crop on X, one notch shorter than the 4:5 LinkedIn allows. If you are posting the same image to both, crop to 4:5 for LinkedIn and 3:4 for X rather than splitting the difference.

#Instagram: what the help centre actually commits to

Instagram publishes far less than the cheatsheets imply. Its help centre page on photo resolution commits only to uploading photos at the best quality available, up to 1080 × 1080 pixels. There is no official public ratio table.

In practice the feed has long accepted three shapes — 1:1 square, 4:5 portrait, and roughly 1.91:1 landscape — with Stories and Reels at 9:16. Treat those as observed behaviour rather than a specification, and re-check before you build a template around them. The profile grid is a separate crop from the feed, which is why a portrait photo that looks right in the feed can lose its edges on your profile.

#How cropping actually works in the browser

Every in-browser cropper is doing the same two things underneath: choosing a source rectangle, and drawing it into a smaller destination.

#The nine-argument drawImage() call

The Canvas 2D API's drawImage() has a nine-argument form whose first four numbers after the image describe the sub-rectangle to take from the source. Per MDN's drawImage() reference, sx/sy are the top-left corner of that sub-rectangle and sWidth/sHeight its size; dx/dy/dWidth/dHeight place and scale it on the canvas.

const c = document.createElement("canvas");
c.width = sw;
c.height = sh;
const ctx = c.getContext("2d");
// take (sx,sy,sw,sh), draw 1:1 at origin
ctx.drawImage(img, sx, sy, sw, sh, 0, 0, sw, sh);
c.toBlob((blob) => save(blob), "image/jpeg", 0.92);

One gotcha MDN calls out explicitly: drawImage() uses the source element's intrinsic size in CSS pixels. If you built the Image with constructor dimensions, you must read naturalWidth and naturalHeight to compute crop coordinates, not width and height.

#createImageBitmap() and the crop rectangle

For anything batch-sized, createImageBitmap() is the better primitive: it accepts a Blob directly, takes the same sx, sy, sw, sh crop arguments, decodes off the main thread, and works inside a Web Worker.

const bmp = await createImageBitmap(
  file, sx, sy, sw, sh,
  { imageOrientation: "from-image" }
);

It also exposes resizeWidth, resizeHeight, and resizeQuality (pixelated, low, medium, high), so a crop-then-downscale can happen in one decode instead of two.

#Why your cropped photo comes out rotated

This is the single most common bug report for any cropping tool, and it is not the tool inventing problems. Phone cameras write the sensor image in its native orientation and record how it should be rotated in an EXIF Orientation tag. A naive decoder reads the raw pixels, ignores the tag, and now the crop rectangle the user drew on a portrait preview is being applied to a landscape buffer.

The fix is the imageOrientation option on createImageBitmap(). As MDN documents, the default from-image honours EXIF orientation metadata, while none deliberately ignores it and uses the encoded orientation. If you are debugging a rotation bug, check which of those two your pipeline picked before you touch anything else.

#Crop, resize, or both?

These get conflated constantly, and the difference decides whether your subject survives.

#Crop changes the frame; resize changes the scale

Cropping is the destructive one and therefore the one to do deliberately. Resizing is reversible in intent if not in pixels — you can always re-export from the original at a different size.

#The order that wastes the least quality

Crop first, resize second, compress last. Cropping first means the downscale operates on exactly the pixels you are keeping, so the resampling filter is not averaging in content you are about to throw away. Compressing last means you only pay the encode penalty once. Run the final file through an image compressor at the end, not in the middle.

#Composition that survives a second crop

Assume the platform will crop again — for a grid thumbnail, a link preview, a notification card. Practical defences:

• Keep the subject inside the centre square of whatever ratio you export.
• Leave 8–10% headroom above faces; grid thumbnails eat the top edge first.
• Never put text in the outer 10% on any side.
• Export one master at the most generous ratio, then derive the tighter crops from it.
• Check the crop at thumbnail size, not at 100% zoom — that is how it will be seen.

#Common cropping mistakes

#Cropping a file you already cropped

Each round trip through a JPEG encoder is permanent. If you crop, upload, download the platform's version, and crop again, you are three generations deep. Keep the original and re-crop from it every time.

#Uploading to a tool that uploads your photo

Most "free online cropper" sites POST your file to a server, crop it there, and hand back a download. For a holiday snapshot that is a nuisance; for an ID document, a whiteboard photo, or anything with a face in it, it is a data transfer you did not need to make. Canvas-based cropping runs entirely client-side — the arithmetic above is all a browser needs, and no byte has to leave the machine.

#Forgetting that the crop strips nothing

Cropping removes pixels, not metadata. GPS coordinates, camera serial numbers, and timestamps in the EXIF block survive a crop unless the encoder deliberately drops them. If the photo is going somewhere public, strip metadata as a separate, explicit step.

#References

• CanvasRenderingContext2D: drawImage() method — MDN — nine-argument source-rectangle syntax and the intrinsic-size caveat used in the code sample.
• Window: createImageBitmap() method — MDN — crop arguments, imageOrientation EXIF handling, and the resize options.
• Share photos on LinkedIn | LinkedIn Help — minimum dimensions, 3:1–4:5 ratio range, 5 MB cap, 20-image limit.
• Media best practices | X Developer Platform — the 2:1 to 3:4 standard-ratio range for single photos.
• What's the image resolution when I share a photo on Instagram? | Instagram Help Centre — the only official statement on upload resolution.
• jpegtran(1) manual page — mozjpeg — lossless crop semantics and iMCU boundary snapping.

#Related on iKit

• Resize an image by pixels, percentage, or longest side — the companion operation: what to do after the crop when the file is still too large.
• The 2026 Instagram, X and LinkedIn size cheatsheet — exact pixel targets per placement, once you have settled on a ratio here.
• What re-encoding does to EXIF and location data — why a crop alone does not remove the GPS tag, and what does.
• Convert HEIC to JPG, PNG or WebP in the browser — the first step when the photo you want to crop came straight off an iPhone.
• PNG vs JPG vs WebP vs AVIF in 2026 — which format to write the cropped result to, and why lossless matters mid-workflow.
• Remove an image background without Photoshop — when the problem is not the frame but everything behind the subject.