AVIF는 이미지를 대략적으로 압축합니다. WebP보다 20% 더 작음 동일한 품질로, WebP는 몇 배 더 빠르게 인코딩하고 더 많은 곳에서 작동합니다. 둘 다 비디오 코덱에서 파생된 차세대 형식입니다. 2010년 VP8의 WebP, 2019년 최신 AV1의 AVIF입니다. AVIF는 HDR 및 12비트 색상을 지원하는 더 강력한 압축기입니다. WebP는 더 광범위한 소프트웨어 지원과 더 빠른 인코딩을 갖춘 실용적인 기본값입니다. 이 비교에서는 각 형식의 출처, 압축, 인코딩 속도, 색상 심도, 브라우저 지원, 투명도 및 애니메이션, 특정 용도에 적합한 형식을 다룹니다.

둘 다 완전히 승리하지 못합니다. AVIF는 가장 작은 파일과 가장 넓은 색상을 생성합니다. 오늘날 WebP는 더 빠르게 만들고 더 안전하게 서비스할 수 있습니다. 많은 사이트에서는 AVIF를 먼저 나열하고 WebP를 두 번째로 나열하고 JPG 또는 PNG 대체를 마지막으로 나열하여 두 가지를 모두 제공하므로 모든 브라우저는 읽을 수 있는 최상의 형식을 얻습니다.

각 형식의 출처

두 형식 모두 비디오 압축에서 가져온 스틸입니다. WebP는 다음에서 코딩을 가져옵니다. VP8, 2010년 Google 비디오 코덱이므로 이제 10년이 훨씬 넘었으며 완벽하게 지원됩니다. AVIF는 다음에서 코딩을 가져옵니다. AV1, Google, Netflix, Apple 등이 회원으로 있는 Alliance for Open Media의 2019년 로열티 프리 코덱입니다. AV1은 VP8보다 한 세대 앞서 있기 때문에 AVIF는 더 세게 압축하지만 더 많은 컴퓨팅 성능을 요구합니다.

압축: AVIF 승리

AV1이 더 새롭고 똑똑하기 때문에 압축은 AVIF를 선호합니다. 동일한 품질의 동일한 사진에서 AVIF는 WebP보다 20% 더 작음, JPG보다 훨씬 작습니다. AVIF는 또한 단순한 색상과 그라데이션을 깔끔하게 처리하여 약한 형식에 표시되는 밴딩을 방지합니다. 가능한 가장 작은 파일의 경우 AVIF가 승자이며 넓은 부드러운 영역이 있는 이미지에서는 간격이 커집니다.

이미지가 많은 사이트에 저장하는 것이 좋습니다. WebP가 이미 이미지를 JPG 아래에서 1/3만큼 잘라낸 경우 AVIF는 위쪽에서 또 다른 5분의 1을 잘라내므로 원본 JPG에 비해 전체 축소량이 절반에 가까워질 수 있습니다. Core Web Vitals에서 측정된 페이지의 경우 이는 의미 있는 속도 향상입니다.

인코딩 속도: WebP 승리

인코딩은 AVIF가 압축 비용을 지불하는 곳입니다. AV1은 계산량이 많기 때문에 AVIF 인코딩은 WebP보다 몇 배 느립니다.. 사이트가 수천 개의 이미지를 처리하거나 즉시 생성하거나 제한된 서버 리소스에서 실행되는 경우 이는 중요합니다. WebP는 실시간 사용이 가능할 만큼 빠르게 인코딩하므로 WebP가 기본값이 되었습니다. 이미지를 표시하기 위해 브라우저가 수행하는 디코딩은 두 가지 모두 빠르므로 방문자는 어느 쪽이든 속도 저하를 느끼지 않습니다.

색상 심도 및 HDR: AVIF가 승리

색상 심도는 두 가지를 명확하게 구분합니다. AVIF는 지원합니다 채널당 최대 12비트 및 HDR, 따라서 WebP가 할 수 없는 넓은 영역과 높은 동적 범위의 이미지를 보유합니다. WebP는 JPG와 마찬가지로 채널당 8비트로 제한됩니다. 사진, 최신 광역 디스플레이 및 HDR 콘텐츠의 경우 AVIF가 둘 중 유일한 선택입니다. 표준 8비트 화면에서는 차이가 눈에 띄지 않지만 지원 하드웨어에서는 AVIF가 WebP에서 저장할 수 없는 색상을 표시합니다.

투명성과 애니메이션

두 형식 모두 투명성과 애니메이션을 다루므로 여기서는 둘 다 승리하지 못합니다. 각각은 풀 알파 채널, 따라서 투명한 로고는 둘 중 하나에서 투명하게 유지되며 둘 다 GIF보다 훨씬 작은 애니메이션 클립을 지원합니다. AVIF의 애니메이션은 AV1 덕분에 더 단단하게 압축되는 반면 WebP의 애니메이션은 더 빠르게 제작됩니다. 간단한 애니메이션 그래픽의 경우 둘 중 하나가 GIF를 결정적으로 능가합니다.

브라우저 및 소프트웨어 지원: WebP가 승리합니다.

지원은 WebP의 장점입니다. 모든 최신 브라우저는 수년 동안 WebP를 읽어 왔으며 풍부한 소프트웨어, 플러그인 및 CDN이 이를 처리합니다. 이제 브라우저에서 AVIF 지원이 광범위해졌습니다., Chrome, Firefox 및 Safari를 포함하지만 WebP, 데스크톱 편집기, 이전 시스템 및 일부 CDN보다 뒤처집니다. 현재 혼합 소프트웨어 전반에서 안정적으로 열어야 하는 파일의 경우 WebP가 더 안전한 방법입니다.

실제 파일 크기

실수는 거래를 구체적으로 만듭니다. JPG로 400KB인 사진은 동일한 품질에서 WebP로 약 280KB, AVIF로 약 220KB에 도달할 수 있습니다. PNG의 경우 120KB인 투명 그래픽은 WebP의 경우 80KB, AVIF의 경우 60KB가 될 수 있습니다. 정확한 수치는 이미지에 따라 다르지만 순서는 AVIF 최소, WebP 중간, 레거시 형식 최대입니다. 추가 20%가 AVIF의 느린 인코딩 및 더 좁은 지원 가치가 있는지 여부에 따라 선택하십시오.

디코딩 속도 및 방문자의 느낌

방문자가 경험하는 것은 인코딩이 아닌 디코딩이며 여기서 두 형식은 가깝습니다. 브라우저가 이미지를 표시할 때 이를 디코딩해야 하며, AVIF와 WebP 모두 원활한 페이지 로드를 위해 충분히 빠르게 디코딩. AVIF의 과도한 AV1 계산은 인코딩 측에서 수행되며 이미지가 로드될 때마다 수행되는 것이 아니라 이미지가 생성될 때 한 번 수행됩니다. 따라서 방문자는 결코 AVIF의 인코딩 비용을 지불하지 않습니다. 다운로드 크기가 작아야 이점을 얻을 수 있습니다.

이러한 분할은 각 형식을 배포하는 방법에 중요합니다. 빌드 단계 또는 CDN에서 미리 AVIF를 인코딩하고 결과를 캐시합니다. 방문자에게 아무런 혜택도 주지 않고 서버에 부담을 줄 수 있으므로 모든 요청마다 인코딩하지 마세요. WebP는 즉시 인코딩할 수 있을 정도로 관대하지만 AVIF는 사전 생성을 보상합니다.

HTML로 대체 구축

두 형식을 모두 안전하게 제공하려면 그림 요소를 사용하므로 브라우저가 이해하는 최상의 소스를 선택할 수 있습니다. AVIF를 먼저 나열하고 WebP를 두 번째로 나열하고 JPG 또는 PNG를 마지막에 나열합니다. 브라우저는 목록을 읽고 다음을 로드합니다. 디코딩할 수 있는 첫 번째 형식, 나머지는 무시합니다. 최신 브라우저는 AVIF를 사용하고, 오래된 브라우저는 WebP에 속하며, 오래된 브라우저는 JPG를 사용합니다. 방문자는 손상된 이미지를 볼 수 없으며 각 방문자는 소프트웨어가 허용하는 가장 작은 파일을 얻습니다.

대부분의 콘텐츠 관리 시스템과 이미지 CDN은 이 마크업을 구축하므로 파일 하나를 업로드하면 시스템에서 형식과 대체 체인을 생성합니다. 소규모 사이트에서는 수동으로 수행하는 것이 좋지만 자동화는 수백 개의 이미지에 걸쳐 더 잘 확장됩니다.

사진 및 HDR용 AVIF

AVIF의 색상 장점은 사진에서 가장 중요합니다. 그 12비트 색상 및 HDR 지원 WebP는 둘 다 저장할 수 없는 최신 카메라의 넓은 톤 범위와 HDR 디스플레이의 생생한 출력을 보유합니다. 밝은 하늘과 깊은 그림자가 있는 풍경은 AVIF와 같이 더 많은 디테일을 유지합니다. 넓은 영역의 화면에서는 WebP가 클리핑하는 채도가 높은 빨간색과 녹색이 그대로 유지됩니다.

표준 화면의 일상적인 웹 그래픽의 경우 8비트 디스플레이는 추가 범위를 표시할 수 없기 때문에 이러한 이점이 보이지 않습니다. 그러나 사진 사이트, HDR 콘텐츠 및 고급 디스플레이의 경우 AVIF는 두 가지 중 이미지 정의를 수행하는 유일한 제품입니다.

AVIF의 서버 및 툴링 비용

AVIF의 압축은 생성 시점에서 무료가 아닙니다. 인코딩 속도가 느리다는 것은 더 높은 CPU 비용과 더 긴 빌드 시간, 사이트에서 수천 개의 이미지를 생성하면 합산됩니다. 이전 이미지 라이브러리와 일부 편집자는 아직 AVIF를 작성할 수 없으므로 도구에서 이를 지원해야 합니다. 이와 대조적으로 WebP는 거의 모든 이미지 라이브러리에서 처리되고 빠르게 인코딩되므로 현재로서는 마찰이 적은 선택으로 유지됩니다.

실질적인 시사점은 인코딩 비용 및 도구 격차에 비해 크기가 20% 더 절약된다는 점입니다. 모든 바이트를 최적화하는 대규모 미디어 운영의 경우 AVIF가 그 자리를 차지합니다. 소규모 사이트의 경우 WebP는 마찰 없이 대부분의 이점을 제공합니다.

어떤 형식이 승리하는가

모든 직업에서 승리하지 못합니다. 선택 가장 작은 파일, HDR 및 다양한 색상을 위한 AVIF 도구가 이를 지원하고 인코딩 시간이 병목 현상이 아닌 경우. 선택 빠른 인코딩, 광범위한 지원 및 안전한 기본값을 위한 WebP 이는 오늘날 더 많은 소프트웨어에서 작동합니다. 가장 강력한 설정은 먼저 AVIF, 두 번째 WebP, 마지막으로 JPG 또는 PNG 대체를 모두 제공하므로 각 방문자는 브라우저에서 디코딩할 수 있는 최상의 형식을 수신하게 됩니다.

이러한 형식을 만드는 방법

최신 형식을 만들려면 WebP를 위한 무거운 도구가 필요하지 않습니다. 우리의 PNG-WebP 변환기 브라우저에서 실행되고 파일을 일괄 처리하며 워터마크를 추가하지 않습니다. AVIF 인코딩은 더 까다롭기 때문에 일반적으로 빠른 브라우저 도구보다는 이미지 CDN 또는 빌드 단계로 처리됩니다. 대부분의 사이트에서는 지금 WebP를 생성하고 나중에 CDN을 통해 AVIF를 추가하는 것이 실용적인 방법입니다.

자주 묻는 질문

AVIF로 인해 웹 사이트가 로드될 때 속도가 느려지나요?

아니요. AVIF는 빠르게 디코딩됩니다. 인코딩만 느림, 인코딩은 페이지를 로드할 때마다 발생하는 것이 아니라 이미지가 만들어질 때 한 번 발생합니다. 방문자는 더 작은 다운로드만 받습니다.

WebP 폴백을 사용하여 AVIF를 어떻게 제공하나요?

그림 요소를 사용하세요. AVIF를 먼저 나열하고 WebP를 두 번째로 나열하고 JPG 또는 PNG를 마지막에 나열합니다., 브라우저는 디코딩할 수 있는 첫 번째 형식을 로드합니다.

소규모 웹사이트에 AVIF가 가치가 있나요?

아직은 그렇지 않은 경우가 많습니다. WebP는 마찰을 줄이면서 대부분의 비용 절감 효과를 제공합니다., AVIF의 느린 인코딩 및 도구 격차로 인해 소규모 사이트에서는 거의 필요하지 않은 비용이 추가되기 때문입니다.

AVIF가 WebP보다 나은가요?

압축하면 그렇습니다. AVIF는 약 20% 더 작습니다. 그리고 HDR을 지원합니다. WebP는 더 빠르게 인코딩하고 더 폭넓게 지원하므로 현재는 더 안전한 기본값입니다.

AVIF는 WebP보다 얼마나 작습니까?

약 20% 더 작아짐 AVIF는 최신 AV1 코덱을 사용하기 때문에 품질은 동일하고 JPG보다 훨씬 작습니다.

AVIF 제작 속도가 느린 이유는 무엇입니까?

왜냐하면 AV1 인코딩은 계산량이 많습니다.. AVIF는 더 나은 압축을 위해 인코딩 속도를 교환합니다. 이는 이미지를 대량으로 처리하거나 제한된 서버에서 처리할 때 중요합니다.

WebP는 HDR을 지원하나요?

아니요. WebP는 채널당 8비트로 제한됩니다., 따라서 HDR 또는 광색역 색상을 저장할 수 없습니다. AVIF는 최대 12비트 및 HDR을 지원합니다.

AVIF를 지원하는 브라우저는 무엇입니까?

Chrome, Firefox, Safari는 AVIF를 지원합니다., WebP와 일부 CDN 및 편집자는 채택 속도가 뒤처지지만. 이전 클라이언트에 대해 WebP 또는 JPG 대체를 제공합니다.

AVIF와 WebP 모두 투명성을 유지합니까?

예. 둘 다 전체 알파 채널을 전달합니다., 따라서 투명한 그래픽은 JPG와 달리 두 형식 모두 투명하게 유지됩니다.

애니메이션에는 AVIF나 WebP가 더 좋나요?

둘 다 GIF를 이겼습니다. AVIF는 더 촘촘하게 압축됩니다. AVIF 애니메이션은 더 작고 WebP는 더 빠르게 제작됩니다.이므로 크기나 인코딩 속도가 더 중요한지 선택하세요.

내 사이트에 AVIF 또는 WebP를 사용해야 합니까?

둘 다 제공하십시오. 가장 작은 파일의 경우 AVIF가 먼저, WebP는 두 번째입니다. 호환성을 위해 나머지는 JPG 또는 PNG로 대체합니다.

AVIF가 WebP를 대체할까요?

곧. AVIF는 더 잘 압축하지만 WebP는 더 빠르게 인코딩하고 더 폭넓은 지원을 제공합니다., 따라서 둘 다 수년간 공존하고 함께 봉사할 가능성이 높습니다.

이전 브라우저에서 AVIF를 열 수 있나요?

종종 그렇지 않습니다. AVIF 지원은 WebP보다 젊습니다., 따라서 이전 소프트웨어를 사용하는 방문자에게는 JPG 또는 PNG 대체가 필수적입니다.

AVIF와 WebP는 모두 비디오 코덱으로 구축된 차세대 형식이지만 AVIF는 약 20% 더 작게 압축하고 HDR 및 12비트 색상을 추가하는 반면 WebP는 더 빠르게 인코딩하고 더 폭넓은 지원을 제공합니다. 둘 다 투명성과 애니메이션을 유지하므로 가장 작은 파일을 원하는지 가장 안전하고 빠른 파일을 원하는지 선택이 내려집니다. 크기를 위해 먼저 AVIF를 제공하고 호환성을 위해 WebP를 두 번째로 제공하며 나머지는 JPG 또는 PNG 대체를 제공합니다. 위의 변환기를 사용하여 브라우저에서 WebP를 생성하고 이미지 파이프라인을 통해 AVIF를 추가하세요.

빠른 참조: AVIF 또는 WebP

도달하다 AVIF 가장 작은 파일을 원하는 경우, 이미지에 HDR 또는 넓은 색상이 필요한 경우, CDN 또는 빌드 단계에서 모든 요청 속도를 늦추지 않고 사전 인코딩할 수 있는 경우. 도달하다 웹P 빠른 인코딩, 가장 광범위한 소프트웨어 지원, 거의 모든 도구가 이미 처리하고 있는 마찰이 적은 기본값을 원하는 경우. 가장 강력한 설정은 둘 중 하나가 아니라 둘 다 순서대로 제공되는 것입니다. 먼저 크기는 AVIF, 도달 범위는 두 번째 WebP, 마지막으로 JPG 또는 PNG 폴백을 제공하므로 방문자에게 깨진 이미지가 남지 않습니다.

AVIF 뒤에 오는 것

이미지 형식은 계속 발전하고 있으며 JPEG XL은 무손실 JPG 트랜스코딩으로 강력한 압축을 약속하는 다음 경쟁자입니다. 현재 브라우저 지원은 제한되어 있으므로 아직 실용적인 선택은 아닙니다. 현재 AVIF와 WebP는 배포할 가치가 있는 두 가지 차세대 형식이며 JPEG XL은 주목할 가치가 있습니다. 폴백 체인을 구축한다는 것은 나중에 이전 브라우저를 손상시키지 않고 새로운 형식을 추가할 수 있다는 것을 의미합니다. 이것이 바로 그림 요소 접근 방식이 미래 지향적인 이유입니다.