AVIF를 PNG로: 투명 배경을 위해, 그리고 앞으로 편집할 이미지를 위해
AVIF는 투명도를 지원하지만, 대부분의 변환 도구는 그 정보를 그냥 버립니다. 모서리가 비어 있는 로고를 대충 만든 도구에 넣으면 뒤에 흰색 사각형이나 검은색 사각형이 붙어서 돌아옵니다. 여기서 JPG가 아니라 PNG를 골라야 하는 가장 큰 이유가 이것입니다. PNG에는 진짜 알파 채널이 있어서, 누끼 이미지가 슬라이드나 목업, 상품 페이지에 바로 올릴 수 있는 상태로 도착합니다.
두 번째 이유는 편집입니다. PNG 압축은 무손실이라 받은 픽셀을 그대로 저장하고 그 이상 아무것도 버리지 않습니다. 대신 JPG로 변환하면 이후 저장할 때마다 이미 있던 손상 위에 새로운 손상이 얹힙니다. 이미지를 디자인 프로그램으로 가져갈 예정이거나 앞으로 몇 번 더 자르고 다시 내보낼 생각이라면, PNG는 그 왕복마다 치를 대가가 없습니다.
픽셀 단위로 확인한 투명도 테스트
세로 띠 세 개가 있는 AVIF를 만들었습니다. 하나는 완전히 투명, 하나는 정확히 절반만 투명, 하나는 완전히 불투명입니다. 이 파일을 자체 서버에서 모든 설정으로 변환한 뒤 결과물을 픽셀 단위로 확인했습니다.
| 설정 | 완전 투명 영역 | 반투명 영역 | 불투명 영역 |
|---|---|---|---|
| Recommended | 그대로 투명 | 정확히 절반 그대로 | 그대로 불투명 |
| Smallest, 64색 | 그대로 투명 | 정확히 절반 그대로 | 그대로 불투명 |
| Palette compression 끔 | 그대로 투명 | 정확히 절반 그대로 | 그대로 불투명 |
부분 투명도는 64색에서도 살아남았습니다. 바로 이 지점에서 대부분의 변환 도구가 실패합니다. 팔레트에는 반투명을 담을 자리가 마땅치 않아서, 결국 부드러운 그림자가 딱딱한 경계로 바뀌는 결과가 흔합니다. 이 도구는 어떤 설정에서도 배경색과 합성하지 않습니다. 같은 파일을 AVIF에서 JPG로 변환했을 때는 투명한 띠가 단색으로 채워져 나왔습니다. JPEG에는 투명도를 저장할 방법 자체가 없기 때문입니다.
감소율을 약속하지 않는 이유
Palette compression은 기본적으로 켜져 있습니다. 사진을 풀컬러 PNG로 만들면 용량이 엄청나게 커지는데 일반적인 zlib으로는 거의 줄지 않기 때문입니다. 얼마나 줄어드는지는 전적으로 이미지에 달려 있습니다. 같은 1200 곱하기 900, 디스크 용량 21 KB짜리 AVIF를 각 설정으로 변환한 결과입니다.
| 설정 | 팔레트 | 출력 PNG | 결과 |
|---|---|---|---|
| Fast | 256색 | 281 KB | 풀컬러 PNG 유지, 팔레트 버전이 오히려 더 컸음 |
| Recommended | 128색 | 223 KB | 팔레트 사용 |
| Smallest | 64색 | 197 KB | 팔레트 사용 |
| Palette compression 끔 | 없음 | 227 KB | 엄격한 무손실, 풀컬러 |
이 이미지에서는 팔레트가 거의 아무것도 줄이지 못했고 256색에서는 파일이 오히려 커졌기 때문에, 도구가 팔레트 버전을 버리고 풀컬러 버전을 남겼습니다. 반대로 단색 위주의 로고나 스크린샷이라면 같은 설정으로 파일이 절반 이하로 줄기도 합니다. 이 페이지 어디에도 단 하나의 감소율이 적혀 있지 않은 이유가 이것입니다. 할 만한 약속은 지킬 수 있는 약속뿐입니다. 두 버전 중 더 작은 쪽이 항상 전달되고, 어느 쪽을 받았는지는 결과에 표시됩니다.
PNG는 AVIF보다 몇 배 커진다고 보세요
AVIF는 눈에 띄지 않는 세부를 버려도 되는 최신 손실 코덱입니다. PNG는 받은 픽셀을 하나도 빠짐없이 기록해야 합니다. AVIF로는 수백 KB에 담기는 사진이 풀컬러 PNG에서는 수 MB가 되는데, 이는 변환의 결함이 아니라 무손실의 대가입니다. 그래도 PNG가 용도에 비해 너무 무겁다면 그 이미지는 사진일 가능성이 높고, AVIF를 JPG로 변환하는 편이 더 나은 답입니다.
스크린샷과 글자는 선명하게 유지됩니다
딱딱한 경계, 인터페이스 글자, 넓은 단색 면은 JPEG가 가장 못 다루는 대상입니다. JPEG는 작은 정사각형 블록 단위로 처리해서 글자마다 눈에 보이는 번짐을 남깁니다. PNG는 그 경계를 그대로 저장하므로 스크린샷은 AVIF에 있던 그대로의 선명한 글자로 변환됩니다. 단색 위주의 그래픽은 Palette compression이 가장 크게 효과를 보는 대상이기도 합니다. 스크린샷이나 로고는 실제로 쓰인 색 수가 적기 때문입니다. 그라데이션이 들어간 스크린샷이라면, 용량 절감보다 확실함이 필요할 때 Palette compression을 끄고 모든 색을 남기세요.
팔레트를 직접 정할 수 있습니다
압축 설정 아래에 Colours, 즉 색 개수를 넣는 칸이 있습니다. 그대로 두면 각 설정이 자기 기본값을 사용합니다. 2에서 256 사이 아무 값이나 넣으면 그 크기의 팔레트가 적용되는데, 기존 소재와 색을 맞출 때나 아이콘을 한계까지 줄일 때 유용합니다. Palette compression을 완전히 끄면 픽셀 하나까지 동일한 풀컬러 PNG를 받습니다.
방향, 색상, 크기
휴대폰 사진의 방향 태그는 파일에 무엇을 쓰기 전에 이미지 자체에 먼저 적용되고 그 다음 출력에서 지워집니다. 그래서 이미지가 바로 선 상태로 도착하고, 뷰어가 한 번 더 회전시키는 일이 없습니다. 넓은 색역의 Display P3 프로파일은 버려지지 않고 PNG에 포함됩니다. 색이 정확하게 나오느냐, 하늘이 형광색으로 돌아오느냐가 여기서 갈립니다. 사용할 곳이 프로파일을 무시한다면 Colour profile 설정으로 sRGB로 올바르게 변환할 수 있습니다. 픽셀 크기는 절대 바뀌지 않습니다. 여기서 바꾸는 것은 형식이지 크기가 아닙니다.
이름만 바뀐 파일과 움직이는 파일
형식은 파일 자체의 바이트에서 읽기 때문에, 누군가 .jpg 이름으로 저장한 AVIF도 문제없이 올바르게 변환됩니다. 움직이는 AVIF는 첫 프레임을 한 장의 정지 이미지로 내보내고, 그렇게 처리했다는 사실을 결과에 알려 줍니다. 움직이는 PNG는 만들지 않습니다. 애니메이션을 거의 똑같은 수백 장의 프레임으로 펼치는 것은 파일 하나를 변환하려는 사람이 원하는 결과가 아니기 때문입니다.
얻게 되는 것
- 부분 투명도와 부드러운 그림자까지 포함해 온전히 보존되는 투명 배경
- 무손실 압축이라 나중에 자르고 다시 내보내도 추가 손실이 없음
- 팔레트 버전과 풀컬러 버전 중 더 작은 쪽을 파일마다 판단해 제공
- 원할 때 2에서 256색까지 직접 지정하는 팔레트 크기
- 바로 선 사진, 넓은 색역 유지 또는 요청 시 sRGB 변환
- 시작할 때와 똑같은 픽셀 크기, 매번
다음 단계
투명 배경이 없는 평범한 사진인가요? AVIF를 JPG로 변환하면 같은 이미지를 훨씬 작은 파일로 얻을 수 있습니다.
PNG가 생각보다 무거운가요? PNG 압축으로 크기는 그대로 둔 채 용량을 더 줄일 수 있습니다.
이 이미지를 다시 웹사이트에 올릴 예정인가요? PNG를 WebP로 변환하면 투명 배경을 지키면서 브라우저용으로 가볍게 만들 수 있습니다.