이 데모 살펴보기
- 사이트를 미리 보려면 앱 보기를 누른 다음 전체 화면 을 누릅니다.
- 다른 기기를 사용하여 페이지를 새로고침하면 브라우저에서 다른 이미지를 로드하는 것을 확인할 수 있습니다.
기기 에뮬레이터를 사용하면 됩니다. 특정 디스플레이 밀도를 확인하려면 다음 기기를 사용해 보세요.
밀도 1배 | BlackBerry Playbook, 여러 외부 모니터 |
밀도 2배 | iPad 또는 IPhone 5/6 |
밀도 3배 | Galaxy S5 또는 iPhone X |
index.html
에서 이를 실행하는 코드를 확인합니다.
기본 원리
밀도 설명자의 개념은 대부분의 사용자에게 익숙하지 않을 수 있습니다. 이를 더 잘 이해하려면 브라우저가 픽셀을 사용하는 방식에 관한 배경 지식을 알고 있는 것이 좋습니다.
픽셀이란 무엇인가요?
먼저 픽셀의 정의를 알아보겠습니다. 간단해 보이지만 '픽셀'은 실제로 여러 가지 의미를 가질 수 있습니다.
- 기기 픽셀('실제 픽셀'이라고도 함)
- 기기에 표시할 수 있는 가장 작은 색상 점입니다.
- 논리적 픽셀
- 그리드의 특정 위치에 있는 색상을 지정하는 정보입니다. 이 유형의 픽셀에는 고유한 실제 크기가 없습니다.
- CSS 픽셀
- CSS 사양은 픽셀을 실제 측정 단위로 정의합니다. 1픽셀 = 1/96인치
픽셀 밀도
픽셀 밀도('화면 밀도' 또는 '디스플레이 밀도'라고도 함)는 특정 실제 영역의 기기 픽셀 밀도를 측정합니다. 이는 일반적으로 인치당 픽셀 (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개가 CSS 픽셀 1개 크기'이기 때문입니다.
요즘 대부분의 기기의 device-pixel-ratio는 1.0과 4.0 사이입니다.
콘솔에
window.devicePixelRatio
를 입력하여 기기의 픽셀 밀도를 확인합니다.이 표에서 일반적인 기기의 픽셀 비율을 확인하세요. 대부분은 1.0~4.0 사이입니다.
그렇다면 이 정보를 실제로 어떻게 적용할 수 있을까요?
device-pixel-ratios를 기반으로 이미지 크기 조정
이미지가 고해상도 화면에서 가장 잘 보이도록 하려면 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
단위를 사용하여 밀도 설명자를 작성합니다. 예를 들어 여러 Retina 화면의 밀도 설명자(window.devicePixelRatio = 2
)는2x
로 작성됩니다. - 밀도 설명자가 제공되지 않으면
1x
으로 간주됩니다. - 파일 이름에 밀도 설명자를 포함하는 것은 일반적인 관례이며 파일을 추적하는 데 도움이 되지만 필수는 아닙니다. 이미지의 파일 이름은 무엇이든 될 수 있습니다.
sizes
속성은 포함할 필요가 없습니다.sizes
속성은 너비 설명자와 함께만 사용됩니다.