레티나 디스플레이까지 고려하는 이미지 설정 방법

예전에는 디스플레이의 물리적 픽셀과 논리적 픽셀이 동일했지만

레티나 디스플레이가 생기고 나서는 물리적 픽셀이 더 미세하게 나뉘어지고

2 ~ 3개의 물리적 픽셀이 하나의 논리적 픽셀을 나타내기까지 하게 됐다.

그리하여 사용자에게 픽셀이 눈에 보이지 않을 정도로 선명한 화면을 보여준다.

 

CSS의 픽셀은 논리적 픽셀을 나타낸다.

그림 파일을 100px 크기로 보여준다고 할 때

DPR(물리적 픽셀과 논리적 픽셀의 비율)이 2인 레티나 디스플레이에서는

물리적인 200px을 이용해서 논리적인 100px을 나타내게 된다.

때문에 원본 이미지의 크기가 100px이라면

논리적 100px을 나타내기 위해 물리적 200px을 채우면서 뿌옇게 보인다.

200px은 돼야 모든 물리적 픽셀에 다른 색상이 들어가 깔끔해진다.

 

이런 디스플레이의 DPR 차이에 따라 다른 크기의 이미지를 보여줄 수 있도록 

img 엘리먼트에는 srcset이라는 속성이 있다.

 

<img src="cat.jpg" srcset="cat.jpg 1x, cat@2x.jpg 2x, cat@3x.jpg 3x" class="cat">

 

.cat {
  width: 100px;
}

 

위처럼 srcset에 1x를 붙이면 1 DPR일 때 해당 이미지를 GET 요청하고, (cat.jpg)

2x를 붙이면 2 DPR일 때 이미지를 GET 요청해서 불러오게 된다. (cat@2x.jpg)

 

반드시 위대로 이미지를 나눌 필요는 없고 이미지를 보다 선명하게 나타내야 할 경우 사용한다.

 

이미지의 크기가 반응형일 때

반응형에 따라 이미지의 크기가 달라질 때에는 위와 같은 방식을 쓰면 안 되고

브라우저가 사용하기 적절한 크기의 이미지를 선택할 수 있도록 설정해야 한다.

 

<img src="cat.jpg" srcset="cat.jpg 400w, cat@2x.jpg 800w, cat@3x.jpg 1200w">

 

위처럼 각 이미지 파일의 width 크기가 얼마인지를 숫자w로 입력해주면

레티나 디스플레이나 일반 디스플레이나 할 것 없이 브라우저가 올바로 판단해서 가져올 이미지를 선택한다.

 

여기서 반응형에 따라 이미지의 width 비율을 다르게 하려면 

브라우저가 올바른 이미지 파일을 선택할 수 있도록

미디어 쿼리를 이용하지 않고 sizes 속성을 넣는다.

 

<img 
  src="cat.jpg" srcset="cat.jpg 400w, cat@2x.jpg 800w, cat@3x.jpg 1200w"
  sizes="(max-width: 500px) 100vw, (max-width: 700px) 50vw, 33vw" 
>

 

위처럼 설정하면 화면 width가 500px 이하일 때 이미지 width는 100vw,

700px 이하일 때 50vw,

넘었을 때 33vw가 된다.

 

위와 같은 설정을 자동으로 하려면 다음 사이트를 참고하자.

responsivebreakpoints.com