An Image Dimension Calculator With Aspect-Ratio Math and Social Media Presets

#javascript #webdev #design #tools

An Image Dimension Calculator With Aspect-Ratio Math and Social Media Presets

"What's the height if I scale this 1920×1080 image to 800 pixels wide?" "Is 1200×675 the Twitter card size or the Facebook OGP size?" "How do I crop a 4000×3000 photo to fit 1080×1920 Instagram Story?" This calculator answers all of those without opening Photoshop.

The math itself is simple — just ratio preservation — but doing it in your head dozens of times during a design task gets tedious. And remembering the exact dimensions for OGP, Twitter, Instagram Story, YouTube thumbnail, Favicon, iOS icon, etc. is impossible without a reference.

🔗 Live demo: https://sen.ltd/portfolio/image-math/
📦 GitHub: https://github.com/sen-ltd/image-math

$Screenshot$

Features:

Aspect ratio calculator (with automatic simplification)
Scale by width or by height (ratio-preserving)
Fit inside / cover outside calculations
Center crop to target ratio
Presets: social media, icons, display resolutions
File size estimation (PNG/JPEG/WebP)
Closest standard ratio detection
Japanese / English UI
Zero dependencies, 39 tests

The GCD-based ratio simplifier

A 1920×1080 image has ratio 16:9, not 1920:1080. Simplification uses GCD:

export function gcd(a, b) {
  while (b) [a, b] = [b, a % b];
  return a;
}

export function simplifyRatio(w, h) {
  const d = gcd(w, h);
  return { w: w / d, h: h / d };
}

Euclidean algorithm, runs in O(log(min(a, b))). Fast enough to compute live as the user types.

Fit vs cover

Two different ways to fit a source image into a target box:

Fit inside (letterbox): largest size where both dimensions are ≤ target:

export function fitInside(srcW, srcH, maxW, maxH) {
  const scale = Math.min(maxW / srcW, maxH / srcH);
  return { w: srcW * scale, h: srcH * scale };
}

Cover outside (crop): smallest size where both dimensions are ≥ target:

export function coverOutside(srcW, srcH, minW, minH) {
  const scale = Math.max(minW / srcW, minH / srcH);
  return { w: srcW * scale, h: srcH * scale };
}

Fit uses Math.min, cover uses Math.max. Same code shape, opposite direction. CSS object-fit: contain vs object-fit: cover implements exactly these.

Closest standard ratio

When given an arbitrary dimension, find the closest named ratio:

export function findClosestRatio(w, h) {
  const target = w / h;
  let best = null;
  let bestDiff = Infinity;
  for (const r of COMMON_RATIOS) {
    const diff = Math.abs(target - r.w / r.h);
    if (diff < bestDiff) {
      bestDiff = diff;
      best = r;
    }
  }
  return best;
}

800×600 → 4:3 (0.00 difference), 1280×544 → 21:9 (0.02 difference), 1080×1920 → 9:16 (0.00).

File size estimation

File sizes are hard to predict exactly (depends on entropy, compression settings, etc.) but a rough estimate is useful:

// Bytes per pixel, rough averages
const FACTORS = {
  png: 2.5,   // lossless, varies with complexity
  jpeg: 0.25, // high quality JPEG
  webp: 0.20, // WebP at same quality as JPEG
};
export function estimateFileSize(w, h, format) {
  return Math.round(w * h * FACTORS[format]);
}