pc 웹브라저에서 볼 때는 우측처럼 깔끔하게 보이던 그림이 모바일 웹브라우저에서 보니 좌측처럼 얼룩덜룩하게 보였다.
예를 들자면
알고보니까 pc에서는 이미지를 그대로 보여주지만 모바일은 스마트폰의 해상도가 높으면 작은 이미지를 강제로 두배로 키워서 보여주기 때문이었다.
(무조건 그런 것은 아니고 스마트폰의 해상도에 따라 다르게 보일 수 있다.)
어쨌든 도트 이미지를 각진 느낌을 살린 상태로 두배로 키우니까 모바일에서도 깨끗하게 보였다.
그런데 그러면 pc에서 얼룩덜룩하게 나온다. (pc에서는 큰 이미지를 줄여서 보여주게 되니까)
결국 pc와 모바일에서 상황에 따라 다른 이미지가 표시되게 해야 한다.
그래서 사용한 기능이 “srcset”이다.
이 기능이 해상도에 따라서 다른 이미지를 표시하게 해주기도 하고 다양한 것 같은데
나는 디바이스의 픽셀 비율(X descriptor)에 따라 다른 이미지를 표시하는 기능을 이용했다.
<img srcset="https://1.bp.blogspot.com/-40hON7ffRxc/YCoZmfgYsVI/AAAAAAABKsE/JrSKJB3k-I4vV-JLRWHFCLk59bsdhH8TACLcBGAsYHQ/s0/gri2020js_m_01.gif 2x" src="https://1.bp.blogspot.com/-CHCVfipTw08/YCoZkti1MEI/AAAAAAABKro/FH2LddOMB4cqE8kXB0giwP9x-kV46beOgCLcBGAsYHQ/s0/gri2020js_01.gif
" />
위의 코드처럼 하면 일반적으로는 js_01.gif를 표시하고 스마트폰의 웹브라우저에서 두배로 키워서 보여주는 경우에는 js_m_01.gif를 표시한다.
이 글의 내용은 의식의 흐름) 나만의 경쟁력에 집중해야 한다.에 적용되어 있다.
관련 링크
