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.
使用される計算公式・方程式
この計算ツールは5つの主要な公式を使用しています：
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 比率計算ツール home page.
比率計算ツールの使い方
この比率計算ツールは、以下の3ステップで簡単にご利用いただけます：
数値を入力
入力欄に既知の比率の値を入力します。求めたい未知数の入力欄は空欄のままにしておきます。
モードを選択
比率モード（解く、簡素化、スケーリング）を選択します。各モードで異なる計算式が適用されます。
結果を確認
計算するボタンを押します。結果画面に答えと、視覚的な比率バー、円グラフ、詳細なステップバイステップの解決プロセスが表示されます。
実例問題と段階的な解説
本比率計算ツールを使って、以下の3つの例題をステップバイステップで解決するプロセスです：
入力 1 iPhone 14 Pro: 393×852 CSS at 3× DPR
入力 2 Image for 2× and 3× displays
入力 3 Calculate DPR from screen specs
よくある質問 (FAQ)
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.