이미지 파일 형식 JPG PNG WebP 골라 쓰는 기준
같은 그림을 저장해도 형식에 따라 용량이 몇 배씩 차이 난다. 사진에 PNG를 쓰거나 로고에 JPG를 쓰면 손해가 크다. 형식마다 잘하는 일이 정해져 있어서, 무엇을 담을 그림인지만 정하면 답이 나온다.
목차
무엇이 다른가?
압축 방식과 지원 기능이 다르다. 이 두 가지가 용량과 화질, 그리고 투명 배경 가능 여부를 정한다.
| 형식 | 잘하는 것 |
|---|---|
| JPG | 사진, 색이 많은 그림 |
| PNG | 로고, 글자, 투명 배경 |
| WebP | 둘 다, 용량이 작다 |
| GIF | 짧은 움직임 |
| SVG | 도형, 아이콘 |
첫 번째와 두 번째의 차이가 핵심이다. JPG는 눈에 잘 안 띄는 정보를 버려서 용량을 줄이고, PNG는 버리지 않는다.
세 번째가 지금 기본이 되어가는 형식이다. 같은 화질을 더 작은 용량으로 담고 투명 배경도 지원한다.
JPG는 언제 쓰나?
사진이면 JPG가 원칙이다. 색이 부드럽게 이어지는 그림에 유리하다.
- 사진 — 인물, 풍경, 음식
- 색이 많은 그림 — 그러데이션이 있는 것
- 용량이 중요할 때 — 크게 줄어든다
- 피할 것 — 글자가 많은 이미지
네 번째가 자주 틀리는 부분이다. 글자나 선이 또렷한 그림을 JPG로 저장하면 가장자리가 지저분해진다. 버리는 압축 방식이 경계선에 약하기 때문이다.
세 번째도 알아둔다. 저장할 때 화질을 고를 수 있는데, 웹에 올릴 것이라면 최고 화질이 아니어도 눈으로 구분하기 어렵다.
PNG는 언제 쓰나?
또렷함과 투명 배경이 필요할 때다. 정보를 버리지 않고 압축하는 방식이라 선과 글자가 뭉개지지 않고, 대신 사진에 쓰면 용량이 크게 불어난다.
- 로고·아이콘 — 경계가 선명해야 한다
- 글자가 든 이미지 — 화면 캡처 포함
- 투명 배경 — 뒤가 비쳐야 할 때
- 피할 것 — 일반 사진
네 번째가 용량 낭비의 주범이다. 사진을 PNG로 저장하면 JPG보다 몇 배 커지는데 화질 차이는 눈에 띄지 않는다.
세 번째는 PNG의 고유 영역이었다. 배경이 없는 이미지가 필요하면 예전에는 이것밖에 없었다.
두 번째가 화면 캡처에 적용된다. 캡처 이미지는 글자와 선이 대부분이라 PNG가 더 또렷하고 용량도 작은 경우가 많다.
WebP는 무엇이 나은가?
JPG와 PNG의 장점을 합친 형식이다. 같은 화질에 용량이 더 작다.
- 용량 — 같은 화질에 더 작다
- 투명 배경 — PNG처럼 지원한다
- 움직임 — GIF처럼 애니메이션도 된다
- 호환성 — 대부분의 브라우저가 지원한다
첫 번째가 도입 이유다. 웹페이지 로딩 속도에 이미지 용량이 크게 작용하는데, 용량이 줄면 그만큼 빨라진다.
네 번째는 몇 년 전까지의 걱정거리였다. 지금은 주요 브라우저가 모두 지원해서 웹에 쓰기에 문제가 없다.
다만 편집 프로그램이나 오래된 프로그램에서 안 열리는 경우가 있다. 주고받을 파일이라면 JPG나 PNG가 안전하다.
용량은 얼마나 차이 나나?
같은 그림이라도 형식과 설정에 따라 크게 벌어진다. 형식만 바꿔도 절반이 되는 경우가 있고, 반대로 잘못 고르면 몇 배가 되기도 한다.
- 사진을 PNG로 — JPG의 서너 배가 되기도 한다
- JPG 화질 설정 — 100과 80의 용량 차이가 크다
- WebP 전환 — JPG 대비 20~30% 줄기도 한다
- 해상도 — 형식보다 먼저 볼 것
네 번째가 사실 가장 큰 변수다. 4,000픽셀짜리 사진을 그대로 올리면 형식을 무엇으로 하든 무겁다. 쓸 크기에 맞춰 줄이는 것이 먼저다.
두 번째도 효과가 크다. 화질 100에서 80으로 낮추면 용량이 절반 가까이 줄어드는데 눈으로는 구분하기 어렵다.
웹에 올릴 때는?
파일 형식 말고도 챙길 것이 있다. 형식을 잘 골라도 크기를 안 줄이거나 설명을 안 붙이면, 페이지는 느려지고 검색에서도 손해를 본다.
- 해상도 줄이기 — 표시될 크기에 맞춘다
- 대체텍스트 넣기 — 접근성과 검색 모두에 작용
- 파일명 — 내용을 알 수 있게
- 용량 확인 — 한 장이 지나치게 크지 않게
두 번째를 빠뜨리는 경우가 많다. 이미지가 무엇인지 설명하는 텍스트는 화면을 읽어주는 프로그램이 쓰고, 검색엔진도 참고한다.
세 번째도 사소해 보이지만 값을 한다. 카메라가 붙인 이름 그대로 올리는 것보다 내용을 담은 이름이 낫다.
블로그 운영은 구글 서치콘솔 색인 요청하고 누락 원인 찾는 법과 애드센스 신청 전에 미리 점검하는 항목 총정리에 정리했다.
캡처와 영상은 화면 캡처와 녹화 상황에 맞게 골라 쓰는 요령과 동영상 용량 줄이는 방법과 화질 균형 맞추는 법에 있다.
파일 관리는 파일 압축과 확장자 이해하고 다루는 법 총정리를, 사진 정리는 스마트폰 사진 정리하는 4단계와 용량 확보 방법를 본다.
접근성 자료는 한국웹접근성인증평가원에서 볼 수 있다.
자주 묻는 질문
사진은 무엇으로 저장하나?
JPG나 WebP다. PNG로 저장하면 용량만 커진다.
화면 캡처는?
PNG가 낫다. 글자와 선이 또렷하게 남는다.
WebP를 써도 되나?
웹에 올릴 것이면 문제없다. 주고받을 파일이면 JPG나 PNG가 안전하다.
투명 배경이 필요하면?
PNG나 WebP를 쓴다. JPG는 투명을 지원하지 않는다.
용량을 줄이려면 형식부터 바꾸나?
해상도를 먼저 본다. 크기가 과하면 어떤 형식이든 무겁다.
정리
- 사진은 JPG 또는 WebP, 로고·캡처는 PNG다
- JPG는 버리는 압축이라 경계선에 약하다
- PNG로 사진을 저장하면 용량만 커진다
- WebP는 같은 화질에 더 작고 투명도 된다
- 용량은 형식보다 해상도가 먼저다
- 웹에 올릴 때는 대체텍스트를 함께 넣는다
다음 행동은 블로그에 올린 이미지 한 장의 용량을 확인해보는 것이다. 1MB를 넘는다면 해상도부터 줄일 자리가 있다.
글쓴이 션잇 · IT 전문가. 업무 자동화와 AI 도구를 다룬다
댓글