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