센스있는 디자이너가 되기 위한 이미지 최적화
포맷의 특성 이해를 기반으로 한 이미지 최적화&압축
서비스 운영 디자인 업무 중 콘텐츠 관련 디자인을 자주 맡게 되는데 자주 작업하는 부분은 강의를 소개하는 커버 이미지와 광고 배너입니다.
반응형 디자인과 고해상도 스마트폰을 고려해야 하다 보니 @2x의 고해상도 PNG 포맷의 이미지 저장 → 메인 페이지에 이미지가 많아짐 → 사이트 속도 저하 문제가 발생하는 문제를 가지고 있으며, 업로드 용량이 제한되거나 최적화라는 이유로 디자인 팀 내에 tiny PNG(https://tinypng.com)를 자주 사용했습니다.
이 경우 용량은 확실하게 줄어들지만 손실 압축으로 이미지가 거칠어지거나 흐려지는 문제가 있었고 최대한 포맷 특성에 맞춰 상대적으로 저용량 & 고화질의 이미지를 뽑아내고자 사내 위키에 정리한 내용에 살을 덧붙여 공유하고자 합니다.
물론 개발단에서 Lazy loading을 사용하거나 GD Lib과 같은 도구(?)를 사용해 다양한 크기로 Thumbnail화 시키는 방법이 있으며 사실 이게 가장 효과적인 방법입니다.
하지만 위의 방법이 불가능한 상황이 있을 수도 있고, 이미지 포맷에 따른 특성을 잘 이해한다면 최대한 손실률이 낮으면서 파일 크기가 적은 이미지를 만들 수 있으므로 그러한 측면에서(?) 봐주시면 좋을 것 같습니다.
목표
이미지 확장자별 특성을 파악하고, 무분별한 손실 압축이 아니면 따라 적절한 효율의 압축을 함으로써 이미지 손상을 줄이고 궁극적으로 트래픽 절감 및 빠른 로딩 속도를 구현하는 것을 목표로 합니다.
이미지 특성에 따라 확장자 선택하면 용량을 효과적으로 줄일 수 있습니다.
1. 이미지에 포함되는 색상이 단순한 Flat 스타일이면… PNG
PNG는 무손실 포맷으로서, 자체가 스크린샷 등의 포터블한 이미지에 최적화된 포맷으로 화려한 색상이 담긴 이미지를 뽑아낼 경우 효율이 떨어지고 용량이 쉽게 증가하는 특징을 가지고 있습니다.
따라서 색상이 많지 않고 단순한 flat 스타일이라면 png을 사용하는 것이 좋습니다.
2. 이미지에 포함되는 색상이 많은 경우… JPG
반면 이미지에 들어가는 색상이 많은 경우엔 무손실 포맷인 PNG를 사용하면 모든 컬러 하나하나를 담아야 하므로, 이미지 용량이 급격하게 커집니다. 이런 경우 손실 포맷인 JPG를 사용하면 비슷한 색상끼리 엮는 식의 손실 압축을 통해 티는 나지 않지만, 용량이 크게 줄어듭니다.
JPG는 손실 포맷의 특성에 따라 수정할수록 화질이 열화되어 일명 디지털 풍화가 이루어지므로, 꼭 원본 수정 파일을 두고 수정해야 화질 열화를 막을 수 있습니다.
3. 투명도가 0 or 1로 단순한 경우 (알파 값이 없는 투명 이미지)는… GIF
투명한 이미지면 대부분 PNG로 저장해야 하지 않나? 하시는 분들이 계실 수도 있지만 꼭 그렇지 않습니다.
쓰인 색상이 256 미만이고, 알파 값이 없는 투명 이미지라면 gif가 png보다 용량을 더 적게 차지합니다.
혹은 PNG-8으로 저장하는 것 또한 용량을 줄일 수 있습니다. 단, PNG-24와 달리 알파 값을 지원하지 않으므로 IE6에서 사용해야 하거나(IE6 PNG 버그) 많은 컬러가 담긴 이미지가 아니라면 GIF만으로도 충분합니다.
지금은 웹 폰트의 존재로 이미지 폰트를 사용하는 경우가 잘 없지만, gif로 이미지 폰트를 사용하면 글꼴의 안티얼라이싱이 반투명이어서 그대로 내보낼 때 깨지는 경우가 존재합니다. 이때 포토샵에서 outline으로 입혀질 외곽선과 동일한 색으로 1PX만 그려주면, 실제 적용되었을 때 용량은 적게 차지하면서 매끈하게 보일 수 있습니다.
drop shadow가 먹힌 요소 또한 위 글꼴처럼 외곽선을 삽입해 저장하면 gif에서도 매끈하게 처리할 수 있습니다.
4. 한두 가지 단색만 사용한 경우… GIF
바로 위와 마찬가지로, 한두 가지의 단색만 사용할 경우 gif 혹은 png-8 방식이 제일 효과적입니다.
포맷 특성에 따라 이미지의 용량 더 줄여보기
위에 설명한 포맷의 특성에 따라 이미지를 저장했지만, 이미지 저장 시 포함되는 메타정보를 제거해 좀 더 줄일 수 있습니다. 이렇게 화질 손상 없이 최대한 영혼까지 줄이면서 그래도 안 되면 차선책으로 손실 압축으로 저장하는 방법에 대해 알아보고자 합니다.
1. 이미지 자체의 불필요한 데이터 제거
Photoshop을 기준으로 File > Export > save for web (legacy) 클릭 후 나타나는 패널의 우측면에 위치한 Metadata의 속성을 none으로 설정한 뒤 저장합니다.
혹은 JPEG & PNG Stripper(http://www.steelbytes.com/?mid=30)와 같은 프로그램을 사용해 생성된 이미지 내의 메타정보를 지울 수도 있습니다.
2. 무손실 압축
imageOptim(mac)
ImageOptim(https://imageoptim.com/mac)은 제가 가장 애용하는 프로그램 중 하나입니다. 시간은 오래 걸리지만 DRAG & DROP으로 간편하게 작동되며 다양한 압축옵션 선택이 가능합니다.
또한 SVG minify도 지원해 Sketch에서 export 한 SVG 파일도 조금이나마 용량을 줄일 수 있습니다.
PNG and MNG tools (windows)
windows 사용자는 PNG and MNG tools(https://pmt.sourceforge.io)를 추천해 드립니다.
CMD 열고 C:>pngcrush -rem alla -brute -reduce -d “폴더명” *.png를 입력하시면 됩니다.
Compressor.io (Online)
무손실 압축을 지원하고 옵션도 있으나 PNG에서만 무손실 압축을 지원하는 것 같습니다.
lossless 체크 후 압축을 진행하면 됩니다.
3. 손실 압축
무손실 압축을 해도 용량이 크게 줄어들지 않으면 손실 압축으로 용량을 줄일 수 있습니다.
위 본문에서 언급한 tinypng가 그나마 가장 쓰기 쉽고 빠르게 손실 압축을 진행해 주기 때문에 추천해 드립니다.
마무리
센스있는 디자이너는 사실 어그로에 가깝고, 알아두면 좋은 팁 혹은 상식으로 봐주시면 좋을 것 같습니다.
아예 처음부터 tinyPNG로 뽑아내면 될 것을 장황하게 설명하냐? 라고, 생각할 수도 있겠지만, 최대한 화질 손실을 막으면서 적은 용량의 이미지를 만들어내는 것이 목표이고 안될 경우 tinyPNG와 같은 손실 압축을 사용하자는 것이 이 글의 주제입니다.
전공자가 아니므로 이미지 포맷에 대해 잘못된 내용이 담겨있을 수 있습니다. 이 경우 알려주시면 수정하겠습니다.