여러가지 의미의 pixel
'픽셀'이란, 여러가지 의미를 가진다.
- Device pixel (물리적 픽셀)
디바이스에서 컬러를 표현할 수 있는, (물리적인 수치를 가진) 작은 점. - Logical pixel (논리적 픽셀)
어떤 그리드에서 특정한 위치를 차지하는, 컬러의 정보를 담은 면적. 논리적 픽셀은 어떠한 물리적 크기를 정의하거나 가지고 있지 않다. - CSS pixel (CSS 픽셀)
CSS 스펙이 정의한, 특정한 물리적 크기를 가진 유닛. 1 CSS pixel은 1/96 인치 크기다.
디스플레이의 발전
PPI
‘Pixels per Inch’의 약자. 1인치당 픽셀(Pixel)이 몇 개인지를 나타낸다. 이를 통해 디스플레이의 픽셀 밀도를 알 수 있다.
2000년대 이전까지 보급된 디스플레이들의 픽셀 밀도는 대부분 96ppi였다. 가로크기 1인치당 96개의 픽셀이 배열되어 있었다는 뜻이다(이는 CSS 픽셀의 물리적인 크기가 1/96인치로 정의되는데 영향을 미쳤다). CRT 모니터와 초기 Windows의 픽셀 밀도 역시 96ppi였다.
2000년대에 LED 모니터가 등장하기 시작했고, Apple이 고밀도 디스플레이인 '레티나 디스플레이'를 2010년에 발표한다. 당시 레티나 디스플레이는 이전까지의 디스플레이 픽셀 밀도의 2배인 192ppi였다.
device-pixel-ratio
이렇게 새로운 디스플레이 기술이 발표되면서, 물리 픽셀은 더이상 CSS 픽셀과 같은 크기가 아니게 되었다. 그래서 물리 픽셀과 CSS 픽셀 사이의 크기 관계를 정의할 개념이 필요해졌다. 이것이 device pixel ratio 이다.
device pixel ratio는, 특정 디바이스에서 물리 픽셀과 CSS 픽셀 사이의 크기 관계를 정의한다. iPhone4는 기준이 되는 96ppi의 두 배인 192ppi 픽셀 밀도를 가졌으므로, device pixel ratio가 2 이다(192 ppi/96 ppi = 2).
이것은 다시 말하면 '물리 픽셀 2*2의 크기가 CSS 픽셀 1개 크기와 같다'는 뜻이다.
iPhone3과 4 비교
| 이름 | 발표년도 | 액정크기 | 해상도 | 픽셀밀도 | dpr |
|---|---|---|---|---|---|
| iPhone3 | 2007 | 3.5" | 320×480 | 96ppi | 1 |
| iPhone4 | 2010 | 3.5" | 640×960 | 192ppi | 2 |
해상도 :
TV, 모니터, 스마트폰 등 디스플레이 장치에서 화면을 이루는 각각의 면이 몇 개의 픽셀로 이루어져 있는가를 나타낸다. 가로 픽셀 갯수 x 세로 픽셀 갯수로 표기한다.
브라우저에 device pixel ratio를 알릴 때는 수치 뒤에 x를 붙여 표기한다. device pixel ratio 1 은 1x, device pixel ratio 1.5는 1.5x인 식이다.
래스터 이미지의 픽셀
래스터 이미지와 벡터 이미지
래스터 이미지는 비트맵 이미지라고도 불린다. 색상값을 가진 하나의 픽셀이 여러개 모여서 이미지를 이룬다. → PNG, JPEG, GIF, WEBP...
벡터 이미지는 좌표값들을 연결해 이미지를 그려낸다. 확대하더라도 항상 상이 선명하다. → SVG...
단일 디바이스에 종속되지 않게 만들어지는(여러가지 디바이스에서 접속 가능한) 웹페이지는, 1x인 디바이스에서 접속하든 2x인 디바이스에서 접속하든 디바이스에 대해서 같은 비율(크기)로 보여야 한다.
하지만 물리 픽셀 수만 두고 생각했을 때, 1x 디바이스에 최적화된 이미지는 2x 디바이스에서 매우 작게 보일 것이다. 예를 들어 iPhone3의 크기에 맞춰 가로 320 픽셀로 디자인한 웹페이지는, iPhone4에 띄웠을 때 화면의 반밖에 채울 수 없게 된다. 그래서 크기를 맞추기 위해 2x 디바이스는 자동으로 웹페이지 그래픽을 가로세로 2배씩 확대한다.
벡터 이미지는 화면을 확대하더라도 선명하게 보인다. 하지만 래스터 이미지는 이미지 픽셀 수가 정해져 있으므로, 확대를 하려면 추가로 여러개의 픽셀을 만들어내야한다. 디바이스는 알아서 더 필요한 픽셀을 일정한 법칙으로 생성하여 이미지를 확대하고 디스플레이에 표시한다.
그래서 1x 화면에서 선명했던 150×150px짜리 이미지는, 2x 화면에서는 300×300px(물리 픽셀)로 확대되어 보이게 되고, 생성된 새로운 픽셀들로 인해 흐릿하게 보인다.
이미지 선명도를 보장하는 이미지 크기
결국 device pixel ratio가 각각 다른 여러 디바이스에서, 이미지가 같은 선명도를 보장받으려면 dpr에 맞는 너비의 이미지를 준비해야한다. 250px의 CSS pixel영역을 예로 들면 다음과 같다.
| dpr | 그것은 바로 | 해당 디바이스에서 선명하게 보이는 래스터 이미지 너비 |
|---|---|---|
| 1 | 1 물리픽셀 = 1 CSS 픽셀 | 너비 250px |
| 2 | 2×2 물리픽셀 = 1 CSS 픽셀 | 너비 500px |
| 3 | 3×3 물리픽셀 = 1 CSS 픽셀 | 너비 750px |
- CSS 150px 크기로 적용한 1x 이미지와 2x 이미지를 눈으로 비교할 수 있는 페이지
https://frontend-setting-example.vercel.app/gallery/compare
참고한 글
