📌 레티나란?

인간의 눈으로는 화소를 구분할 수 없는 화소 밀도를 가진 애플이 만든 브랜드의 이름이다. 애플의 레티나는 300PPI(Pixel Per Inch) 고해상도 디스플레이를 브랜드화한 것이며, 일반 맥북Pro보다 최대 4배 선명하고, Full-HD(1920X1080) 해상도보다 2.5배 선명한 고해상도 LCD 이다. 실제 '레티나'란 망막이라는 뜻으로, 사람의 눈으로 볼 수 있는 한계를 의미한다.
( 맥북프로 레티나 : 2015년 3월에 출시된 애플의 매킨토시 포터블 컴퓨터 라인업이다. 맥북 레티나는 맥북에어와 비슷한 모습이나, 더 얇고 가볍다. )

📌 레티나 디스플레이의 문제

레티나와 같은 고해상(고밀집도)도 디스플레이는 픽셀이 더 세분화되어있기 때문에 같은 이미지도 흐리게 보이는 현상이 나타난다. 기존의 화면 크기를 유지한 채 해상도만 4배로 증가시키는 특징 때문.

📌 해결법

2배이상 큰 이미지를 준비하여 기존 크기로 지정하여 넣어주면 고해상도에서도 선명한 이미지를 얻을 수 있다. 작업 시 여러가지 사이즈의 이미지를 준비하여 레티나 문제 대응하도록 하자!

img 태그의 srcset 속성을 사용하여 레티나 디스플레이 대응하기

• srcset = 브라우저가 디스플레이에 따라 적절한 이미지를 불러오도록 한다.
• descriptor(설명자)를 제공하지 않으면 1x인 것으로 가정한다.

<img src="image.png" srcset="image@2x.png 2x, image@3x.png 3x"/>