제가 틀렸을 수도 있지만, 이렇게 하는 것이 타당하다고 생각합니다.
HTML srcset를 보면, 디바이스 픽셀 비율(x1, x1.5, x2)에 따라 다음 이미지들이 제공됩니다.
https://...2f50d4ad9f5f865b783b02d392de75bdceec01da_2_690x460.jpeg,
https://...2f50d4ad9f5f865b783b02d392de75bdceec01da_2_1035x690.jpeg 1.5x,
https://...2f50d4ad9f5f865b783b02d392de75bdceec01da_2_1380x920.jpeg 2x
보통 모바일 기기는 픽셀 밀도가 높아 x2 비율(또는 그 이상)을 가집니다.
따라서 더 높은 해상도의 이미지를 제공하기를 원하게 됩니다.
디바이스 픽셀 비율
디바이스 픽셀 비율(DPR)은 디바이스 제조사가 제공하는 수치로, HiDPI(High Dots Per Inch) 또는 Retina(애플의 상표) 디스플레이에 사용됩니다. 이러한 디스플레이는 현대의 스마트폰, 태블릿, 일부 노트북 및 모니터에 포함됩니다.
DPR은 디스플레이의 픽셀 밀도와 직접적인 상관관계가 있으며, 밀도가 높을수록 DPR 값도 커집니다.DPR은 화면의 가로(폭) 또는 세로(높이) 방향에서 물리적(디바이스) 픽셀과 논리적(CSS) 픽셀 사이의 비율입니다.
즉, DPR은 화면의 CSS 해상도를 계산하는 데 사용되는 수치입니다. DPR을 통해 한 CSS 픽셀이 실제 물리적 하드웨어 픽셀 몇 개로 구성되어 있는지 직접 확인할 수 있습니다.예시:
Apple iPhone 12
디바이스(물리적) 픽셀 해상도: 1170 x 2532
DPR: 3
폭: 1170/3 = 390, 높이: 2532/3 = 844
따라서 CSS 픽셀 해상도: 390 x 844DPR이 3이므로, 픽셀 그리드에서: 3(폭) x 3(높이) = 9; 9개의 물리적 픽셀이 하나의 CSS 픽셀을 형성합니다.