모바일 이미지 깨짐현상 질문입니다.
본문
모바일에서 이미지를 삽입하면
분명 원본파일로(이미지 래스터화 안한 상태) jpg 100%로 저장하여 넣었는데도 불구하고
pc에서는 선명하게 뜨는데 모바일에서만 깨짐 현상이 발생합니다.
안깨지게 하는 방법이나 깨지는 원인을 알 수 있을까요??
http://ektha7303.dothome.co.kr/
연습용으로 만들어보는 중인데
모바일로 자동연동되오니 핸드폰으로 로고부분을 한번 봐주세요
답변 2
아마 모바일 브라우저의 선명도가 달라서 그럴겁니다. (특히 아이폰에서 위와같은 상황이 빈번하죠)
노출되는 사이즈의 2배크기로 이미지 원본을 준비하세요
ex ) 모바일에서 50px 노출 -> 이미지는 100px로 준비
100px 이미지를 <img src='img.png' alt='' style='width:50px' />
참고로 네이버도 제가 리플단 방식으로 사용하고 있습니다.
<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%로 높이는 넓이에 맞게 알아서 조절되도록 처리하면 됩니다
적용해보니 선명하게 출력이 됩니다. 좋은의견 감사드려요~ 나중에 봐서 채택은 못드렸네용~!
