WebP를 AVIF로 변환 — Core Web Vitals 개선
WebP를 AVIF로 변환: 로딩 속도를 위한 마지막 수십 킬로바이트
여기에 오는 분이 호기심 때문인 경우는 거의 없습니다. 대개 구체적인 지적을 받고 옵니다. PageSpeed Insights가 "차세대 형식으로 이미지 제공"을 요구하고, Largest Contentful Paint가 2.5초를 넘으며, 이미지는 이미 WebP입니다. 다음 단계의 이름이 AVIF입니다.
전환으로 얻는 것
AVIF는 AV1이라는 영상 압축 기술에서 나왔고 WebP보다 상당히 진보한 방식으로 동작합니다. 실제로 체감 화질이 같은 상태에서 용량을 20~30% 더 줄일 수 있습니다.
한 페이지만 보면 작아 보입니다. 그러나 각 180KB의 이미지 열다섯 개가 놓인 첫 화면이라면 약 800KB가 줄고, 모바일 회선에서는 쉽게 0.5초에 해당합니다. Largest Contentful Paint가 기준값 아래로 내려가는지는 바로 이 폭에서 갈립니다.
AVIF가 특히 강한 것은 부드러운 계조를 가진 큰 이미지입니다. 메인 비주얼, 배경, 풍경 등이 그렇습니다. 작은 아이콘이나 색이 적은 도판에서는 효과가 미미해 수고에 비해 남는 것이 없습니다.
유의할 점
지원 상황은 좋지만 완전하지는 않습니다. 최신 브라우저는 모두 AVIF를 표시하지만, 수년째 갱신되지 않은 기기에서는 표시되지 않습니다. 실무에서는 WebP를 대체로 지정한 picture 요소가 안전합니다. 그러면 각 이용자의 기기가 이해하는 최선의 형식이 전달됩니다.
인코딩에는 시간이 더 걸립니다. AVIF는 연산량이 많아 큰 이미지에서는 브라우저 안에서 몇 초가 걸릴 수 있습니다. 변환할 때 한 번뿐이며 배포에는 영향이 없습니다.
두 번째 압축이 들어갑니다. WebP는 이미 손실 압축이었습니다. 압축 전 원본이 있다면 거기서 곧장 변환하는 편이 기술적으로 더 깔끔합니다.
이미지는 손을 떠나지 않습니다
미공개 캠페인 소재나 출시 전 제품 사진을 외부 서버에 둘 이유는 없습니다. ImageXpo는 WebAssembly로 AVIF 인코딩을 기기 안에서 완결합니다. 대량 배치에서도 마찬가지입니다.
자주 묻는 질문
모든 브라우저에서 AVIF가 표시되나요?
크롬, 파이어폭스, 사파리, 엣지의 최신 버전은 모두 표시합니다. 수년째 갱신되지 않은 오래된 기기에서는 표시되지 않습니다. 실제 서비스에서는 WebP를 대체로 지정한 picture 요소를 권합니다.
변환에 시간이 오래 걸리는 이유는 무엇인가요?
AV1 압축은 연산량이 많고 여기서는 사용자 프로세서에서 실행되기 때문입니다. 부담은 한 번뿐이며 방문자는 이후 계속 가벼운 파일의 이점을 누립니다.
작은 아이콘에도 효과가 있나요?
거의 없습니다. 색이 적고 면적이 작은 도판에서는 차이가 미미합니다. 가장 큰 효과는 부드러운 계조를 가진 큰 사진에서 나옵니다.
두 번째 압축으로 화질이 떨어지나요?
WebP가 이미 손실 압축이었으므로 아주 조금 떨어집니다. 높은 화질 설정에서는 지각되지 않습니다. 압축 전 원본이 있다면 거기서 곧장 변환하는 편이 확실합니다.