MultiKitJPG, PNG, WebP, AVIF 중 어떤 이미지 형식을 쓸까
웹의 거의 모든 그림은 네 가지 형식으로 정리됩니다. 차이는 세 가지입니다. 픽셀을 하나도 잃지 않고 보존하는지, 투명도를 담을 수 있는지, 무엇이 그 파일을 여는지입니다. 내 그림에 이 셋 중 무엇이 중요한지만 알면 선택은 대개 짧게 끝납니다.
짧은 답
| 가진 것 | 쓸 형식 | 이유 |
|---|---|---|
| 웹 페이지에 올릴 사진 | WebP, 어디서나 열려야 하면 JPG 사본도 | 파일이 작고 요즘 브라우저는 모두 WebP를 보여 줍니다 |
| 스크린샷, 도표, 선 그림 | PNG | 무손실이라 또렷한 모서리가 그대로입니다 |
| 투명 배경의 로고 | PNG 또는 WebP | JPG는 투명도를 담을 수 없습니다 |
| 크기가 가장 중요한 사진 | AVIF, WebP나 JPG 대체본과 함께 | 대개 가장 작지만 지원이 더 새롭습니다 |
| 다시 고칠 수 있는 그림 | PNG나 원본 파일을 보관 | 손실 사본을 다시 바꾸면 더 잃습니다 |
JPG: 어디서나 열리지만 저장할 때마다 조금 잃습니다
JPG는 손실 형식입니다. 눈이 가장 알아채기 어려운 잔 디테일을 버리고, JPG를 다시 변환하면 조금 더 버립니다. MDN은 JPEG이 알파 채널을 지원하지 않는다고 설명합니다. 그래서 JPG로 저장할 때는 투명한 부분을 어떤 색으로 채워야 합니다. 장점은 모든 프로그램, 이메일 앱, 올리기 양식이 받아 준다는 것이고, 그래서 사진의 대체 형식으로 아직도 쓰입니다.
PNG: 픽셀을 그대로
PNG는 무손실이고 완전한 알파 투명도를 지원합니다. MDN은 그림을 정확히 재현해야 하거나 투명도가 필요할 때, 그리고 스크린샷, 도표, 선 그림에 PNG를 권합니다. 대신 크기가 큽니다. 사진을 PNG로 저장하면 모든 픽셀을 그대로 보존하므로 파일이 커집니다.
WebP: 더 작고 요즘 브라우저는 모두 보여 줍니다
Google의 WebP FAQ에는 두 수치가 있습니다. 무손실 WebP는 PNG보다 26% 작고, 손실 WebP는 평균적으로 JPEG보다 30% 더 압축됩니다. 그림마다 줄어드는 양이 다르니 실제로 나온 크기를 확인하세요. WebP는 투명도를 위한 알파 채널을 지원하며 담을 수 있는 가장 큰 그림은 16383 × 16383픽셀입니다. MDN은 Chrome, Edge, Firefox, Opera, Safari의 모든 현재 버전이 지원한다고 적고, 맥에서는 Safari 14 이상과 macOS Big Sur 이상이 필요하다고 밝힙니다.
AVIF: 대개 가장 작지만 브라우저 지원은 더 새롭습니다
AVIF는 사진에 좋은 선택입니다. MDN은 WebP보다 압축이 약간 낫지만 지원이 넓지 않고 점진적 렌더링을 지원하지 않는다고 설명합니다. MDN에 따르면 Chrome 85, Opera 71, Firefox 93, Safari 16.1, Edge 121 이상에서 보이며, picture 요소로 WebP, JPEG, PNG 대체본을 함께 제공하라고 권합니다. 많은 프로그램과 올리기 양식이 아직 AVIF를 열지 못해서, AVIF 파일을 JPG로 바꾸려는 사람이 많습니다.
실제로 고르는 순서
- 원본은 무엇이든 보관하세요. PNG나 카메라 파일이 원본입니다.
- 페이지에 보여 줄 사본은 WebP부터 시도하고 원본과 크기를 비교하세요.
- 변환한 파일이 더 크면 작은 아이콘에서 생길 수 있는 일이니 원래 형식을 유지하세요.
- 다른 사람의 프로그램에서 열거나 양식에 올려야 하면 JPG나 PNG를 쓰세요.
- 변환한 사본을 다시 변환하지 마세요. 손실 변환은 할 때마다 조금 더 잃습니다.
브라우저에서 바로 변환하기
MultiKit의 변환기 페이지는 PNG, JPG, WebP, AVIF, HEIC를 서로 바꾸고, 결과마다 크기를 보여 주며 파일을 업로드하지 않습니다.