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.
적용 수학 공식 및 방정식
이 Pixel Ratio Calculator는 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.