웹사이트 디자인, 이미지 선명도 높이면서 압축하는 방법

웹사이트 디자인을 처음 시작하는 분들이 가장 많이 하는 실수 중 하나가 바로 이미지 선명도를 고려하지 않고 사용한다는 것인데요, 워드프레스 홈페이지 디자인에서도 이미지 사용은 매우 중요한 부분이기 때문에 속도 문제를 해결 하면서도 선명한 이미지를 사용하는 방법을 알려 드릴게요.



우선 이 방법은 포토샵을 이용해야 하며, 그 중에서 하이패스 기능과 고급 객체로 변경해서 이미지 선명도를 확실히 올릴 수 있으며 이렇게 올려진 선명도는 특히 문자가 흐려지는 걸 방지하는 데 매우 효과가 있습니다.

 

포토샵으로 웹사이트 디자인 이미지 선명도 개선

앞서 말씀드린 것 처럼 이미지만 선명하다고 해결되지 않고, 특히 워드프레스는 이미지 용량에 영향을 많이 받을 수 있기 때문에 이미지는 150KB를 넘지 않는게 좋습니다.

따라서 블로그를 쓸 때도 썸네일은 선명한게 좋기 때문에 포토샵이 서툴더라도 일반 편집기 보다는 고급 객채로 전환시켜 하이패스 기능을 이용해 이미지 선명도를 높인 후 압축해서 사용하는 게 웹사이트 디자인 과정에서 꼭 필요한 방법입니다.

물론 하이패스 농도를 잘 조절해야 하는 것은 경험과 이미지 상태에 따라 다르며, 하이패스 사용법은 다음과 같습니다.

 

포토샵 신기능 하이패스 이용으로 이미지 선명도 올리기

아래 보이는 이미지는 본 웹사이트 회사 소개란 헤더 디자인 입니다. 단순히 캡처한 사진이며, 이를 포토샵을 이용해 653kb 이미지를 압축해서 150kb 이하로 선명도를 높여 다시 등록한 것이죠.



실제로 웹사이트를 운영하다 보면 용량이 높은 이미지나 선명도가 깨진 사진을 사용해야 하는 경우가 있는 데, 이 때 다음과 같은 방법으로 이미지를 사용하시면 됩니다.



포토샵에 이미지를 열면 다음과 같은 화면이 나오는데 가장 먼저 해줘야 하는 것은 레이어를 클릭하고 마우스 우 큭릭 후 고급 객체로 이미지를 전환해주는 것입니다.



고급 객체로 전환했으면 코멘드+j 버튼으로 레이어를 하나 복제해 줍니다.



다음으로 상단 필터 창에서 >> 기타 >> 하이패스 순으로 찾아서 클릭해 줍니다.

그럼 아래와 같은 이상한 팝업 창이 뜨는데 겁먹지 마시고 다음 설명데로 하시면 됩니다.



여기서 중요한 건 반경, 사이즈는 지정해 주는 데, 개인적으로 많이 망가진 이미지가 아니라면 3이하 정도면 충분합니다. 저는 이번 사진을 1로 지정해서 확인을 눌러 주었습니다.



다음으로 레이어 창 바로 위헤 있는 표준으로 가서 아래로 드레그를 하면 "오버레이"라는 글자가 나오는데요, 이걸 클릭해 주면 하이패스 기능이 완료됩니다.



이렇게 깨진 이미지를 선명하게 만드는 이번 포토샵 신 기능 하나로 이미지를 편집해서 사용하게 되면 대부분의 이미지를 압축된 방식으로 사용할 수 있습니다.

여기서 중요한 건 설정한 이미지를 다운 받을 때 반드시 웹용으로 레거시 해야 한다는 것이죠.



이렇게 내보내기에서 웹용으로 지정해서 다운 받아야 합니다.



마지막 화면을 보면 압축 정도를 44로 떨어뜨려도 144kb나 되는 걸 확인할 수 있습니다. 따라서 이미지 크기를 1000px로 줄인 후 압축 비율을 83으로 다운 받은 결과를 여러분께 보여 드렸습니다.

지금까지 설명하면서 보여드린 모든 이미지도 이번 포스팅을 위해 하나 하나 하이패스 기능을 통해 선명도를 높인 이미지를 사용했는 데, 어떠세요?

모든 글자가 나름 선명하게 나타나는 걸 확인할 수 있죠?

간단한 방법이니 잘 사용해 보시고, 모르는 부분이 있다면 유튜브에서 "포토샵 하이패스 기능"이라고 검색해서 영상으로 확인해도 좋을 것 같습니다.

그럼 오늘 준비한 웹사이트 디자인 팁은 이미지 선명하게 만드는 방법 이었습니다.