이 데모 살펴보기
- 사이트를 미리 보려면 View App을 누른 다음 Fullscreen
을 누릅니다. - 브라우저가 다른 이미지를 로드하도록 여러 기기를 사용하여 페이지를 새로고침합니다.
이를 위해 기기 에뮬레이터를 사용할 수 있습니다. 특정 디스플레이 밀도를 찾고 있다면 다음과 같은 기기를 사용해 보세요.
| 1배 밀도 | Blackberry 플레이북, 여러 외부 모니터 |
| 2배 밀도 | iPad 또는 iPhone 5/6 |
| 3배 밀도 | Galaxy S5 또는 iPhone X |
- 작동하는 코드는
index.html를 확인하세요.
기본 원리
밀도 설명자라는 개념은 대부분의 사람에게 생소할 수 있습니다. 이 두 가지를 더 잘 이해하려면 브라우저에서 픽셀이 어떻게 작동하는지에 관한 배경 지식이 있으면 도움이 됩니다.
픽셀이란?
가장 먼저 픽셀이 무엇인지 정의해 보겠습니다. 간단해 보이지만 '픽셀'에는 여러 가지 의미가 있습니다.
- 기기 픽셀 (일명 '물리적 픽셀')
- 기기에 표시할 수 있는 가장 작은 색상의 점입니다.
- 논리 픽셀
- 그리드의 특정 위치에 색상을 지정하는 정보입니다. 이 유형의 픽셀에는 고유한 실제 크기가 없습니다.
- CSS 픽셀
- CSS 사양에서는 실제 측정 단위로 픽셀을 정의합니다. 1픽셀 = 1인치의 96분의 1입니다.
픽셀 밀도
픽셀 밀도('화면 밀도' 또는 '디스플레이 밀도'라고도 함)는 특정 물리적 영역에서 기기 픽셀의 밀도를 측정합니다. 이는 일반적으로 인치당 픽셀 수 (ppi)를 사용하여 측정됩니다.
오랫동안 96ppi는 매우 일반적인 디스플레이 밀도였습니다. 따라서 CSS에서는 픽셀을 1/96인치로 정의했습니다. 1980년대부터 Windows의 기본 해상도였습니다. 또한 CRT 모니터의 해상도였습니다.
이러한 변화는 2000년대에 LED 모니터가 일반화되면서 변화하기 시작했습니다. 특히 Apple은 2010년 Retina 디스플레이를 출시하면서 큰 화제를 모았습니다. 이러한 디스플레이의 최소 해상도는 192ppi로, '일반' 디스플레이의 두 배 해상도 (192ppi/96ppi = 2)입니다.
window.devicePixelRatio
최신 디스플레이 기술이 도입됨에 따라 '기기 픽셀'은 실제 크기와 모양이 다양해지기 시작했으며 더 이상 'CSS 픽셀'과 크기가 동일하지 않습니다. '기기 픽셀'과 'CSS 픽셀' 간의 관계를 정의해야 하는 이유로 인해 devicePixelRatio('CSS 픽셀 비율'이라고도 함)이 도입되었습니다.
devicePixelRatio는 특정 기기의 기기 픽셀과 CSS 픽셀 간의 관계를 정의합니다. 192ppi 기기의 devicePixelRatio는 2 (192ppi/96ppi = 2)입니다. '디스플레이 픽셀 중 2개가 1 CSS 픽셀 크기'이기 때문입니다.
오늘날 대부분의 기기의 기기 픽셀 비율은 1.0~4.0입니다.
콘솔에
window.devicePixelRatio를 입력하여 기기의 픽셀 밀도를 확인합니다.일반적인 기기의 픽셀 비율을 확인하려면 이 표를 참고하세요. 대부분은 1.0에서 4.0 사이입니다.
그렇다면 이 정보를 실제로 어떻게 적용할 수 있을까요?
기기 픽셀 비율을 기반으로 이미지 크기를 조절합니다.
고해상도 화면에서 이미지가 가장 잘 표시되려면 다양한 devicePixelRatios에 다른 이미지 버전을 제공해야 합니다.
| 기기 픽셀 비율 | 다음을 나타냅니다. | 이 기기에서 CSS 너비가 250픽셀인 <img> 태그는 소스 이미지가... |
|---|---|---|
| 1 | 기기 픽셀 1개 = CSS 픽셀 1개 | 너비 250픽셀 |
| 2 | 기기 픽셀 2개 = CSS 픽셀 1개 | 너비 500픽셀 |
| 3 | 기기 픽셀 3개 = CSS 픽셀 1개 | 너비 750픽셀 |
다음 사항을 참고하세요.
- 이미지 편집기, 파일 디렉터리 및 기타 위치에 나열된 픽셀 크기는 논리 픽셀의 측정값입니다.
- 고해상도 화면과 큰 디스플레이에는 더 큰 크기의 이미지가 필요합니다. 단순히 더 작은 이미지를 확대하는 것은 여러 이미지 버전을 제공하는 목적을 무효화합니다. 고해상도 이미지가 제공되지 않았다면 브라우저는 이 작업을 수행했을 것입니다.
밀도 설명어를 사용하여 여러
이미지 제공
밀도 설명어는 'srcset' 속성과 함께 사용하여 여러 devicePixelRatio에 다양한 이미지를 게재할 수 있습니다.
index.html파일을 살펴보고<img>요소를 확인합니다.
<img src="flower.jpg"
srcset="flower-1x.jpg 1x,
flower-2x.jpg 2x,
flower-3x.jpg 3x">
이 예를 단어로 표현하면 다음과 같습니다.
1x,2x,3x은 모두 이미지의 대상인 픽셀 밀도를 브라우저에 알리는 밀도 설명어입니다. 이렇게 하면 브라우저에서 이 정보를 확인하기 위해 이미지를 다운로드하지 않아도 됩니다.- 브라우저는 세 가지 이미지 중에서 선택할 수 있습니다.
flower-1x.jpg(픽셀 밀도가1.0인 브라우저용),flower-2x.jpg(픽셀 밀도가2.0인 브라우저용),flower-3x.jpg(픽셀 밀도가3.0인 브라우저용)입니다. flower.jpg는srcset를 지원하지 않는 브라우저를 위한 대체 이미지입니다.
사용 방법:
- devicePixelRatio와
x단위를 사용하여 밀도 설명어를 작성합니다. 예를 들어 많은 레티나 화면(window.devicePixelRatio = 2)의 밀도 설명어는2x로 작성됩니다. - 밀도 설명자가 제공되지 않으면
1x로 간주됩니다. - 파일 이름에 밀도 설명자를 포함하는 것은 일반적인 규칙이며 파일을 추적하는 데 도움이 되지만 필수는 아닙니다. 이미지 파일 이름은 제한이 없습니다.
sizes속성을 포함할 필요는 없습니다.sizes속성은 너비 설명어에만 사용됩니다.