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

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

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

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

```html
<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 요소](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/picture))
- 배포용 변환본과 작업용 원본을 구분해 보관한다. 웹에서 표시되는 형식이라도 인쇄소나 편집 프로그램에서 받아들이는지는 별도로 확인한다.

#이미지 #웹 #HTML #기초