새로운 질서 위키

WebP와 AVIF

WebP와 AVIF(AV1 Image File Format)는 웹에 이미지를 배포할 때 사용하는 파일 형식이다. 둘 다 손실, 무손실 압축과 투명도를 지원한다. JPEG와 PNG에서 옮길 때는 확장자 이름보다 실제 이미지의 품질과 용량, 표시 환경을 비교한다. (MDN: 이미지 파일 형식)

  • 사진과 경계: 같은 사진도 압축 설정에 따라 작은 글자와 강한 색 경계가 다르게 남는다. 서로 다른 변환기의 품질 값 ‘80’이 같은 결과를 뜻하지는 않는다.
  • 투명한 이미지: 배경을 뺀 그림에도 사용할 수 있다. 다만 이미 불투명하게 저장된 사진을 변환한다고 배경이 저절로 투명해지지는 않는다.
  • 비교 조건: 이미지 형식별 용량 비교에서는 픽셀 크기를 같게 놓고 결과를 본다. 큰 원본 하나를 작은 파일 형식으로 바꾸는 일과 작품 이미지의 여러 크기를 준비하는 일은 별개다.

지원하는 형식으로 고르게 하기

같은 이미지의 AVIF, WebP, JPEG 사본을 준비했다면 다음처럼 제공할 수 있다. 파일 이름은 예시이며 세 파일을 실제로 만들어 올려야 한다.

<picture>
  <source srcset="book.avif" type="image/avif">
  <source srcset="book.webp" type="image/webp">
  <img src="book.jpg" alt="노란 표지의 책을 펼친 모습"
       width="1200" height="800">
</picture>
  • 웹 브라우저는 지원하는 source를 순서대로 살피고, 맞는 것이 없으면 img의 파일을 사용한다. 예시의 너비와 높이는 실제 이미지 치수로 바꾼다. (MDN: picture 요소)
  • 배포용 변환본과 작업용 원본을 구분해 보관한다. 웹에서 표시되는 형식이라도 인쇄소나 편집 프로그램에서 받아들이는지는 별도로 확인한다.

#이미지 #웹 #HTML #기초

검색