AV1 이미지 파일 형식 (AVIF)은 오픈소스 AV1 동영상 코덱을 기반으로 하는 인코딩입니다. AVIF는 WebP보다 더 최신이며 2020년 이후 Chrome 및 Opera, 2021년의 Firefox, 2022년의 Safari에서만 지원됩니다. WebP와 마찬가지로 AVIF는 GIF와 같은 애니메이션, PNG와 같은 투명도, JPEG나 WebP보다 작은 파일 크기에서 인지 품질을 개선한 웹 래스터 이미지의 모든 사용 사례를 해결하는 것을 목표로 합니다.
지금까지 AVIF는 큰 가능성을 보여주었습니다. AV1 코덱 개발을 담당하는 Alliance for Open Media의 창립 멤버인 Netflix가 개발한 테스트 프레임워크는 JPEG나 WebP에 비해 파일 크기가 상당히 감소한 것으로 나타났습니다. Cloudinary와 Chrome 코덱팀의 추가 연구에 따르면 현재 인코딩 표준에 비해 긍정적으로 평가되었습니다.
도구는 비교적 제한적이지만 Squoosh에서 제공하는 인코딩 중 하나로 지금 바로 AVIF로 실험을 시작할 수 있으며, 또 그래야 합니다.
브라우저 지원
AVIF와 WebP가 더 높은 품질의 결과와 훨씬 더 작은 파일 크기를 제공할 수 있는데 JPEG에 대해 왜 그렇게 많은 시간을 들였는지 궁금하시다면, JPEG와 새로운 이미지 인코딩에 중대한 문제가 있기 때문입니다. GIF, PNG, JPEG는 모든 브라우저에서 지원되며 지난 수십 년 동안 지원해 왔습니다. 이러한 기존 이미지 형식에 비하면 AVIF는 새로운 형식이며 최신 브라우저에서 WebP 지원이 훌륭하지만 웹 전체에 적용되지는 않습니다.
예상할 수 있듯이 품질과 전송 크기를 모두 개선하기 위해 새로운 이미지 형식을 개발하는 데는 막대한 시간과 노력이 들었습니다. WebP, AVIF, JPEG XL (모든 브라우저에서 지원되지 않음)과 같은 형식은 웹의 래스터 이미지를 위한 통합 솔루션이 되는 것을 목표로 합니다. SVG가 벡터에 해당하기 때문입니다. JPEG 2000 (Safari에서만 지원됨)과 같은 다른 형식은 기준 JPEG와 동일한 사용 사례를 모두 충족하도록 의도된 것이었지만 시각적으로 유사하지만 훨씬 더 작은 이미지를 제공하기 위해 압축 방법을 개선하려고 했습니다.
이러한 최신 형식 중 일부는 JPEG 이름을 공유하지만 인코딩은 자바스크립트와 Java만큼 근본적으로 다릅니다. 특정 인코딩을 지원하지 않는 브라우저는 해당 이미지 파일을 전혀 파싱할 수 없습니다. 마치 내가 모르는 언어로 그래프 종이 픽셀 그리드를 작성하라고 지시한 것과 같습니다. 브라우저는 이미지 데이터를 요청하고 파싱을 시도하며 실패하면 아무것도 렌더링하지 않고 삭제합니다. 최신 브라우저 외부에서 렌더링에 실패하는 이미지 소스는 Google 콘텐츠와 전체 웹에 큰 장애점이 됩니다. 이미지가 손상되어 대역폭을 전 세계 수많은 사용자에게 낭비하는 것입니다. 성능 향상을 위해 복원력이 우수한 웹을 희생해서는 안 됩니다.
오랜 시간 동안 Google의 든든한 친구인 <img>는 밝아 보이더라도 새로운 이미지 형식을 사용하기가 매우 어려웠습니다. <img>는 단일 소스 파일만 지원했으며 파일을 빠르게 전송하도록 고도로 최적화되어 있어 JavaScript를 통해 해당 요청을 가로챌 수 없었습니다. 최근까지 가능한 유일한 옵션은 모든 사용자에게 새로운 유형의 이미지를 제공하고 브라우저에서 오류가 발생할 때 '기존' 형식 중 하나를 요청하는 것이었습니다. 이렇게 하면 첫 번째 이미지가 낭비된 후 두 번째 파일 전송이 발생했습니다.
이러한 이유로 수십 년 동안 존재해 온 <img>을 변경해야 했습니다. 다음 모듈인 반응형 이미지에서는 HTML 사양에 도입된 기능과 이러한 문제를 일상 업무에 사용하는 방법을 알아봅니다.