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

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

Dong-gri
Dong-gri
Apr 12 · 9 min read
Image for post
Image for postImage for post
이미지 용량이 크면, 로딩속도가 길어지고 트래픽 부담이 심해집니다.
Image for post
Image for postImage for post
tiny png는 간단하고 빠르게 이미지용량을 줄일 수 있지만 손실압축이라 화질이 깨지는 것은 당연하나, 너무 눈에띄게 보였습니다.

목표

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

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

Image for post
Image for postImage for post
500KB(JPG), 284KB(PNG)로 단순한 색상의 경우 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)
Image for post
Image for postImage for post
JPG는 이미지를 수정하면 할 수록 포맷 특성에 따라 화질이 열화됩니다.

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

Image for post
Image for postImage for post
알파값(반투명)이 없는 불투명 이미지
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로…
Image for post
Image for postImage for post
위: 글꼴 그대로 | 아래: 얹혀질 배경색을 outline으로 1px 적용
Image for post
Image for postImage for post
위: 글꼴 그대로인 경우 반투명 안티얼라이싱이 gif에 적용되지 않아 깨짐 | 아래: 외곽선이 안티얼라이싱을 감싸 정깨지지 않고 잘 보여짐

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


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

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

Image for post
Image for postImage for post

2. 무손실 압축

Image for post
Image for postImage for post
ImageOptim (mac 전용)

3. 손실압축


마무리

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. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store