이미지
JPG·PNG·WebP, 언제 무엇을 써야 할까
사진, 캡처 화면, 로고, 투명 배경 이미지에 JPG·PNG·WebP 중 무엇을 써야 하는지, 각 형식의 장단점을 쉬운 말로 정리했어요.
1분 요약
- 사진(인물, 풍경, 음식, 상품): JPG. 내 홈페이지에 올린다면 WebP.
- 캡처 화면, 표, 도식, 글자 이미지: PNG.
- 배경이 투명한 로고나 누끼 이미지: PNG. 내 홈페이지라면 WebP.
- 허용 형식이 적힌 양식에 올릴 때: 적힌 형식대로. 보통 JPG예요.
아래에서 이유를 설명할게요. 이유를 알면 애매한 경우도 직접 판단할 수 있어요.
손실 압축과 무손실 압축
JPG와 (대부분의) WebP는 *손실 압축*이에요. 하늘의 미세한 색 차이처럼 눈이 잘 알아채지 못하는 정보를 버려서 사진을 몇 배나 작게 만들어요. PNG는 *무손실 압축*이라 모든 픽셀이 들어간 그대로 돌아와요.
무손실이 더 좋아 보이지만 사진에서는 대부분 낭비예요. PNG 샘플 사진 9장(6,072KB)을 JPG 품질 90으로 바꿨더니 1,010KB, 83% 작아졌어요. 품질 90에서는 보통 크기로 볼 때 손실을 알아보기가 매우 어려워요.
PNG가 맞는 경우
손실 압축은 날카로운 경계에 약해요. 또렷한 글자나 가는 선 주변에 JPG는 희미한 얼룩과 번짐(압축 노이즈)을 만들어서 캡처 화면이 지저분해 보여요. 앱 화면, 발표 자료, 그래프, 도식처럼 단색 면적이 넓은 이미지는 PNG로 저장해도 효율적이고 선명함도 그대로예요.
편집 중인 원본도 PNG로 두는 게 좋아요. JPG는 열어서 고치고 다시 저장할 때마다 조금씩 화질이 깎여요. PNG로 편집하고 마지막에 JPG로 내보내세요.
투명 배경
JPG에는 투명이 없어요. 모든 픽셀이 색으로 채워져 있어야 해요. 투명 배경 PNG 로고를 JPG로 바꾸면 투명한 부분을 어떤 색으로 채워야 하는데, JPG·PNG·WebP 변환는 기본으로 흰색을 쓰고 원하는 색을 고를 수 있어서 로고가 놓일 페이지 색에 맞출 수 있어요.
PNG와 WebP는 투명을 그대로 유지해요. 색이 있는 배경 위에 올릴 로고, 아이콘, 상품 누끼 이미지는 둘 중 하나로 저장하세요.
WebP는 어디에 쓰나
WebP는 두 가지를 다 해요. 사진은 손실 압축, 그래픽은 무손실 압축으로 저장하고, 둘 다 투명 배경을 지원해요. 테스트에서 같은 품질 설정일 때 WebP 사진이 JPG보다 약 20% 작았어요(WebP와 JPG 비교 실험 참고). 요즘 브라우저는 모두 WebP를 보여 줘요.
문제는 브라우저 밖이에요. 관공서, 채용 사이트, 인쇄소, 오래된 프로그램은 JPG와 PNG만 받는 경우가 많아요. 내 사이트에 올리는 이미지는 WebP, 남에게 보내거나 다른 곳에 올리는 파일은 JPG나 PNG로 하세요.
형식을 고른 뒤 용량 다듬기
알맞은 형식을 고르는 게 가장 크게 줄이는 방법이지만 그게 전부는 아니에요. 사진이 실제로 보일 크기보다 크다면 이미지 크기 조절로 줄이고, 더 가볍게 해야 한다면 이미지 용량 줄이기에서 품질을 조금 낮추세요. JPG는 대부분의 사진에서 품질 75~85 정도가 무난해요.