밀도 설명자 사용

Katie Hempenius

이 데모 살펴보기

• 사이트를 미리 보려면 앱 보기를 누른 다음 전체 화면을 누릅니다.
• 다른 기기를 사용하여 페이지를 새로고침하면 브라우저에서 다른 이미지를 로드하는 것을 확인할 수 있습니다.

기기 에뮬레이터를 사용할 수 있습니다. 특정 디스플레이 밀도를 확인하려면 다음 기기를 사용해 보세요.

• 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/96 ppi = 2)입니다. '디스플레이 픽셀 중 2개가 CSS 픽셀 1개와 같은 크기이기 때문입니다.'

오늘날 대부분의 기기의 기기 픽셀 비율은 1.0과 4.0 사이입니다.

• 콘솔에 window.devicePixelRatio를 입력하여 기기의 픽셀 밀도를 확인합니다.

• 이 표에서 일반적인 기기의 픽셀 비율을 확인하세요. 대부분은 1.0~4.0 사이입니다.

그렇다면 이 정보를 실제로 어떻게 적용할 수 있을까요?

device-pixel-ratios를 기반으로 이미지 크기 조정

이미지가 고해상도 화면에서 가장 잘 보이도록 하려면 devicePixelRatios마다 다른 이미지 버전을 제공해야 합니다.

다음 사항을 참고하세요.

• 이미지 편집기, 파일 디렉터리 및 기타 위치에 나열된 픽셀 크기는 논리 픽셀의 측정값입니다.
• 해상도가 더 높고 디스플레이가 더 큰 경우 더 큰 크기의 이미지가 필요합니다. 작은 이미지를 확대하는 것만으로는 여러 이미지 버전을 게재하는 목적을 달성할 수 없습니다. 고해상도 이미지가 제공되지 않았다면 브라우저가 이 작업을 수행했을 것입니다.

밀도 설명자를 사용하여 여러
이미지 제공

밀도 설명자는 '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 (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 속성은 너비 설명자에만 사용됩니다.