티스토리 뷰

https://material.io/devices/
에서 대개 많이 사용되는 갤럭시S6 dp 해상도를 확인해보면

360 x 640

포토샵에서 캔버스 크기는
위 사이즈 * 2로 잡고

photoshop generator 로 50%, 100% 이미지를 생성
각각 1x , @2x 이미지로

Density 가 4 로 되어 있음을 확인 할 수 있는데
360 (dp) x 4 (density) = 1440 (px)

즉, 1440 px 넓이의 이미지를
360 넓이로 1/4로 고농축 압착하여 보여줌

반대로 설명하자면 360 px 넓이 이미지를
기기에서는 4배인 1440 px 넓이로 늘려 보여줌

여튼, 귀찮거나 모르겠다 싶으면
일단 포토샵 캔버스 크기를 360 x 640 px 로 작업하고
브라우저 렌더링 확인해보기.

웹브라우저로 인한 이미지가 흐리게 보이는 이슈가 나타날때
또렷하게 하기 위한 css 는
http://itzone.tistory.com/670 참고

댓글