PNG를 AVIF로 변환 — 투명도를 지키며 용량 절감

PNG를 AVIF로 변환: 투명도를 지키면서 사이트를 무겁게 하지 않기

웹 제작자가 오랫동안 빠져나오지 못한 상황이 있습니다. 이미지에 투명한 배경이 필요하니 PNG여야 하는데, PNG는 무겁습니다. 화면 너비를 채우는 누끼 제품 사진은 금세 2MB에 이릅니다. 그런 이미지가 여덟 장이면 페이지는 끝입니다.

JPG는 투명도를 지원하지 않아 해결책이 되지 못했습니다. 그렇게 막다른 길이었습니다.

AVIF는 바로 이 모순을 풀어줍니다

AVIF는 완전한 알파 채널을 지원하면서 동시에 손실 압축을 합니다. 2MB짜리 PNG가 150~300KB의 AVIF가 되는 일도 드물지 않습니다. 투명도를 지킨 채 85~92%를 줄이는 셈입니다.

누끼 처리한 제품 사진, 부드러운 그림자를 가진 일러스트, 계조가 있는 큰 도판에서는 이미지 쪽에서 얻을 수 있는 가장 큰 개선입니다.

PNG를 유지해야 하는 경우

모든 PNG가 이득을 보는 것은 아닙니다. 색이 적은 단순한 도판 — 아이콘, 단순한 로고, 도표 — 에서는 PNG가 이미 매우 효율적으로 저장합니다. 그런 경우 AVIF가 오히려 커지기도 하고, 손실 압축이 날카로운 윤곽에 약간의 흐트러짐을 만들기도 합니다.

작업용 파일이라면 PNG를 유지하십시오. AVIF는 웹 배포용 형식이지 편집과 재저장을 반복하기 위한 형식이 아닙니다.

판단 기준

누끼 사진, 계조가 있는 일러스트, 투명도를 포함한 큰 면적은 AVIF로. 아이콘, 선화, 글자가 든 스크린샷, 작업용 파일은 PNG 그대로.

대체 형식을 잊지 마십시오

아주 오래된 기기는 AVIF를 모릅니다. 실제 서비스에서는 picture 요소의 첫 번째에 AVIF, 두 번째에 원래의 PNG를 지정하십시오. 최신 브라우저는 가벼운 파일을 받고 오래된 기기는 원본으로 되돌아갑니다.

업로드 없는 처리

누끼 처리한 제품 사진은 공개 전이라면 브랜드가 가진 가장 값진 자산인 경우도 적지 않습니다. ImageXpo는 아무것도 전송하지 않습니다. 인코딩은 WebAssembly로 브라우저 안에서 실행되며 수백 장이어도 같습니다.