모바일 페이지 이미지 화질이 너무 안좋습니다.
본문
안녕하세요!
제가 지금 모바일 페이지를 만들고 있는데,
아이콘 이미지 화질이 너무 나빠서 질문 좀 드리고자 합니다.
-사용테마
[커뮤니티테마 : http://sir.kr/g5_theme/249?page=3]
▲ 위 사진에서 빨간부분으로 표시되있는 아이콘이 질문의 주인공입니다.
홈페이지 로고의 경우는 아예 사이즈를 원래 로고보다 크게 만들어버리니까
고화질이 유지되고 알아서 리사이즈되면서 작업이 가능했는데,
이녀석들은 크게 하면 그냥 잘려버리네요.. 리사이즈도 없이
이것저것 수정작업도 많이 해보고 검색도 많이 해봤는데, 정답을 찾지 못했네요.
▲ 요녀석들을 100% 원본화면으로 보면 이렇습니다..
너무 뿌얘져서 신경이 쓰일 정도네요..
해결방법을 알려주시면 감사드리겠습니다.
답변 3
아이콘도 마찬가지 2배 사이즈로 만들어 넣으시면 됩니다.
예를 들자면 아이콘 사이즈가 24x24라면 48x48로 만들고
css 스타일 background-size: 24px 24px;로 줄인다면
모바일에서도 원래 화질처럼 보이게 됩니다.
그렇군요.. 로고랑은 다르게 따로 div 등으로 묶어줘야했던거라 못했던 것 같아요..
헤매고 헤매이다가 원하던대로 까진 못했지만, 이것저것 삽질하면서
그래도 얼추 수정하였네요..ㅎㅎㅎ 댓글 감사드립니다 ^^
로고나 버튼을 svg 로 만들어서 넣으면 어떨까요?
svg는 벡터 아이콘 처럼도 출력되니까 깔끔하게 나올 듯 싶습니다만...
이런거 한번 읽어보세요..
벡터형식이다보니까 계단현상 같은게 전혀 없는거군요 ㄷㄷㄷ..
어도비 일러스트레이터는 없어서, 변환사이트를 통해서 이미지를 svg로 변환하고,
이미지 경로를 .png에서 .svg로 변경했는데 표시가 안되네요..ㅠ
그냥 로고처럼 크기를 출력크기의 두배로 설정하니까
깔끔하긴합니다..ㅎㅎ 다만 div등등 묶는게 너무 힘들어서 원하는만큼은 못 만들었네요..
또 다른 방법으론 웹폰트로 변환하는 방법도 있습니다.
요새 흔히 볼 수 있는 아이콘폰트들과 같은 겁니다.
관련해서 변환을 제공하는 곳들도 있고 svg로 변경가능하시다면 원본유지가 어느정도 가능하실 꺼라 봅니다.
감사합니다 ㅎㅎㅎ 웹폰트는 처음들어보는데 참고해볼게요!
svg로 이미지를 변환해서 적용하니까 안보이더라구요.. 뭐 따로 설정을 해줘야하는건지..ㅎㅎ
