Screenshot Aspect Ratios: A Complete Guide for Developers

Aspect ratio is the proportional relationship between a screenshot’s width and height. It is written as width:height. A 1920×1080 image is 16:9 because both dimensions divide by 120. Aspect ratio describes shape; resolution describes the exact pixel count. Thus, 1280×720 and 3840×2160 share 16:9 but have different resolutions.

What is a screenshot aspect ratio?

An aspect ratio compares width with height. Android defines it as the proportion of an element’s width to its height, written width:height (Android screen-size guidance). Reduce the two pixel dimensions by their greatest common divisor (GCD) to get the simplest ratio.

Calculate a ratio by reducing dimensions

Write the dimensions as width × height.
Find the GCD of the two numbers.
Divide both dimensions by that GCD.
Write the resulting pair as width:height.

1920 × 1080
GCD(1920, 1080) = 120
1920 ÷ 120 : 1080 ÷ 120 = 16:9

Calculate the decimal form

Divide the longer dimension by the shorter dimension. Android’s compatibility documentation uses 854 ÷ 480 = 1.779 for a 480×854 display, which is approximately 16:9 (Android 16 Compatibility Definition). The decimal is useful for comparisons; the reduced ratio is easier to communicate.

Runnable Python calculator

from math import gcd


def aspect_ratio(width: int, height: int) -> tuple[str, float]:
    if width <= 0 or height <= 0:
        raise ValueError("width and height must be positive")
    divisor = gcd(width, height)
    ratio = f"{width // divisor}:{height // divisor}"
    decimal = max(width, height) / min(width, height)
    return ratio, decimal

for dimensions in [(1920, 1080), (1280, 800), (1170, 2532), (1440, 900)]:
    ratio, decimal = aspect_ratio(*dimensions)
    print(f"{dimensions[0]}x{dimensions[1]} = {ratio} ({decimal:.3f})")

Runnable Node.js calculator

function gcd(a, b) {
  while (b !== 0) [a, b] = [b, a % b];
  return Math.abs(a);
}

function aspectRatio(width, height) {
  if (width <= 0 || height <= 0) throw new Error('Dimensions must be positive');
  const divisor = gcd(width, height);
  return {
    ratio: `${width / divisor}:${height / divisor}`,
    decimal: Math.max(width, height) / Math.min(width, height)
  };
}

for (const [width, height] of [[1920, 1080], [1280, 800], [1170, 2532]]) {
  const result = aspectRatio(width, height);
  console.log(`${width}x${height} = ${result.ratio} (${result.decimal.toFixed(3)})`);
}

Common screenshot ratios

Ratio	Example dimensions	Typical use
16:9	1920×1080, 1280×720	Widescreen video, desktop and TV layouts
16:10	1440×900, 1280×800	Many laptop and Mac screenshots
3:2	1500×1000	Some cameras, tablets and desktop compositions
4:3	1600×1200	Traditional displays and tablet layouts
1:1	1080×1080	Square cards and social assets
9:16	1080×1920	Portrait video and mobile compositions
3:4	1200×1600	Portrait tablet layouts
2:3	1200×1800	Portrait print-like compositions

Android’s design guidance recognizes 16:9, 3:2, 4:3, 1:1, 3:4 and 2:3 as useful UI proportions (Android guidance). A ratio does not determine image quality: any proportional pixel dimensions can represent it.

Aspect ratio versus resolution

Term	Meaning	Example
Aspect ratio	Shape expressed as width:height	16:9
Resolution	Total pixel dimensions	1920×1080
Pixel count	Width multiplied by height	2,073,600 pixels

Record both values in specifications: “1440×900 pixels, 16:10.” A 16:9 crop can change the composition even when the source has enough pixels. Do not crop a required device canvas simply to match a generic ratio.

Landscape, portrait and rotation

Use width:height for landscape and height:width for portrait. Rotating a 16:9 canvas produces 9:16. The underlying shape is the same, but stores and devices usually require separate files and exact orientation-specific dimensions.

For example, 1170×2532 reduces to 390:844, approximately 19.5:9. Its landscape counterpart is 2532×1170. Keep the device’s native dimensions when a submission specification calls for them.

App Store screenshot dimensions

Platform requirements override generic “standard” ratios. Check the current specification before exporting.

Apple examples

Mac: 1280×800, 1440×900, 2560×1600 or 2880×1800; all are 16:10.
Apple TV: 1920×1080 or 3840×2160; both are 16:9.
iPhone: requirements vary by generation, including 1179×2556 / 2556×1179 and 1290×2796 / 2796×1290.
iPad: examples include 2048×2732 / 2732×2048 and 1668×2224 / 2224×1668.

See Apple’s App Store Connect screenshot specification. The cited reference accepts JPEG, JPG and PNG and disallows alpha channels or transparency.

Android and responsive layouts

Android configurations can have unusual aspect ratios. Build layouts that adapt to available width and height instead of assuming one fixed canvas (Android screen-support documentation). Test at representative phone, tablet, foldable and desktop window sizes.

A practical workflow for choosing dimensions

Identify the destination: device, app store, website template, documentation page or social channel.
Read its current specification: capture accepted pixel dimensions, file formats, transparency rules and orientation requirements.
Choose the canvas: use the required dimensions when they are fixed; otherwise select a ratio that matches the layout.
Calculate and verify: reduce width and height with the GCD and record the decimal ratio.
Capture responsively: test multiple viewport sizes and content lengths.
Export separately: keep portrait and landscape files distinct when both are required.
Validate the file: check exact pixels, format, color mode and whether an alpha channel is present.

Capturing exact aspect ratios in a browser

For a local or self-hosted workflow, set the browser viewport to the target width and height, wait for the page to settle, then capture the viewport or full page. Full-page screenshots can be taller than the viewport, so their final ratio depends on document height. If you need a fixed ratio, capture a fixed viewport or crop after rendering while preserving the required dimensions.

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage({ viewport: { width: 1920, height: 1080 }, deviceScaleFactor: 1 });
  await page.goto('https://example.com', { waitUntil: 'networkidle' });
  await page.screenshot({ path: 'screenshot-16x9.png', type: 'png' });
  await browser.close();
})();

For retina output, increase deviceScaleFactor; the CSS viewport ratio remains 16:9 while the physical pixel dimensions increase. Avoid confusing that scale factor with a different aspect ratio.

Or skip the browser setup

ScreenshotNeo captures a URL with one request and supports PNG, JPEG, WebP and PDF. Cookie and consent banners are accepted and removed before capture, along with more than 60 known consent platforms, newsletter popups and chat widgets. Bot checks, blank pages, timeouts, failed loads and cache hits are not billed, and response headers identify the page verdict and billing result. Its MCP server lets Claude, Cursor and other MCP clients use take_screenshot, get_page_info and capture_pdf.

Set the viewport and other capture options in the request; the service supports device presets, arbitrary viewports, retina scale, full-page capture, element selectors, custom CSS and JavaScript, waits, blocking rules, headers, cookies, user agents, timezone, geolocation, resizing and caching. See the ScreenshotNeo documentation.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

There are 1,000 screenshots per month free with no card. Paid plans start at $5 for 3,000 shots, and every feature is included on every plan. Create a free ScreenshotNeo account.

Troubleshooting aspect-ratio problems

Symptom	Cause	Fix
The ratio is slightly different	Dimensions were rounded or a browser scrollbar changed the viewport	Use exact integer dimensions and account for scrollbar behavior.
Portrait image is rejected	Landscape dimensions were supplied or orientation was swapped	Use the platform’s portrait pair and verify width is less than height.
Screenshot looks stretched	Image was resized without preserving proportions	Lock the aspect ratio while resizing; use proportional scaling.
Full-page capture has an unexpected ratio	Document height changes with content, fonts or lazy loading	Wait for content, capture a fixed viewport, or crop to a specified canvas.
Store upload fails despite the right ratio	Wrong pixel dimensions, format, color mode or alpha channel	Validate every requirement in the current store specification.
Important content is cut off	Design assumed one fixed ratio	Use responsive breakpoints, safe areas and tests at unusual widths.
Mobile UI differs from desktop	Viewport, device scale, user agent or orientation differs	Set the target viewport and device profile explicitly before capture.

Performance, reliability and cost notes

Capture time: waiting for network idle, fonts, animations and lazy images improves completeness but increases latency. Prefer a specific selector wait when possible.
Determinism: freeze animations, use stable test data and set timezone and locale when text or dates affect layout.
Large pages: full-page images consume more memory and may exceed downstream upload limits. Element or viewport captures are cheaper to process.
Scaling: cache identical URLs when content is stable, and use bulk capture for up to 100 URLs per call where supported.
Cost: track pixel dimensions and capture frequency. ScreenshotNeo bills only clean shots; failed loads, blank pages, bot checks, timeouts and cache hits are free.

FAQ

Is 1920×1080 always 16:9?

Yes. Dividing both dimensions by 120 gives 16:9. Other 16:9 resolutions include 1280×720 and 3840×2160.

Can two screenshots have the same ratio but different quality?

Yes. Ratio describes shape; resolution and pixel density determine detail.

Should I use 16:9 for every screenshot?

No. Use the target device or publishing specification. Mac examples are 16:10, and many phones are tall portrait ratios.

How do I handle a design that must work at several ratios?

Use responsive constraints, protect important content with safe margins, and test every required viewport instead of scaling one fixed image.

Does retina scale change the aspect ratio?

No. It changes the number of physical pixels per CSS pixel. The width-to-height proportion remains the same.