How To Crop İmages For Web
📖 Bu rehber ToolPazar ekibi tarafından hazırlanmıştır. Tüm araçlarımız ücretsiz ve reklamsızdır.
Aspect ratios by platform
A great photo badly cropped looks amateur. A mediocre photo well cropped looks intentional. Cropping for the web is less about taste than about hitting specific aspect ratios — Instagram wants 1:1 or 4:5, Twitter wants 16:9, LinkedIn header wants 4:1, Pinterest wants 2:3, and your own site’s grid probably wants something else. Get the ratio wrong and the platform crops for you, usually badly. This guide covers the aspect ratios that matter, where to put the focal point, when to use smart-crop automation versus manual control, Retina 2x math, and the safe-zone rules that keep faces and key elements from being chopped off in unpredictable containers.
The rule of thirds as a starting point
These change occasionally — platforms update their specs — but the underlying aspect ratios are stable. Crop to the ratio, then resize to the target pixels.
Focal point: where the eye lands first
Divide the frame into a 3×3 grid. Place key subjects on the intersections of the lines or along the lines themselves. Horizons go on the upper or lower third, not dead center. Eyes in a portrait go on the top horizontal third. This isn’t a rigid law — centered symmetry works for formal portraits and product shots — but it’s the default that reads as composed rather than snapshotted.
Smart crop vs manual
When you crop, you’re choosing what the viewer sees first. For a portrait, that’s usually the face. For a product, the product. For a landscape, the specific feature (the mountain, the lighthouse) rather than the whole vista. If the viewer’s eye has to search the image to find the subject, the crop is wrong. Move the subject until it’s obvious.
Retina and pixel density
For responsive images that may get cropped by the browser, set an explicit focal point with CSS:
Safe zones for responsive layouts
Smart-crop algorithms (face detection, saliency detection) pick a center for you. They work well for batches of similar photos — a catalog of product shots or a gallery of portraits. They fail on complex compositions: two faces at different depths, a face far from center, images where the “important” element is contextual (a hand holding a watch, not the face next to it).
Avoiding face cropping
For any hero image, marketing asset, or published thumbnail, crop manually. Five minutes per image beats the 15 minutes you spend fixing a smart-crop that cut off the CEO’s head.
Text in images
High-density displays (iPhone, MacBook Retina, most modern Android) render at 2x or 3x the logical pixel count. A 400px-wide card on a Retina screen is actually 800 physical pixels. Export your source at 2x the display size to keep it sharp.
Cropping versus extending
The most common crop failure is chopping the top of a head. Phone cameras compose with headroom; social crops remove it. Rules: leave at least 10% of the frame above the top of the subject’s head. Never crop between the shoulders and the chin — cut at the shoulders or mid-chest. Never crop at a joint (knee, elbow, wrist) — it looks amputated; crop mid-limb instead.
Square vs portrait on mobile feeds
If your image includes overlaid text (a product label, a quote card, a CTA), keep that text inside the safe zone and leave 10–15% margin on all sides. Platforms penalize text-heavy images (Facebook used to reject ads with >20% text) and any crop will chop unprotected text first.
Common mistakes
If a photo is 4:3 and you need 16:9, you have two options: crop off the top and bottom (loses content) or extend left and right (requires either blurred-edge fill, solid background, or generative fill). For most editorial contexts, crop. For formal logos, product packaging, or when the full composition matters, extend with a matching color background rather than crop.
Run the numbers
Instagram’s feed used to be strictly square; now 4:5 portrait takes more vertical screen real estate and typically gets higher engagement. If you’re shooting for social, prefer portrait aspect ratios for content, square for grid consistency. For Pinterest, 2:3 is non-negotiable — 1:1 pins get buried.