밀도 설명자 사용

Katie Hempenius
Katie Hempenius

이 데모 살펴보기

  • 사이트를 미리 보려면 앱 보기를 누릅니다. 그런 다음 전체 화면 전체 화면입니다.
  • 다른 기기를 사용하여 페이지를 새로고침하여 브라우저가 다른 방식으로 로드되는지 확인합니다. 이미지

이를 위해 기기 에뮬레이터를 사용할 수 있습니다. 특정 디스플레이 광고를 찾고 있는 경우 다음과 같은 기기를 사용해 보세요.

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 속성은 너비 설명자와 함께 사용됩니다.