최신 이미지 형식 사용: AVIF 및 WebP

우리는 최근 에 이미지, 이미지 압축, 제공 및 유지 관리 방법에 대해 알아야 할 모든 정보 가 포함된 Addy의 이미지 최적화 책을 출판했습니다. 이제 Addy가 서명한 손으로 쓴 개인 메시지와 함께 배송됩니다. 목차로 넘어 가서 바로 책을 받아가세요.

이미지는 웹에서 가장 인기 있는 리소스 유형이며 가장 큰 경우가 많습니다. 사용자는 고품질 영상을 높이 평가하지만 이러한 영웅 이미지, 제품 사진 및 고양이 밈을 가능한 한 효율적이고 효과적으로 전달하려면 주의를 기울여야 합니다.

Web Vitals에 대해 최적화하는 경우 이미지가 웹 사이트에 대한 가장 큰 콘텐츠가 포함된 페인트 요소의 ~42%를 차지한다는 소식에 관심이 있을 수 있습니다. 주요 사용자 중심 메트릭은 종종 페이지에 있는 이미지의 크기, 수, 레이아웃 및 로드 우선 순위에 따라 달라집니다. 이것이 성능에 대한 많은 지침에서 이미지 최적화에 대해 이야기하는 이유입니다.

아래에서 권장 사항을 찾을 수 있습니다.

헐 박사

• AVIF는 손실이 있는 저충실도 압축이 허용되고 대역폭 절약이 최우선 순위인 경우 확실한 첫 번째 선택입니다. 인코딩/디코딩 속도가 요구 사항을 충족한다고 가정합니다.
• WebP는 보다 광범위하게 지원되며 넓은 색 영역 또는 텍스트 오버레이와 같은 고급 기능이 필요하지 않은 일반 이미지를 렌더링하는 데 사용할 수 있습니다.
• AVIF는 PNG 또는 무손실 WebP뿐 아니라 사진이 아닌 이미지도 압축하지 못할 수 있습니다. WebP의 압축 절약은 고충실도 손실 압축의 경우 JPEG보다 낮을 수 있습니다.
• AVIF와 WebP 모두 실행 가능한 옵션이 아닌 경우 MozJPEG(JPEG 이미지 최적화), OxiPNG(사진이 아닌 이미지) 또는 JPEG 2000(손실 또는 무손실 사진 이미지) 평가를 고려하십시오.
• <picture> 을 통한 점진적 향상을 통해 브라우저는 선호하는 순서대로 지원되는 첫 번째 형식을 선택할 수 있습니다. 이 구현은 헤더 수락 및 콘텐츠 협상(예: 자동 형식 및 품질)이 최상의 이미지를 제공할 수 있는 이미지 CDN을 사용할 때 상당히 단순화됩니다.

현대 형식이 필요한 이유는 무엇입니까?

웹에서 이미지를 렌더링할 때 선택할 수 있는 이미지 형식이 상당히 다양합니다. 이미지 형식 간의 근본적인 차이점은 각 이미지 유형을 인코딩하거나 디코딩하는 데 사용되는 이미지 코덱이 다르다는 것입니다. 이미지 코덱은 이미지를 특정 파일 형식으로 압축 및 인코딩하고 화면에 표시하기 위해 디코딩하는 데 사용되는 알고리즘을 나타냅니다.

코덱 평가

다양한 매개변수를 기반으로 어떤 이미지 형식이 적합한지 평가할 수 있습니다.

• 압축
  코덱의 효율성은 주로 얼마나 많은 압축을 달성할 수 있는지에 따라 측정할 수 있습니다. 압축률이 높을수록 파일 크기가 작아지고 네트워크에서 이미지를 전송하는 데 필요한 데이터가 더 적기 때문에 달성된 압축은 관련이 있습니다. 파일 크기가 작을수록 페이지에 필요한 이미지 리소스가 더 빨리 로드되므로 페이지에 대한 LCP(가장 큰 콘텐츠가 포함된 페인트) 메트릭에 직접적인 영향을 줍니다.
• 품질
  이상적으로는 압축으로 인해 이미지 데이터가 손실되지 않아야 합니다. 무손실이어야 합니다. 이미지 데이터가 일부 손실되어 이미지 품질이 저하되는 압축 형식을 손실이라고 합니다. DSSIM 또는 ssimulacra와 같은 도구를 사용하여 이미지 간의 구조적 유사성을 측정하고 품질 손실이 허용 가능한지 판단할 수 있습니다.
• 인코딩/디코딩 속도
  복잡한 압축 알고리즘은 이미지를 인코딩/디코딩하기 위해 더 높은 처리 능력이 필요할 수 있습니다. 인코딩이 사전에 수행되는지(정적/빌드) 또는 즉시(온디맨드) 수행되는지에 따라 복잡할 수 있습니다. 인코딩은 정적 이미지의 경우 일회성일 수 있지만 브라우저는 여전히 이미지를 렌더링하기 전에 디코딩해야 합니다. 복잡한 디코딩 프로세스로 인해 이미지 렌더링 속도가 느려질 수 있습니다.

압축 정도, 이미지 품질 및 디코딩 속도는 웹의 이미지 성능을 비교할 때 고려해야 할 핵심 요소입니다. 특정 사용 사례에는 다음과 같은 다른 기능을 지원하는 이미지 형식이 필요할 수 있습니다.

• 소프트웨어 지원: 이미지 형식은 매우 잘 수행될 수 있지만 브라우저, CDN 및 기타 이미지 조작 도구가 인식하지 못하면 쓸모가 없습니다.
• 웹상의 일부 이미지(예: GIF)에는 애니메이션 지원이 필요할 수 있습니다. 그러나 이상적으로는 이러한 이미지를 비디오로 대체해야 합니다.
• 알파 투명도: 알파 채널을 사용하여 다양한 불투명도 수준의 이미지를 만드는 기능. (예: 배경이 투명한 PNG 이미지)
• HDR(High Dynamic Range) 이미징과 넓은 색 영역을 지원해야 합니다.
• 점진적으로 이미지를 로드하는 디코딩을 통해 사용자는 이미지가 다듬어지기 전에 이미지를 합리적으로 미리 볼 수 있습니다.
• 이미지의 전경이나 배경에 효과를 적용할 수 있는 깊이 맵.
• 텍스트 오버레이, 테두리 등과 같이 여러 레이어가 겹치는 이미지.

팁: 최신 형식의 품질, 압축 및 미세 조정을 평가할 때 시각적인 병렬 비교를 수행하는 Squoosh.app의 기능은 도움이 됩니다. 확대를 통해 형식이 뭉침이나 가장자리 인공물을 나타내는 위치를 더 잘 파악하여 절충안을 추론할 수 있습니다.

오래된 경비원: JPEG 및 PNG

JPEG는 25년 동안 가장 널리 지원되는 이미지 형식입니다. 클래식 JPEG 인코더는 압축이 상대적으로 약하지만 MozJPEG와 같은 최신 JPEG 인코딩 노력은 압축을 개선하지만 최신 형식만큼 최적은 아닙니다. JPEG는 손실 압축 형식이기도 합니다. JPEG의 디코딩 속도는 탁월하지만 눈길을 끄는 현대적인 웹 사이트의 이미지에 필요한 다른 바람직한 기능이 부족합니다. 이미지, 애니메이션, 깊이 맵 또는 오버레이의 투명도는 지원하지 않습니다.

JPEG는 사진에서 가장 잘 작동하는 반면 PNG는 다른 정지 이미지에 해당합니다. PNG는 무손실 형식이며 알파 투명도를 지원할 수 있지만 특히 사진의 경우 압축률이 상당히 낮습니다. JPEG와 PNG는 모두 필요한 이미지 유형에 따라 광범위하게 사용됩니다.

따라서 최신 이미지 형식의 목표는 앞서 논의한 다른 기능을 지원하기 위해 더 나은 압축과 유연성을 제공하여 JPEG 및 PNG의 한계를 극복하는 것입니다. 이러한 배경을 바탕으로 AVIF와 WebP가 제공하는 기능을 살펴보겠습니다.

AVIF

AV1 이미지 파일 형식(AVIF)은 정지 이미지 및 애니메이션 이미지를 저장하기 위한 오픈 소스 이미지 형식입니다. AOMedia(AOMedia)에서 2019년 2월에 출시했습니다. AVIF는 인기 있는 AV1 비디오 형식의 이미지 버전입니다. 목표는 최첨단의 로열티 프리인 새로운 오픈 소스 비디오 코딩 형식을 개발하는 것이었습니다.

AVIF 혜택

AVIF는 압축 후 고품질 이미지를 생성하기 위해 매우 효율적인 손실 및 무손실 압축을 지원합니다. AVIF는 오늘날 웹에서 가장 널리 사용되는 형식(JPEG, WebP, JPEG 2000 등)보다 훨씬 더 잘 압축합니다. 이미지는 비슷한 화질의 JPEG보다 최대 10배 작을 수 있습니다. 일부 테스트에서는 AVIF가 유사한 지각 품질 을 가진 JPEG와 비교하여 파일 크기를 50% 절약하는 것으로 나타났습니다. WebP 무손실이 AVIF 무손실보다 더 나은 경우가 있을 수 있으므로 수동으로 평가해야 합니다.

여기에서 JPEG 이미지와 Squoosh 앱을 사용하여 변환된 해당(손실) AVIF 이미지 간의 크기 비교를 볼 수 있습니다.

우수한 압축 외에도 AVIF는 다음과 같은 기능도 제공합니다.

• AVIF는 이미지 시퀀스에 저장된 다중 레이어 이미지를 통해 애니메이션, 라이브 사진 등을 지원합니다.
• JPEG에 한계가 있는 그래픽 요소, 로고 및 인포그래픽에 대한 더 나은 지원을 제공합니다.
• JPEG보다 더 나은 무손실 압축을 제공합니다.
• 12비트의 색심도를 지원하여 더 나은 밝고 어두운 톤 범위와 더 넓은 광도 범위로 HDR(High Dynamic Range) 및 WCG(Wide Color Gamut) 이미지를 가능하게 합니다.
• 여기에는 알파 채널을 사용하는 투명 이미지를 포함하여 흑백 이미지 및 다중 채널 이미지에 대한 지원이 포함됩니다.

형식 비교

다양한 형식에서 제공하는 품질 및 압축의 차이점을 더 잘 이해하기 위해 이미지를 시각적으로 비교하고 차이점을 평가할 수 있습니다.

품질 및 압축 평가

각 형식에 대해 Squoosh의 기본 고품질 출력 설정을 사용하여 JPEG, WebP 및 AVIF의 품질 평가를 시작합니다. 새로운 사용자 경험을 모방하기 위해 의도적으로 조정되지 않았습니다. 다시 말하지만, 요구 사항에 가장 적합한 품질 구성 및 형식을 평가하는 것을 목표로 해야 합니다. 시간이 부족한 경우 이미지 CDN이 이 중 일부를 자동화합니다.

이 첫 번째 테스트에서 560KB의 일몰 사진(많은 텍스처 포함)을 인코딩하면 각각에 대해 시각적으로나 지각적으로 매우 유사한 이미지가 생성됩니다. 출력은 289KB(JPEG@q75), 206KB(WebP@q75) 및 101KB(AVIF@q30)로 제공되며 최대 81%의 압축 절감 효과가 있습니다.

훌륭한 내용이지만 더 깊이 파헤쳐 보겠습니다.

서로 다른 이미지 형식(예: DSSIM, simulacra) 간의 비유사성을 비교하기 위한 다양한 도구가 존재합니다. 이러한 도구를 사용하면 예를 들어 JPEG에서 WebP로 또는 WebP에서 AVIF로 평가할 때 비슷한 품질 설정을 근사할 수 있습니다. 아래는 JPEG의 70% 품질을 목표로 비슷한 품질로 인코딩된 동일한 이미지입니다. 출력은 323KB(JPEG), 214KB(WebP@q75) 및 117KB(AVIF@60)입니다. 크기는 기본값을 신뢰하는 것보다 약간 크지만 압축 승리는 여전히 중요합니다.

또한 WebP와 AVIF가 빛을 발하는 부분인 각 형식에서 낮은 품질을 확인할 수도 있습니다. 다음은 JPEG@q10(35KB), WebP@q1(35KB), AVIF@q17(36KB)입니다. WebP는 JPEG에 비해 블록 아티팩트가 훨씬 적은 반면 AVIF는 블록이 적고 이미지의 주요 세부 사항이 더 선명합니다. .

참고: 이 일몰은 더 높은 해상도의 이미지( 2400 × 1595 )이며 2배 화면에서는 사용자가 이미지와 상호 작용하는 방식(예: 핀치 및 줌)에 따라 품질이 훨씬 낮고 여전히 선명하게 보일 수 있습니다.

JPEG와 AVIF의 차이점에 대한 보다 극단적인 예는 20KB의 JPEG(4:4:4)와 AVIF(4:4:4)를 비교하는 Kodak 데이터 세트(Netflix에서 평가)의 예를 볼 수 있습니다. 19.8KB에서. JPEG의 하늘과 지붕에 뭉툭한 인공물이 어떻게 보이는지 확인하십시오. AVIF는 차단 아티팩트가 적게 포함되어 눈에 띄게 더 좋습니다. 그러나 지붕에 텍스처 손실 수준과 약간의 흐림이 있습니다. 전체 압축 계수가 59x라는 점을 감안하면 여전히 매우 인상적입니다.

다음으로, 많은 미세한 세부 사항, 질감 및 구름의 대비가 낮은 영역이 있는 해변 이미지의 품질을 평가해 보겠습니다. 원본(482KB)을 JPEG, WebP 및 AVIF가 45KB 파일 크기 제한(고급 조정 없이)으로 생성할 수 있는 것과 Squoosh를 사용하여 비교할 것입니다. 이것은 50% 품질의 JPEG(MozJPEG), 54%의 WebP 및 36%의 AVIF에서 작동합니다.

JPEG는 구름과 물에서 뭉툭한 인공물과 가시적인 색상 밴딩이 있는 반면 WebP와 AVIF는 이러한 뭉침 현상이 눈에 띄게 적습니다. 제 생각에 AVIF는 세 가지 모두에서 전반적으로 가장 부드러운 경험을 제공합니다.

텍스처에 대해 말하자면 "The Witcher"(36KB 대상)의 Netflix 포스터에서도 유사한 저품질 평가를 수행할 수 있습니다. JPEG의 경우 구름이 뭉툭하고 WebP의 경우 빨간색 텍스트 주변이 약간 흐릿합니다(해결 방법 없이 4:2:0 크로마 서브샘플링만 지원). AVIF가 가장 잘 보이고 그 다음이 WebP입니다.

마지막으로 이전 이미지보다 훨씬 많은 텍스트 요소가 포함된 사진(포스터)을 살펴보겠습니다. 품질을 낮추고 상당히 작은 크기(25KB)를 대상으로 하면 JPEG가 텍스트 주위에 강한 색상 밴딩과 후광이 있음을 관찰할 수 있습니다. 가장자리 주변에 명확한 블록 아티팩트가 있습니다. WebP는 어느 정도의 막힘을 피하여 점진적으로 더 좋아 보입니다. AVIF는 JPEG 또는 WebP보다 약간 더 선명한 가장자리를 유지하여 부드러운 이미지를 생성합니다.

사진 및 일러스트레이션에 대한 추가 형식 대 품질 비교가 가능합니다.

AVIF 도구 및 지원

2019년 출시 이후 AVIF에 대한 지원이 크게 증가했습니다. 이전에는 AVIF 파일을 생성하거나 볼 수 있는 직접적인 방법이 없었지만 지금은 사용 가능한 오픈 소스 유틸리티를 사용하여 쉽게 할 수 있습니다.

브라우저의 AVIF 이미지

AVIF는 2020년 8월 Chrome 85와 함께 Chrome 데스크톱 버전에 도입되었습니다. Android용 Chrome, 데스크톱용 Opera 및 Firefox, Android용 Opera에서도 지원됩니다.

페이지에 AVIF 이미지를 포함하려면 이미지 요소로 추가할 수 있습니다. 그러나 AVIF를 지원하지 않는 브라우저는 이 이미지를 렌더링할 수 없습니다.

 <img src="/images/sky.avif" width="360" height="240" alt="a beautiful sky">

최소한 하나의 지원되는 이미지 형식이 모든 브라우저에 전달되도록 하는 해결 방법은 AVIF를 점진적 향상 으로 적용하는 것입니다. 두 가지 방법이 있습니다.

점진적 향상

1. <picture> 요소 사용하기
   <picture> 은 브라우저가 인식하지 못하는 이미지를 건너뛸 수 있도록 하므로 원하는 순서대로 이미지를 포함할 수 있습니다. 브라우저는 지원하는 첫 번째 브라우저를 선택합니다.

 <picture> <source type="image/avif"> <source type="image/webp"> <img src="img/photo.jpg" alt="Description" width="360" height="240"> </picture>

1. 콘텐츠 협상 사용
   콘텐츠 협상을 통해 서버는 브라우저에서 지원하는 내용을 기반으로 다양한 리소스 형식을 제공할 수 있습니다. 특정 형식을 지원하는 브라우저는 해당 형식을 수락 요청 헤더에 추가하여 이를 알릴 수 있습니다. 예를 들어 Chrome의 이미지에 대한 요청 수락 헤더는 다음과 같습니다.
   Accept: image/avif,image/webp,image/apng,image/*,*/*;q=0.8
   fetch 이벤트 핸들러에서 AVIF가 지원되는지 확인하는 코드는 다음과 같습니다.
   const hdrAccept = event.request.headers.get("accept");
const sendAVIF = /image\/avif/.test(hdrAccept);
   이 값을 사용하여 AVIF 또는 기타 기본 형식을 클라이언트에 제공할 수 있습니다.

점진적 향상을 위한 마크업을 만드는 것은 어려울 수 있습니다. Image CDN은 클라이언트에 적합한 최상의 형식을 자동으로 제공하는 옵션을 제공합니다. 그러나 이미지 CDN을 사용하지 않는 경우 just-gimme-an-img와 같은 도구 사용을 고려할 수 있습니다. 이 도구는 다양한 형식과 너비로 주어진 이미지에 대한 그림 요소에 대한 마크업을 생성할 수 있습니다. 또한 완전히 클라이언트 측 Squoosh를 사용하여 마크업에 해당하는 이미지를 만듭니다. 참고: 여러 형식을 인코딩하면 사용하는 데 시간이 걸릴 수 있으므로 기다리는 동안 커피를 마시고 싶을 수 있습니다.

참고: 이미지 CDN은 이 문서에서 몇 번 언급됩니다. CDN 서버는 원본 서버보다 사용자와 더 가까운 위치에 있는 경우가 많으며 RTT(왕복 시간)가 더 짧아 네트워크 대기 시간이 향상됩니다. 즉, 다른 출처에서 서비스를 제공하면 왕복이 추가되고 성능 향상에 영향을 미칠 수 있습니다. CDN이 다른 사이트 콘텐츠를 제공하는 경우에는 문제가 없을 수 있지만 확실하지 않은 경우 실험하고 측정합니다.

AVIF 파일 인코딩 및 디코딩

여러 오픈 소스 프로젝트는 AVIF 파일을 인코딩/디코딩하는 다양한 방법을 제공합니다.

• 도서관
  Libaom은 AVIF를 만든 AOMedia에서 유지 관리하는 오픈 소스 인코더 및 디코더입니다. 라이브러리는 특히 자주 로드되거나 우선 순위가 높은 이미지의 경우 AVIF 인코딩 비용을 줄이는 것을 목표로 하는 새로운 최적화로 지속적으로 업데이트됩니다. Libavif는 AVIF 이미지 디코딩을 위해 Chrome에서 사용되는 AVIF용 오픈 소스 muxer 및 파서입니다. libaom과 함께 libavif를 사용하여 압축되지 않은 원본 이미지에서 AVIF 파일을 만들거나 다른 형식에서 코드 변환할 수 있습니다. 인기 있는 AVIF/HEIF 인코더/디코더 및 Cavif인 Libheif도 있습니다. Ben Morss 덕분에 libgd는 AVIF를 지원하며 11월에 PHP로도 제공될 예정입니다.
• 웹 앱 및 데스크탑 앱
  다양한 이미지 압축기를 사용할 수 있는 웹 앱인 Squoosh는 AVIF도 지원하므로 온라인에서 .avif 파일을 비교적 간단하게 변환하고 생성할 수 있습니다. 데스크탑에서 김프는 AVIF 내보내기를 지원합니다. ImageMagick 및 Paint.net도 AVIF를 지원하는 반면 AVIF용 Photoshop 커뮤니티 플러그인도 사용할 수 있습니다.
• 자바스크립트 라이브러리
  
  • AVIF.js는 아직 AVIF를 지원하지 않는 브라우저를 위한 AVIF 폴리필입니다. Service Worker API를 사용하여 가져오기 이벤트를 가로채고 AVIF 파일을 디코딩합니다.
  • Avif.io는 클라이언트 측에서 다른 이미지 유형의 파일을 AVIF로 변환할 수 있는 또 다른 웹 유틸리티입니다. WebWorker를 사용하여 브라우저에서 Rust 코드를 호출합니다. 변환기 라이브러리는 wasm-pack을 사용하여 WASM으로 컴파일됩니다.
  • Sharp는 표준 형식의 큰 이미지를 AVIF 이미지를 포함한 더 작은 웹 친화적인 이미지로 변환할 수 있는 Node.js 모듈입니다.
• 유용
  이미지 변환 또는 변환 유틸리티는 AVIF 형식을 지원합니다. MP4Box를 사용하여 AVIF 파일을 만들고 디코딩할 수 있습니다.
• 코드에서
  go-avif 는 libaom을 사용하여 Go용 libaom 인코더를 구현합니다. JPEG 또는 PNG 파일을 AVIF로 인코딩할 수 있는 avif 라는 유틸리티가 함께 제공됩니다.

Squoosh를 사용하여 AVIF 이미지를 만드는 방법을 배우거나 명령줄 인코더 avifenc 를 구축하는 방법에 관심이 있는 사람은 AVIF 파일 제공에 대한 코드랩에서 할 수 있습니다.

AVIF 및 성능

AVIF는 더 나은 압축으로 인해 이미지의 파일 크기를 줄일 수 있습니다. 결과적으로 AVIF 파일은 더 빨리 다운로드되고 더 낮은 대역폭을 사용합니다. 이렇게 하면 이미지를 로드하는 시간을 줄여 잠재적으로 성능을 향상시킬 수 있습니다.

Lighthouse 모범 사례 감사는 이제 AVIF 이미지 압축이 상당한 개선을 가져올 수 있다고 간주합니다. 페이지의 모든 BMP, JPEG 및 PNG 이미지를 수집하여 WebP로 변환하고 AVIF 파일 크기를 추정합니다. 이 추정치는 Lighthouse가 "차세대 형식으로 이미지 제공" 섹션에서 잠재적인 절감 효과를 보고하는 데 도움이 됩니다.

Tim Vereecke는 RUM(실제 사용자 모니터링)을 사용하여 측정한 웹 사이트의 1,400만 이미지를 AVIF로 변환한 후 25%의 바이트 절감과 LCP(JPEG에 비해)에 긍정적인 영향을 미쳤다고 보고했습니다.

AVIF 문제

현재 AVIF의 가장 큰 단점은 브라우저 간에 균일한 지원이 부족하다는 것입니다. AVIF를 점진적 향상으로 도입하면 이를 극복하는 데 도움이 됩니다. AVIF가 최신 파일 형식에 대한 이상적인 표준을 충족하지 못하는 몇 가지 다른 측면.

• 최신 버전의 Chrome(Chrome 94+)은 AVIF 프로그레시브 렌더링을 지원하지만 이전 버전은 지원하지 않습니다. 이 글을 쓰는 시점에는 이러한 이미지를 쉽게 만들 수 있는 인코더가 없지만 이것이 바뀔 것이라는 희망은 있습니다.
• AVIF 이미지는 인코딩 및 생성 시간이 더 오래 걸립니다. 이는 이미지 파일을 동적으로 생성하는 사이트에서 문제가 될 수 있습니다. 그러나 AVIF 팀은 인코딩 속도를 개선하기 위해 노력하고 있습니다. Google의 AVIF 기고자들도 몇 가지 멋진 성능 향상을 보고했습니다. 2021년 1월 1일부터 AVIF 인코딩은 트랜스코딩 시간이 최대 47% 향상되었으며(현재 libavif의 기본값인 속도 6) 1년 동안 73% 향상되었습니다. 7월 이후로 속도 9(즉시 인코딩)에서 코드 변환 시간이 72% 향상되었습니다.

• 디스플레이용으로 AVIF 이미지를 디코딩하면 다른 코덱보다 더 많은 CPU 전력을 차지할 수 있지만 더 작은 파일 크기가 이를 보완할 수 있습니다.
• 일부 CDN은 첫 번째 요청에서 생성하는 것이 여전히 느릴 수 있기 때문에 자동 포맷 모드에 대해 기본적으로 아직 AVIF를 지원하지 않습니다.

웹피

WebP에 대해 몇 번 언급했지만 간단히 그 역사를 살펴보겠습니다. Google은 2011년 웹을 더 빠르게 만드는 데 도움이 되는 이미지 형식으로 WebP 형식을 만들었습니다. 수년에 걸쳐 JPEG 및 PNG에 비해 더 작은 파일 크기로 이미지를 압축할 수 있는 기능 때문에 널리 받아들여지고 채택되었습니다. WebP는 허용 가능한 시각적 품질에서 무손실 및 손실 압축을 모두 제공하며 알파 채널 투명도 및 애니메이션을 지원합니다.

손실 WebP 압축은 VP8 비디오 코덱을 기반으로 하며 예측 인코딩을 사용하여 이미지를 인코딩합니다. 인접 픽셀 블록의 값을 사용하여 블록의 값을 예측하고 차이만 인코딩합니다. 무손실 WebP 이미지는 압축을 위해 이미지에 여러 변환 기술을 적용하여 생성됩니다.

WebP의 이점

WebP 무손실 이미지는 일반적으로 PNG보다 26% 작고, WebP 손실 이미지는 비슷한 품질의 JPEG 이미지보다 25~34% 작습니다. 애니메이션 지원은 GIF 이미지를 훌륭하게 대체합니다. 다음은 26% 크기 축소로 Squoosh 앱에서 생성한 왼쪽의 투명한 PNG 이미지와 오른쪽의 해당 WebP 이미지를 보여줍니다.

또한 WebP는 다음과 같은 다른 이점을 제공합니다.

• 투명도
  WebP에는 PNG보다 22% 더 많은 바이트가 있는 무손실 8비트 투명 채널이 있습니다. 또한 WebP 고유의 기능인 손실 RGB 투명도를 지원합니다.
• 메타데이터
  WebP 파일 형식은 EXIF ​​사진 메타데이터와 XMP(Extensible Metadata Platform) 디지털 문서 메타데이터를 지원합니다. 또한 ICC 색상 프로필을 포함할 수도 있습니다.
• 생기
  WebP는 트루 컬러 애니메이션 이미지를 지원합니다.

참고: 위와 같은 벡터와 같은 투명한 이미지의 경우 최적화된 SVG는 궁극적으로 래스터 형식에 비해 더 선명하고 작은 파일을 제공할 수 있습니다.

WebP 도구 및 지원

수년에 걸쳐 Google 이외의 생태계에서 WebP를 채택했으며 WebP 파일을 생성, 확인 및 로드하는 데 사용할 수 있는 도구가 많이 있습니다.

WebP 파일 제공 및 보기

WebP는 오늘날 거의 모든 주요 브라우저의 최신 버전에서 지원됩니다.

개발자가 향후 다른 브라우저에서 WebP를 제공하려면 AVIF 섹션에 표시된 대로 <picture> 요소를 사용하거나 헤더를 요청하면 됩니다.

이미지 콘텐츠 전송 네트워크(CDN)는 브라우저 지원에 따라 WebP 또는 AVIF의 이미지에 대한 자동 형식 선택을 통해 반응형 이미지도 지원합니다. WebP 플러그인은 WordPress, Joomla, Drupal 등과 같은 다른 인기 있는 스택에서 사용할 수 있습니다. WebP에 대한 초기 지원은 WordPress 5.8부터 WordPress 코어에서도 사용할 수 있습니다.

WebP 이미지를 지원하는 브라우저에서 열면 쉽게 WebP 이미지를 볼 수 있습니다. 또한 추가 기능을 사용하여 Windows 및 macOS에서 미리 볼 수도 있습니다. WebP용 Quick Look 플러그인( qlImageSize )을 설치하면 Quick Look 유틸리티를 사용하여 WebP 파일을 미리 볼 수 있습니다. WebP 팀은 Windows, macOS 및 Linux용 WebP 코덱용으로 미리 컴파일된 라이브러리 및 유틸리티를 게시했습니다. Windows에서 이를 사용하면 파일 탐색기 또는 Windows 사진 뷰어에서 WebP 이미지를 미리 볼 수 있습니다.

이미지를 WebP로 변환

WebP 팀에서 제공하는 라이브러리 외에도 여러 무료 오픈 소스 및 상용 이미지 편집 도구가 WebP를 지원합니다.

유용:
AVIF와 마찬가지로 Squoosh는 이전 섹션에서와 같이 온라인에서 파일을 WebP로 변환할 수도 있습니다. XnConvert는 데스크탑에 설치하여 WebP를 포함한 다양한 이미지 형식을 변환할 수 있는 유틸리티입니다. XnConvert는 또한 메타데이터 제거 및 편집, 자르기 및 크기 조정, 밝기 및 대비, 색상 깊이 사용자 지정, 흐리게 처리 및 선명하게 하기, 마스크 및 워터마크 및 기타 변환을 도울 수 있습니다.

Node.js 모듈:
Imagemin은 이미지를 WebP(imagemin-webp)로 변환하기 위한 애드온이 있는 인기 있는 이미지 축소 모듈입니다. 추가 기능은 손실 및 무손실 WebP 모드를 모두 지원합니다.

기타:
이미지 변환 및 조작을 위한 여러 앱이 WebP 형식을 지원합니다. 여기에는 Sketch, GIMP, ImageMagick 등이 포함됩니다. WebP용 Photoshop 플러그인도 사용할 수 있습니다.

WebP 프로덕션 사용

JPEG 및 PNG에 비해 압축 이점이 있기 때문에 많은 대기업에서 프로덕션 환경에서 WebP를 사용하여 비용을 절감하고 웹 페이지 로드 시간을 단축합니다. Google은 WebP를 사용하여 다른 손실 압축 방식에 비해 30~35%를 절약하고 하루에 430억 개의 이미지 요청을 처리하고 그 중 26%가 무손실 압축이라고 보고합니다.

데이터가 비싼 신흥 시장에서 대규모 사용자 기반에 도달하기 위해 Facebook은 Android 사용자에게 WebP 이미지를 제공하기 시작했습니다. 그들은 "JPG에 비해 25~35%, PNG에 비해 80%의 데이터 절약"을 관찰했습니다.

WebP 문제

초기에 WebP의 실질적인 단점은 브라우저 및 도구 지원이 부족했다는 것입니다. 최신 형식이 이상적으로 지원해야 하는 모든 기능을 고려할 때 WebP에는 여전히 약간의 절충점이 있습니다.

• WebP는 8비트 색상 정밀도로 제한됩니다. 결과적으로 HDR/광역 이미지를 지원할 수 없습니다.
• WebP는 크로마 서브샘플링이 없는 손실 이미지를 지원하지 않습니다. Lossy WebP는 8비트 YCbCr 4:2:0에서만 작동하는 반면, Lossy WebP는 RGBA 형식에서 작동합니다. 이것은 미세한 디테일, 유채색 질감 또는 컬러 텍스트가 있는 이미지에 영향을 줄 수 있습니다. 예는 아래를 참조하십시오.
• 프로그레시브 디코딩은 지원하지 않지만 증분 디코딩은 지원합니다. 이것은 그것을 어느 정도 보상할 수 있지만 렌더링에 대한 효과는 다를 수 있습니다.

사용 가능한 최고 품질의 소스 파일에서 WebP 파일을 이상적으로 생성해야 합니다. 표준 이하의 JPEG를 WebP로 변환하는 것은 품질이 두 번 떨어지기 때문에 그다지 효율적이지 않습니다.

요약

네 가지 형식의 JPEG, PNG, AVIF 및 WebP에 대한 모든 정보를 요약하고 이전 섹션에서 제시한 강점과 약점을 비교 및 ​​수량화하여 다음 표를 만들었습니다.

참고: 별의 수는 일반적인 의견을 기반으로 하며 특정 사용 사례에 따라 다를 수 있습니다.

다음은 이 표를 참조할 때 고려해야 할 몇 가지 핵심 사항입니다.

• 사진 및 비사진 이미지의 압축률은 이미지의 충실도(품질)에 따라 더 다를 수 있습니다. 여기에 전체 점수를 표시했습니다.
• 이미지의 목적에 따라 품질 및 크로마 서브샘플링 설정을 선택해야 합니다. 뉴스, 소셜 미디어 및 전자 상거래와 같은 웹상의 대부분의 시나리오에서 낮은 정확도에서 중간 수준의 이미지를 사용할 수 있습니다. 이미지 보관, 영화 또는 사진 웹사이트에는 고화질 이미지가 필요합니다. 다른 형식으로 변환하기 전에 고화질을 위해 압축으로 인한 실제 절감 효과를 테스트해야 합니다.
• 점진적 디코딩 지원 및 속도 부족은 AVIF 파일 인코딩/디코딩에 문제가 될 수 있습니다. 평균 크기의 이미지가 있는 웹 사이트의 경우 압축으로 인한 바이트 절약은 이미지가 빠르게 다운로드됨에 따라 속도와 점진적 디코딩의 부재를 보상할 수 있습니다.
• 이미지 형식에서 제공하는 압축을 비교할 때 동일한 DSSIM에서 파일 크기를 비교하십시오.
• 인코딩할 때 사용되는 품질 설정은 동일한 이미지 품질을 생성하기 위해 다른 형식에 대해 동일할 필요가 없습니다. 이 게시물에서 제안한 것처럼 품질 설정 60에서 인코딩된 JPEG는 품질 설정 50에서 AVIF 및 품질 설정 65에서 WebP와 유사할 수 있습니다.
• 형식을 비교할 때 LCP에 대한 실제 영향을 측정하기 위해서는 광범위한 연구가 여전히 필요합니다.
• 이 비교에서 JPEG XL 및 HEIC와 같은 다른 형식은 포함하지 않았습니다. JPEG XL은 아직 비교적 초기 단계에 있으며 Apple 장치만 HEIC를 지원합니다(Safari는 지원하지 않음). 로열티 및 라이센스 비용은 HEIC 지원을 더욱 복잡하게 만듭니다.

AVIF는 전반적으로 대부분의 상자를 확인하고 WebP는 JPEG 또는 PNG와 비교할 때 더 나은 지원을 제공하고 더 나은 압축을 제공합니다. 따라서 웹 사이트에서 이미지를 최적화할 때 의심할 여지 없이 WebP 지원을 고려해야 합니다. AVIF가 요구 사항을 충족하는지 평가하고 이를 점진적 개선으로 도입하면 다양한 브라우저와 플랫폼에서 형식이 채택됨에 따라 가치를 제공할 수 있습니다. 품질 비교 도구를 사용하고 AVIF를 사용하여 인코딩 속도를 개선하면 궁극적으로 더 쉬워질 것입니다.

이 기사에 많은 도움을 준 Leena Sohoni-Kasture와 검토를 위해 Patrick Meenan, Frank Galligan 및 Yoav Weiss에게 감사드립니다.

스매싱 노트

올해 초, 우리는 Addy와 함께 새로운 책을 출판하여 이미지 압축, 제공 및 유지 관리 방법을 최적화하여 성능을 향상시키는 데 필요한 모든 것을 설명했습니다. 전 세계적으로 책을 무료로 배송하고 있으며 , 지금 책을 구매하시면 애디의 손편지와 함께 개인적인 메시지를 담은 손글씨 엽서 도 증정합니다.

• 상세보기 ↓
• 무료 PDF 샘플 다운로드(12MB)
• 인쇄된 책에 대한 무료 전 세계 항공 우편 배송 .
• 당장 책을 받아라.