이미지 형식 총정리: JPG, PNG, WebP, AVIF, GIF, BMP, ICO
사진, 로고, 스크린샷, 웹페이지, 인쇄, SNS에 각각 어떤 형식을 써야 하는지와 그 이유를 알려 드려요.
모든 이미지 형식은 파일 크기, 품질, 투명도, 애니메이션, 호환성 사이에서 무언가를 포기하고 무언가를 얻는 선택이에요. 잘못 고르면 파일이 쓸데없이 커지거나 로고가 흐릿해져요. 이 가이드에서는 형식마다 무엇에 강한지, 결정에 필요한 숫자와 함께 정리해 드려요.
두 가지 압축 방식
무손실 압축은 모든 픽셀을 그대로 보존하고, ZIP처럼 같은 데이터를 더 효율적으로 기록하는 방법만 찾아요. 무손실 이미지는 천 번을 열고 저장해도 전혀 변하지 않아요. PNG, BMP, GIF, 무손실 WebP가 이런 방식이에요.
손실 압축은 사람 눈이 잘 알아채지 못하는 정보, 즉 미세한 질감, 아주 작은 색 차이, 고주파 노이즈를 버려요. 눈에 보이는 차이 없이 무손실 파일의 10분의 1 크기까지 줄어들 수 있지만, 다시 저장할 때마다 조금씩 더 손실돼요. JPG, 손실 WebP, AVIF가 이런 방식이에요.
여기서 첫 번째 원칙이 바로 나와요. 노이즈와 질감이 가득해서 조금 사라져도 아무도 모르는 사진에는 손실 형식을, 모든 픽셀이 중요한 선명한 테두리, 단색 영역, 글자가 있는 그래픽에는 무손실 형식을 쓰세요.
형식별 특징
JPG (JPEG)
1992년부터 쓰인 사진용 형식이에요. 손실 압축, 8비트 색상이고 투명 배경과 애니메이션은 지원하지 않아요. 지금까지 만들어진 거의 모든 기기와 프로그램에서 열려요. 0에서 100까지의 품질 값으로 크기와 화질의 균형을 조절하는데, 평소에는 80~85가 가장 적당해요. 약점은 낮은 품질에서 보이는 네모난 "블록" 현상, 선명한 테두리 주변의 번짐, 그리고 투명 배경을 지원하지 않는다는 점이에요. 이메일, 인쇄, 오픈마켓, 오래된 프로그램처럼 브라우저 밖으로 나가는 사진에 쓰세요.
PNG
무손실, 최대 16비트 색상, 완전한 알파 투명도를 지원하고 애니메이션은 지원하지 않아요(APNG가 있지만 드물어요). 로고, 아이콘, 스크린샷, 다이어그램, 차트, 그리고 배경이 투명해야 하는 모든 이미지에 알맞아요. 약점은 크기예요. PNG로 저장한 사진은 JPG보다 열 배나 클 수 있어요. 웹사이트의 사진에는 절대 PNG를 쓰지 마세요.
WebP
Google이 만든 웹용 형식으로, 지금은 모든 최신 브라우저가 지원해요. 손실과 무손실 모드가 모두 있고, 두 모드 모두 투명 배경을 지원하며 애니메이션도 돼요. 같은 품질에서 손실 WebP는 JPG보다 약 25~35%, 무손실 WebP는 PNG보다 약 25% 작아요. 브라우저에 표시되는 거의 모든 이미지에 가장 좋은 범용 형식이에요. 약점은 브라우저 밖의 호환성이에요. 오래된 데스크톱 프로그램, 일부 이메일 앱, 많은 업로드 양식이 아직 WebP를 받지 않아요.
AVIF
AV1 동영상 코덱을 바탕으로 한 더 새로운 형식이에요. 같은 품질에서 보통 JPG보다 50%, WebP보다 20% 작고, 투명 배경, 애니메이션, 넓은 색 영역을 지원해요. 2024년부터 모든 최신 브라우저가 지원해요. 인코딩이 느린 편이고 특히 브라우저에서 더 느리며, 브라우저 밖 프로그램의 지원은 아직 들쭉날쭉해요. 파일 크기가 아주 중요하고 이미지가 표시되는 환경을 직접 관리할 수 있을 때 쓰고, WebP나 JPG를 대체 이미지로 함께 제공하세요.
GIF
1987년에 나온 형식이에요. 프레임당 256색, 한 가지 색만 투명하게 할 수 있고, 애니메이션을 지원해요. 지금도 어디서나 보이는 이유는 오직 애니메이션 때문이에요. 사진에는 최악이고, 단순한 그래픽에는 괜찮으며, 호환성은 따라올 형식이 없어요. 정지 이미지라면 PNG가 GIF의 모든 기능을 더 잘 해내고, 애니메이션이라면 MP4나 애니메이션 WebP가 훨씬 작아요.
BMP
압축하지 않은 Windows 비트맵이에요. 파일이 엄청나게 크고, 일반적으로 투명 배경을 쓰지 않으며, 압축도 없어요. 읽기가 아주 단순해서 임베디드 기기와 오래된 프로그램에 필요하기 때문에 아직 남아 있을 뿐이에요. 웹이나 보관용으로는 절대 쓰지 마세요.
ICO
Windows 아이콘과 브라우저 파비콘에 쓰는 형식이에요. 같은 이미지를 여러 크기로 한 파일에 담아서 탭, 북마크, 바탕화면 바로가기에 맞는 크기를 골라 쓸 수 있게 해요. PNG to ICO 도구로 PNG에서 만들 수 있어요.
비교표
| 형식 | 압축 | 투명도 | 애니메이션 | JPG 대비 사진 크기 | 호환성 |
|---|---|---|---|---|---|
| JPG | 손실 | 없음 | 없음 | 1× | 어디서나 |
| PNG | 무손실 | 있음, 완전한 알파 | 없음 | 5~10× | 어디서나 |
| WebP | 둘 다 | 있음, 완전한 알파 | 있음 | 0.65~0.75× | 모든 브라우저, 대부분의 최신 앱 |
| AVIF | 둘 다 | 있음, 완전한 알파 | 있음 | 0.5× | 모든 최신 브라우저, 일부 앱 |
| GIF | 무손실, 256색 | 있음, 켜기/끄기만 | 있음 | 2~4× (화질도 더 나쁨) | 어디서나 |
| BMP | 없음 | 없음 | 없음 | 20~30× | 어디서나 열리지만 거의 안 씀 |
용도별 추천 형식
- 웹사이트의 사진: 품질 75~85의 WebP. 아주 오래된 브라우저까지 지원해야 한다면 JPG를 대체 이미지로 두세요. 페이지를 최대한 가볍게 만들고 싶다면 AVIF도 좋아요.
- 웹사이트의 로고와 아이콘: SVG가 있다면 SVG, 없다면 PNG나 무손실 WebP.
- 스크린샷: PNG. 손실 압축을 하면 글자가 흐려져요.
- 이메일 첨부 파일: 사진은 JPG, 그래픽은 PNG. WebP는 보내지 마세요. 제대로 처리하지 못하는 메일 앱이 너무 많아요.
- 인쇄: 품질 95의 JPG 또는 PNG/TIFF를, 인쇄 크기 기준 인치당 300픽셀로 준비하세요.
- SNS: JPG나 PNG. 어차피 모든 플랫폼이 업로드할 때 다시 압축하니, 높은 품질과 정확한 크기로 올리세요.
- 배경을 투명하게 뺀 제품 이미지: 호환성을 최우선으로 하면 PNG, 웹용이라면 WebP.
- 파비콘: ICO, 그리고 모바일 홈 화면용 PNG 하나.
형식 간 변환하기
이 사이트의 모든 변환은 브라우저 안에서 이루어져요. 가장 많이 쓰는 경로는 웹용으로 PNG를 WebP로와 JPG를 WebP로, 호환성을 위해 WebP를 JPG로와 WebP를 PNG로, 그리고 잘못된 형식으로 내보낸 사진을 줄이기 위한 PNG를 JPG로예요. 이미지 압축 도구는 이 모든 형식을 한 번에 여러 장씩 처리할 수 있어요.