모바일 웹에서 레티나 디스플레이 대응하기

2x 를 레티나 화질이라고한다. 항상 이미지를 다운받을때마다 2x가 궁금했는데, 이번에 레티나 대응하는법을 찾아보면서 알게되었다.

1. image-set()

background-image: image-set( "normal.png" 1x, "letina.png" 2x);

위에서 보는 코드다. 정말 간단....

2. img태그와 srcSet

<img 
src="normalImg.png" 
srcset="normalImg.png 1x, normalImg.png 2x"
alt="exmple" 
className="exmple"
></img>

위의 코드는 변수를 사용하지 않을때, 사용하면된다.
만약 리액트에서 변수를 사용하여 사용하려면, 아래와 같이 적으면 된다.

<img
src={normalImg}
srcSet={`${normalImg} 1x, ${letinaImg} 2x`}
alt="exmpleImg"
className="exmple"
></img>

참고 페이지