Pixel Ratio Calculator
Calculate device pixel ratios, convert between CSS pixels and physical pixels, and determine optimal image resolutions for retina and HiDPI displays. Essential for responsive web design, mobile app development, and ensuring crisp graphics on every screen density.
🕐 Recent Calculations
What is Pixel Ratio?
The device pixel ratio (DPR) is the relationship between a device's physical pixels and its CSS (logical) pixels. A DPR of 2.0 (common on Retina displays) means each CSS pixel is rendered by a 2×2 grid of four physical pixels. This makes text and UI elements appear sharper, but images must be provided at 2× resolution to avoid looking blurry on these high-density screens.
Modern devices span a wide range of pixel ratios: standard desktop monitors at 1.0, MacBook Retina and iPad at 2.0, iPhone Pro at 3.0, and some Android devices at 2.75, 3.5, or even 4.0. Understanding pixel ratios is essential for serving correctly sized images, designing responsive layouts, and ensuring visual consistency across the diverse device ecosystem.
Fórmulas y Ecuaciones Utilizadas
Esta Pixel Ratio Calculator utiliza 5 ecuaciones principales:
1 Physical Pixels from CSS ▼
A 375px CSS width at 3× DPR: Physical = 375 × 3 = 1125 physical pixels.
2 CSS Pixels from Physical ▼
A 2560×1440 display at 2× DPR renders as 1280×720 CSS pixels.
3 Image Size for Target DPR ▼
A 300×200 CSS image area needs 600×400 source for 2× DPR, 900×600 for 3× DPR.
Explore all calculation options on the Calculadora de Relación home page.
Cómo Usar esta Calculadora
Para usar esta Calculadora de Relación, siga 3 pasos:
Ingrese los Valores
Escriba los valores de relación conocidos en los campos de entrada. Deje un campo vacío; ese es el valor desconocido que resuelve la Calculadora de Relación.
Elija el Modo
Seleccione el modo de relación: Resolver, Simplificar o Escalar. Cada modo aplica diferentes ecuaciones a sus valores de entrada.
Obtenga Resultados
Haga clic en Calcular. La pantalla de resultados muestra la respuesta con una barra de relación visual, un gráfico circular y un desglose de la solución paso a paso.
Problemas de Ejemplo y Soluciones Paso a Paso
Aquí hay 3 problemas de ejemplo con soluciones paso a paso usando esta Calculadora de Relación:
Entrada 1 iPhone 14 Pro: 393×852 CSS at 3× DPR
Entrada 2 Image for 2× and 3× displays
Entrada 3 Calculate DPR from screen specs
Preguntas Frecuentes
What is device pixel ratio (DPR)? ▼
Device pixel ratio is the ratio of physical pixels to CSS (logical) pixels on a display. A DPR of 2.0 means each CSS pixel is rendered by a 2×2 block of 4 physical pixels, resulting in sharper text and graphics. Higher DPR displays are called Retina (Apple) or HiDPI (general).
What is the DPR of an iPhone? ▼
iPhone SE/6/7/8: DPR 2.0. iPhone 12/13/14/15 standard: DPR 3.0. iPhone Pro/Pro Max: DPR 3.0. The CSS viewport width is 375-430px, but physical resolution ranges from 750px (SE) to 1290px (Pro Max).
How do I make images look sharp on Retina displays? ▼
Provide images at 2× the CSS display size. If an image displays at 600×400 CSS pixels, the source file should be 1200×800 pixels for 2× Retina. Use the HTML srcset attribute to serve this to Retina devices while sending the 1× version to standard screens.
What is the difference between CSS pixels and physical pixels? ▼
CSS pixels are the logical unit used in web design (what you set in CSS). Physical pixels are the actual light-emitting elements on the screen. On a DPR 2.0 display, 1 CSS pixel = 2×2 = 4 physical pixels. This distinction means a '1920px wide' CSS layout can be rendered by 3840 physical pixels.
How does DPR affect image file size? ▼
A 2× image has 4 times the pixel count (2× width × 2× height). A 3× image has 9 times the pixel count. This proportionally increases file size (compressed sizes vary, but expect 2-4× larger files for 2× images). This is why responsive images with srcset are important for performance.
What is srcset and how does it relate to pixel ratio? ▼
srcset is an HTML attribute that provides multiple image sources at different resolutions. The browser selects the best match based on the device's DPR and viewport size. Example: srcset='hero-400.jpg 400w, hero-800.jpg 800w, hero-1200.jpg 1200w' with sizes='100vw' lets the browser choose optimally.
What DPR should I design for? ▼
Design at 1× CSS pixels (logical) and export assets at 2× for web. This covers most devices. For iOS development, export at @2x and @3x. For Android, export mdpi (1×), xhdpi (2×), and xxhdpi (3×) at minimum. Creating only 1× assets is not acceptable for modern apps.
How do I check my screen's pixel ratio? ▼
In any browser, open Developer Tools console and type window.devicePixelRatio. On Windows, check Display Settings > Scale. On Mac, Retina displays report DPR 2.0. Online tools can also detect and display your current device's DPR.
Do SVG images need different sizes for different DPRs? ▼
No. SVG (Scalable Vector Graphics) is resolution-independent — it renders sharply at any size and any DPR. Use SVGs for icons, logos, illustrations, and any graphic that can be represented as vectors. Only raster images (JPEG, PNG, WebP) need DPR-specific sizes.
What is PPI vs. DPR? ▼
PPI (pixels per inch) measures the physical pixel density of a screen (e.g., 326 PPI for iPhone). DPR is the ratio of physical pixels to CSS pixels (e.g., 2.0 for Retina). A 326 PPI iPhone with DPR 2.0 shows CSS content at an effective 163 PPI logical density.
How does pixel ratio affect web performance? ▼
Serving unnecessarily high-resolution images to low-DPR devices wastes bandwidth and increases load time. Properly implementing responsive images with srcset and sizes attributes ensures each device downloads only the resolution it needs, improving Largest Contentful Paint (LCP) scores.