센스있는 디자이너가 되기위한 이미지 최적화

포맷의 특성의 이해를 기반으로 한 이미지 최적화 & 압축

Dong-gri
Dong-gri
Apr 12 · 9 min read
Image for post
Image for postImage for post
이미지 용량이 크면, 로딩속도가 길어지고 트래픽 부담이 심해집니다.

서비스 운영 디자인 업무 중 콘텐츠 관련 디자인을 자주 맡게되는데 자주 작업는 부분이 강의를 소개하는 커버이미지와 광고 배너입니다.

적응형이 아닌 반응형 디자인과 고해상도 스마트폰을 고려해야 하다보니 @2x의 고해상도 PNG포맷의 이미지 저장 → 메인 페이지에 이미지가 많아짐 → 사이트 속도저하 문제가 발생하는 문제를 가지고 있으며, 업로드 용량이 제한되거나 최적화라는 이유로 디자인 팀내에 tinyPNG(https://tinypng.com)를 자주 사용했습니다.

Image for post
Image for postImage for post
tiny png는 간단하고 빠르게 이미지용량을 줄일 수 있지만 손실압축이라 화질이 깨지는 것은 당연하나, 너무 눈에띄게 보였습니다.

이 경우 용량은 확실하게 줄어들지만 손실압축으로 이미지가 거칠어지거나 흐려지는 문제가 있었고 최대한 포맷 특성에 맞춰 상대적으로 저용량 & 고화질의 이미지를 뽑아내고자 사내 위키에 정리한 내용에 살을 덧붙여 공유하고자 합니다.

물론 개발단에서 Lazy loding을 사용하거나 GD Lib와 같은 도구(?)를 사용해 다양한 크기로 Thumnail화 시키는 방법이 있으며 사실 이게 가장 효과적인 방법입니다.

하지만 위의 방법이 불가능한 상황이 있을 수도 있고, 이미지 포맷에 따른 특성을 잘 이해한다면 최대한 손실률이 적으면서 파일크기가 적은 이미지를 만들 수 있으므로 그러한 측면에서(?) 봐주시면 좋을것 같습니다.


목표

이미지 확장자별 특성을 파악하고, 무분별한 손실압축이 아닌 경우에 따라 적절한 효율의 압축을 함으로써 이미지 손상을 줄이고 궁극적으로 트래픽 절감 및 빠른 로딩 속도를 구현하는 것을 목표로 합니다.

이미지 특성에 따라 확장자 선택하면 용량을 효과적으로 줄일 수 있습니다.

1. 이미지에 포함되는 색상이 단순하며 flat 스타일이면… PNG

Image for post
Image for postImage for post
500KB(JPG), 284KB(PNG)로 단순한 색상의 경우 PNG의 용량이 더 적습니다.

PNG는 무손실 포맷으로서, 자체가 스크린샷 등의 포터블한 이미지에 최적화된 포맷으로 화려한 색상이 담긴 이미지를 뽑아낼 경우 효율이 떨어지고 용량이 쉽게 증가하는 특징을 가지고 있습니다.

따라서 색상이 많지않고 단순한 flat 스타일이라면 png를 사용하는 것이 좋습니다.

2. 이미지에 포함되는 색상이 많은 경우… JPG

Image for post
Image for postImage for post
Image for post
Image for postImage for post
좌: 작년 한창 면접보러 다닐때 찍은 사진 — 686KB(JPG)가 3.3MB(PNG)보다 용량이 적음 | 우: 반짝이효과와 같은 화려하거나 색상이 많은 경우 428KB(PNG) < 332KB (JPG)

반면 이미지에 들어가는 색상이 많은 경우엔 무손실 포맷인 PNG를 사용하면 모든 컬러 하나하나를 담아야하므로, 이미지 용량이 급격하게 커집니다. 이런 경우 손실 포맷인 JPG를 사용하면 비슷한 색상끼리 엮는 식의 손실압축을 통해 티는 나지 않지만 용량이 크게줄어듭니다.

6가지의 기술을 통해 압축된다고 하니 원리가 궁굼하신 분들은 아래의 링크를 참고해보세요.

Image for post
Image for postImage for post
JPG는 이미지를 수정하면 할 수록 포맷 특성에 따라 화질이 열화됩니다.

JPG는 손실포맷의 특성에 따라 수정할 수록 화질이 열화되어 일명 디지털풍화가 이루어 지므로, 꼭 원본 수정파일을 두고 수정을 해야 화질 열화를 막을수 있습니다.

3. 투명도가 0 or 1로 단순한 경우 (알파값이 없는 투명이미지)는… GIF

Image for post
Image for postImage for post
알파값(반투명)이 없는 불투명 이미지

투명한 이미지면 대부분 PNG로 저장해야 하지 않나? 하시는 분들이 계실 수 도 있지만 꼭 그렇지 않습니다.

쓰인 색상이 256미만이고, 알파값이 없는 투명이미지라면 gif가 png보다 용량을 더 적게 차지합니다.

Image for post
Image for postImage for post
5KB(PNG) 보다 2KB(GIF)가 용량이 더 적습니다.
Image for post
Image for postImage for post
Image for post
Image for postImage for post
PNG-8로도 용량을 줄일 수 있지만, 번거롭고 귀찮으면 gif로…

혹은 PNG-8로 저장하는 것 또한 용량을 줄일 수 있습니다. 단, PNG-24와 달리 알파값을 지원하지 않으므로 IE6에서 사용해야하거나(IE6 PNG버그) 많은 컬러가 담긴 이미지가 아니라면 GIF만으로도 충분합니다.

Image for post
Image for postImage for post
위: 글꼴 그대로 | 아래: 얹혀질 배경색을 outline으로 1px 적용
Image for post
Image for postImage for post
위: 글꼴 그대로인 경우 반투명 안티얼라이싱이 gif에 적용되지 않아 깨짐 | 아래: 외곽선이 안티얼라이싱을 감싸 정깨지지 않고 잘 보여짐

지금은 웹폰트의 존재로 이미지 폰트를 사용하는 경우가 잘 없지만, gif로 이미지 폰트를 사용하면 글꼴의 안티얼라이싱이 반투명이여서 그대로 내보낼 때 깨지는 경우가 존재합니다. 이때 포토샵에서 outline으로 입혀질 외곽선과 동일한 색으로 1px만 그려주면, 실제 적용되었을 때 용량은 적게차지하면서 매끈하게 보여질 수 있습니다.

dropshadow가 먹힌 요소 또한 위 글꼴처럼 외곽선을 삽입해 저장하면 gif에서도 매끈하게 처리할 수 있습니다.

4. 한두가지 단색만 사용한 경우… GIF

바로 위와 마찬가지로, 한두가지의 단색만 사용할 경우 gif 혹은 png-8 방식이 제일 효과적입니다.


포맷 특성에 따라 저장한 이미지의 용량 더 줄여보기

위에 설명한 포맷의 특성에 따라 이미지를 저장했지만, 이미지 저장시 포함되는 메타정보를 제거해 좀더 줄일 수 있습니다. 이렇게 화질 손상없이 최대한 영혼까지 줄이면서 그래도 안되면 차선택으로 손실압축으로 저장하는 방법에 대해 알아보고자 합니다.

1. 이미지 자체의 불필요한 데이터 제거

Image for post
Image for postImage for post

Photoshop을 기준으로 File > Export > save for web (legacy) 클릭 후 나타나는 패널의 우측면에 위치한 Metadata의 속성을 none로 설정한 뒤 저장합니다.

혹은 JPEG & PNG Stripper(http://www.steelbytes.com/?mid=30)와 같은 프로그램을 사용해 생성된 이미지내의 메타정보를 지울 수도 있습니다.

2. 무손실 압축

imageOptim(mac)

Image for post
Image for postImage for post
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와 같은 손실압축을 사용하자라는 것이 이 글의 주제입니다.

전공자가 아니므로 이미지 포맷에 대해 잘못된 내용이 담겨있을 수 있습니다. 이경우 알려주시면 수정하겠습니다.

guleum

Dong-gri LAB

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight.
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox.
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month.

Get the Medium app