Display Ratio Calculator

What is a Display Ratio Calculator?

A display ratio calculator helps web developers and designers work with aspect ratios, screen resolutions, DPI (dots per inch), and retina image sizes. It’s essential for creating responsive layouts, exporting assets at the correct resolutions, and understanding how designs scale across different devices.

Aspect Ratios

Common Aspect Ratios

• 16:9 – Widescreen displays, YouTube, most monitors
• 16:10 – Many laptops (MacBook, Dell XPS)
• 4:3 – Traditional monitors, older TVs
• 4:5 – Portrait orientation
• 1:1 – Square (Instagram, social avatars)
• 21:9 – Ultrawide monitors

Aspect Ratio Formula

Aspect Ratio = Width ÷ Height

To simplify a ratio, divide both numbers by their Greatest Common Divisor (GCD):

• 1920 × 1080 → 1920 ÷ 120 = 16, 1080 ÷ 120 = 9 → 16:9

Retina / High-DPI Displays

What is Retina?

Retina displays pack more pixels into the same physical space. A device with a 2× (Retina) display shows 2 pixels per CSS pixel; a 3× display shows 3 pixels per CSS pixel.

Exporting Assets

For sharp images on Retina:

• @1x: Base design size (e.g. 375 × 812 for iPhone)
• @2x: Double the dimensions (750 × 1624)
• @3x: Triple the dimensions (1125 × 2436)

CSS and Image Sizing

Use srcset or image-set() to serve the right image:

<img src="logo.png" srcset="[email protected] 2x, [email protected] 3x" alt="Logo" />

DPI and PPI

DPI vs PPI

• DPI (dots per inch) – Used for print
• PPI (pixels per inch) – Used for screens (often used interchangeably)

Formula

PPI = √(pixel_width² + pixel_height²) ÷ diagonal_inches

Or for horizontal/vertical: PPI = pixels ÷ physical inches

Common Values

• 72 DPI – Traditional print reference
• 96 DPI – Windows default
• 163 DPI – MacBook Retina 13”
• 264 DPI – iPhone 14
• 458 DPI – iPhone 14 Pro Max

Resolution Scaling

When scaling a design to fit a target resolution:

1. Maintain aspect ratio – Don’t stretch
2. Scale to fit – Use the smaller scale factor (width or height) so the image fits entirely
3. Letterboxing – If aspect ratios differ, you may have black bars

Example

Design: 1920 × 1080 (16:9)
Target: 2560 × 1440 (16:9)
Scale: 2560 ÷ 1920 = 1.33
Result: 2560 × 1440 (exact fit)

Design: 1920 × 1080
Target: 1920 × 1200 (16:10)
Scale by width: 1920 ÷ 1920 = 1
Scale by height: 1200 ÷ 1080 = 1.11
Use smaller: 1 → Result: 1920 × 1080 (letterboxed)

Web Design Tips

Responsive Breakpoints

Common breakpoints (in pixels):

• Mobile: 320, 375, 414
• Tablet: 768, 1024
• Desktop: 1280, 1440, 1920

Viewport Meta

<meta name="viewport" content="width=device-width, initial-scale=1" />

Device Pixel Ratio

Use window.devicePixelRatio in JavaScript to detect Retina:

const ratio = window.devicePixelRatio || 1;
// 1 = standard, 2 = Retina, 3 = Super Retina

Frequently Asked Questions

What is the difference between logical and physical pixels?

Logical pixels (CSS pixels) are what you specify in your design. Physical pixels are the actual hardware pixels. On a 2× Retina display, 1 CSS pixel = 2 × 2 physical pixels.

When should I use @2x vs @3x?

Export both when possible. Use @2x for most devices; @3x for newer iPhones and high-end Android. Browsers will pick the best match via srcset.

How do I calculate DPI for a diagonal measurement?

If you know the diagonal in inches: PPI = √(width² + height²) ÷ diagonal_inches