모바일 페이지에서 로고등 이미지 흐리게 나오는 현상 개선

아마 모바일 브라우저의 선명도가 달라서 그럴겁니다. (특히 아이폰에서 위와같은 상황이 빈번하죠)

 

노출되는 사이즈의 2배크기로 이미지 원본을 준비하세요

 

ex ) 모바일에서 50px 노출 -> 이미지는 100px로 준비

100px 이미지를 <img src='img.png' alt='' style='width:50px' />

 

 

참고로 네이버도 제가 리플단 방식으로 사용하고 있습니다.

http://m.naver.com

 

<img src="http://static.naver.net/www/mobile/edit/2015/0318/mobile_110629401121.png" width="200" height="48" alt="네이버" class="lg_m"> 

 

실제 이미지는 400 * 96 픽셀인데 200*48 픽셀로 html 에서 뿌려주고 있습니다.

 

 

모바일 기기마다 크기가 다 다르니 큰이미지를 준비하신뒤에

 

style="max-width:100px; width:100%; height:auto;"

 

최대크기를 잡아주시고 넓이는 100%로 높이는 넓이에 맞게 알아서 조절되도록 처리하면 됩니다