Loading...
Please Wait... Content Is Loading...

새로운 이미지 압축파일 AVIF와 WebP 란?

LIST




1. AVIF와 WebP란?

AVIF와 WebP는 모두 이미지 파일 형식입니다. 이들은 기존에 사용하고 있는  JPG등의 파일과 같은 손실 압축 포맷이지만 화질 저하를 최소화하면서 파일크기를 JPG보다 10~80%정도까지 압축하여 보다 이미지를 효율적으로  표현하는데 사용됩니다.

 

  1-1. AVIF(AV1 Image File Format)

 비디오 코덱인 AV1을 기반으로 개발된 이미지 파일 형식입니다. AV1은 고압축 비디오 코덱으로 알려져 있으며, 동영상 압축 기술을 이미지에 적용한 것입니다. AVIF 파일은 높은 압축률과 풍부한 색상 표현력을 제공합니다. 이는 웹 페이지 로딩 속도를 개선하고 데이터 사용량을 줄여주는 데 도움이 됩니다. 그러나 AVIF 형식은 일부 구형 브라우저나 이미지 편집 소프트웨어에서 지원되지 않을 수 있습니다.

 

  1-2. WebP

Google에서 개발한 이미지 파일 형식으로, 웹에서 사용하기 위해 고압축과 손실 압축 방식을 사용합니다. WebP 파일은 JPEG와 비교하여 동일한 화질을 유지하면서 파일 크기를 대폭 줄일 수 있습니다. 또한 WebP 형식은 투명도와 애니메이션을 지원하기도 합니다. WebP 파일은 대부분의 최신 브라우저에서 지원되며, 웹 페이지의 로딩 속도를 개선하는 데 도움이 됩니다.

 

이러한 형식들은 이미지를 압축하여 파일 크기를 줄이고 웹 페이지의 성능을 향상시키는 데 도움이 되는 효율적인 대안으로 사용될 수 있습니다. 선택할 파일 형식은 지원하는 브라우저와 사용 사례에 따라 달라질 수 있습니다.

 

2. 웹에서 이미지 로드 하는법

AVIF, WebP파일을 웹에서 로드 하려면 각 사용자가 이용하는 브라우저를 확인하고 이에 맞는 이미지를 지원하기 위해 자바스크립트를 이용하는 방법도 있지만 다행히 html picture 태그로 이러한 분기를 사용할수 있다.

 

2-1. 일반 이미지 로드법

    <img src="image.avif" alt="AVIF Image">     <img src="image.webp" alt="WebP Image">

 

2-2. 자바스크립트를 이용한 분기법

    일반적인 이미지 로드방식으로 위의 예제처럼 불러올수 있으나 아직 브라우저별로 지원하지 않는 브라우저가 있기때문에 해당브라우저가 지원하지 않을 경우를 대비해줘야 한다

 

      <script>

      function checkImageSupport() {

      var img = new Image();

      img.onload = function() {

        console.log('AVIF or WebP supported');

      };

      img.onerror = function() {

        console.log('AVIF or WebP not supported');

        replaceImage();

      };

      img.src = 'image.avif'; // AVIF 혹은 WebP 이미지 파일 경로

    }

    

    function replaceImage() {

      var img = document.getElementById('image');

      img.src = 'image.jpg'; // 대체로 사용할 JPEG 이미지 파일 경로

      img.alt = 'JPEG Image'; // 대체 이미지의 대체 텍스트

    }

  </script>

 

 

  <img id="image" src="image.avif" alt="AVIF or WebP Image">

 

 

2-3. picture태그 이용법

   자바스크립트를 이용한 방법도 가능하지만 사용하기 불편하고 복잡한 편이다. 다행히 html태그에서 picture태그를 사용하여 분기할수 있는 방법을 제공하고 있다.

 

<picture>

    <source srcset="image.avif" type="image/avif">

    <source srcset="image.webp" type="image/webp">

    <img src="image.jpg" alt="JPEG Image">

  </picture>

 

위의 예제에서, <picture> 요소 내에 <source> 요소를 사용하여 이미지 형식과 해당 형식의 파일 경로를 지정합니다. <source> 요소의 srcset 속성은 이미지 파일의 경로를 지정하고, type 속성은 해당 파일 형식을 나타냅니다. 브라우저는 지원하는 첫 번째 이미지 형식을 선택하여 로드하며, 그렇지 않은 경우 <img> 요소의 src 속성에 지정된 대체 이미지가 사용됩니다.

위의 예제에서는 AVIF 형식을 먼저 지정하고, 지원하지 않는 경우에는 WebP 형식을 다음으로 선택합니다. 마지막으로, JPEG 이미지 파일을 대체 이미지로 사용합니다.

<picture> 요소를 사용하면 다양한 이미지 형식을 지원할 수 있으며, 브라우저가 지원하는 첫 번째 형식을 사용하여 이미지를 표시할 수 있습니다.

 

 

3. picture태그란

<picture> 요소는 하나 이상의 <source> 요소와 하나의 <img> 요소를 포함하여 서로 다른 디스플레이/장치 시나리오에 대한 이미지의 대체 버전을 제공합니다.

브라우저는 각 자식 <source> 요소를 고려하고 그 중에서 가장 적합한 이미지를 선택합니다. 일치하는 이미지가 없거나 브라우저가 <picture> 요소를 지원하지 않는 경우, <img> 요소의 src 속성의 URL이 선택됩니다. 선택된 이미지는 <img> 요소가 차지하는 공간에 표시됩니다.

URL을 결정하기 위해 사용자 에이전트는 각 <source> 요소의 srcset, media, type 속성을 검사하여 현재 레이아웃과 디스플레이 장치의 기능과 가장 일치하는 호환 가능한 이미지를 선택합니다.

 

<img> 요소는 두 가지 목적을 제공합니다:

  1. 이미지와 해당 표현에 대한 크기 및 기타 속성을 설명합니다.
  2. 제공된 <source> 요소 중에서 유용한 이미지를 제공할 수 없는 경우를 대비합니다.
  3.  

<picture>의 일반적인 사용 사례:

  1. 아트 디렉션: 작은 디스플레이에서는 너무 많은 세부 정보를 가진 이미지의 간소화된 버전을 로드하거나 다양한 미디어 조건에 대해 이미지를 잘라내거나 수정합니다.
  2. 지원되지 않는 경우를 위해 대체 이미지 형식을 제공합니다. 예를 들어, AVIF나 WEBP와 같은 최신 형식은 많은 이점을 가지지만, 브라우저에서 지원하지 않을 수 있습니다. 지원되는 이미지 형식 목록은 Image file type and format guide에서 확인할 수 있습니다.
  3. 대상 뷰어의 디스플레이에 가장 적합한 이미지를 로드하여 대역폭을 절약하고 페이지 로드 시간을 단축합니다.
  4. 고밀도(Retina) 디스플레이를 위해 높은 밀도 버전의 이미지를 제공하는 경우, <img> 요소의 srcset을 사용하세요. 이렇게 하면 브라우저가 데이터 절약 모드에서 낮은 밀도 버전을 선택할 수 있으며, 명시적인 미디어 조건을 작성할 필요가 없습니다.

 



#AVIF #WebP #이미지압축 #웹페이지 #홈페이지태그 #picture태그
LIST