Image Cropping Aspect Ratios — Standard Sizes for Web, Social, and Print

Cropping images to the correct aspect ratio for each platform prevents distortion and ensures images display correctly. Here are the standard ratios and how to crop programmatically.

Calculate target dimensions with the Aspect Ratio Calculator.

Standard aspect ratios by platform

CSS: crop with object-fit

/* Crop image to a container with a fixed aspect ratio */
.social-card-image {
  width: 100%;
  aspect-ratio: 1.91 / 1;  /* OG image ratio */
  object-fit: cover;
  object-position: center top;  /* Crop from top for portraits */
}

.instagram-post {
  width: 100%;
  max-width: 1080px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.story-preview {
  width: 200px;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  object-position: center;
}

JavaScript: crop image in the browser with Canvas

function cropImageToRatio(imgElement, targetRatio, outputWidth = 1200) {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  
  const srcW = imgElement.naturalWidth;
  const srcH = imgElement.naturalHeight;
  const srcRatio = srcW / srcH;
  
  let sx, sy, sw, sh;
  
  if (srcRatio > targetRatio) {
    // Source is wider than target — crop horizontally
    sh = srcH;
    sw = Math.round(srcH * targetRatio);
    sx = Math.round((srcW - sw) / 2);
    sy = 0;
  } else {
    // Source is taller than target — crop vertically
    sw = srcW;
    sh = Math.round(srcW / targetRatio);
    sx = 0;
    sy = Math.round((srcH - sh) / 2);
  }
  
  canvas.width = outputWidth;
  canvas.height = Math.round(outputWidth / targetRatio);
  
  ctx.drawImage(imgElement, sx, sy, sw, sh, 0, 0, canvas.width, canvas.height);
  
  return canvas.toDataURL('image/jpeg', 0.9);
}

// Usage:
const croppedDataUrl = cropImageToRatio(document.querySelector('img'), 16/9, 1280);

Python: crop with Pillow

from PIL import Image

def crop_center(img: Image.Image, target_ratio: float) -> Image.Image:
    """Crop image to target aspect ratio from center."""
    w, h = img.size
    src_ratio = w / h
    
    if src_ratio > target_ratio:
        # Crop sides (image is too wide)
        new_w = round(h * target_ratio)
        left = (w - new_w) // 2
        return img.crop((left, 0, left + new_w, h))
    elif src_ratio < target_ratio:
        # Crop top/bottom (image is too tall)
        new_h = round(w / target_ratio)
        top = (h - new_h) // 2
        return img.crop((0, top, w, top + new_h))
    
    return img  # Already correct ratio

def resize_to(img: Image.Image, width: int, height: int) -> Image.Image:
    return img.resize((width, height), Image.LANCZOS)

# Batch crop for social media:
SOCIAL_CROPS = {
    'instagram_square': (1, 1080, 1080),
    'instagram_portrait': (4/5, 1080, 1350),
    'og_image': (1.91, 1200, 628),
    'youtube_thumbnail': (16/9, 1280, 720),
}

def batch_social_crops(input_path: str, output_dir: str = '.'):
    img = Image.open(input_path)
    stem = Path(input_path).stem
    
    for name, (ratio, w, h) in SOCIAL_CROPS.items():
        cropped = crop_center(img, ratio)
        resized = resize_to(cropped, w, h)
        resized.save(f'{output_dir}/{stem}_{name}.jpg', 'JPEG', quality=90)
        print(f'Saved: {stem}_{name}.jpg ({w}×{h})')

Node.js: crop with sharp

import sharp from 'sharp'; // npm install sharp

async function cropToRatio(inputPath, outputPath, width, height) {
  // sharp's resize with cover strategy crops to fill dimensions:
  await sharp(inputPath)
    .resize(width, height, {
      fit: 'cover',      // Crop to fill (maintains ratio)
      position: 'centre',  // Crop from center
    })
    .toFile(outputPath);
}

// Batch social media crops:
const crops = [
  { name: 'og', w: 1200, h: 628 },
  { name: 'square', w: 1080, h: 1080 },
  { name: 'story', w: 1080, h: 1920 },
];

for (const { name, w, h } of crops) {
  await cropToRatio('photo.jpg', `photo-${name}.jpg`, w, h);
}

Focal point cropping (face detection)

Center-cropping misses subjects at the edge. Use focal point data when available:

// If you have a focal point (x%, y% from top-left):
async function cropAtFocalPoint(inputPath, outputPath, width, height, focalX = 0.5, focalY = 0.5) {
  const meta = await sharp(inputPath).metadata();
  const srcW = meta.width;
  const srcH = meta.height;
  
  const targetRatio = width / height;
  const srcRatio = srcW / srcH;
  
  let sx, sy, sw, sh;
  
  if (srcRatio > targetRatio) {
    sw = Math.round(srcH * targetRatio);
    sh = srcH;
    sx = Math.round(focalX * srcW - sw / 2);
    sy = 0;
    sx = Math.max(0, Math.min(sx, srcW - sw));
  } else {
    sw = srcW;
    sh = Math.round(srcW / targetRatio);
    sx = 0;
    sy = Math.round(focalY * srcH - sh / 2);
    sy = Math.max(0, Math.min(sy, srcH - sh));
  }
  
  await sharp(inputPath)
    .extract({ left: sx, top: sy, width: sw, height: sh })
    .resize(width, height)
    .toFile(outputPath);
}

Related tools

• Aspect Ratio Calculator — calculate crop dimensions
• Image Compressor — compress after cropping
• Favicon Generator — generate icon crops