# 웹 비디오 파일을 AV1 코덱으로 더 작게 만드는 방법 (2025)

> Clean Markdown view of GeekNews topic #19741. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=19741](https://news.hada.io/topic?id=19741)
- GeekNews Markdown: [https://news.hada.io/topic/19741.md](https://news.hada.io/topic/19741.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2025-03-14T09:47:01+09:00
- Updated: 2025-03-14T09:47:01+09:00
- Original source: [evilmartians.com](https://evilmartians.com/chronicles/better-web-video-with-av1-codec)
- Points: 28
- Comments: 1

## Summary

AV1 코덱은 H.264 및 VP9보다 최대 30~50% 더 효율적으로 비디오 파일 크기를 줄이며, 낮은 비트레이트에서도 높은 화질을 유지할 수 있습니다. 주요 브라우저와 YouTube, Netflix 등에서 AV1을 지원하지만, 인코딩 속도가 느리고 최신 기기에서만 호환되므로 AV1과 H.264 버전을 병행 준비하는 것이 필요합니다. AV1 인코딩 시 MP4 컨테이너와 Opus 오디오 코덱을 사용하는 것이 효율적이며, 구형 기기와의 호환성을 위해 H.264 및 HEVC 버전도 함께 제공하는 것이 권장됩니다.

## Topic Body

- 최신 AV1 비디오 포맷을 사용하면 웹에서 비디오 파일 크기를 **20~40배 더 작게** 줄일 수 있음  
- YouTube와 Netflix에서 AV1을 차세대 비디오 코덱으로 채택했으며, Chrome, Safari, Firefox 등 주요 브라우저에서 지원됨  
- 본 가이드는 AV1 코덱 인코딩 전략 및 최적화 방법을 설명  
  
### 코덱과 컨테이너 개요  
- **정적 이미지 포맷**: WebP, JPEG, PNG는 대부분의 브라우저에서 지원됨. 최신 브라우저에서는 AVIF를 사용할 수 있음  
- **비디오 파일 구조**:  
    - **비디오 코덱**: H.264, HEVC, VP9, AV1 등으로 비디오 압축 전략 결정  
    - **오디오 코덱**: MP3, Opus, AAC 등 오디오 압축 전략 결정  
    - **컨테이너**: MP4, MOV, WebM 등이 있으며, 비디오 및 오디오 스트림, 자막, 메타데이터 저장  
  
### AV1 코덱 소개  
- AV1 코덱은 2018년 3월 첫 출시  
- HEVC/VP9 및 H.264/VP8 대비 파일 크기를 최대 **30~50% 더 작게** 생성 가능  
- **장점**:  
    - 낮은 비트레이트에서 높은 화질 유지 가능  
    - 압축 손실이 거의 없음  
- **단점**:  
    - 인코딩 속도가 느림  
    - 최신 기기에서만 지원됨 (iPhone 15+, MacBook M3 등)  
    - 호환성을 위해 AV1과 H.264 버전 모두 준비 필요  
  
### 지금 현재 AV1을 사용하는 방법  
- 컨테이너 및 코덱 선택  
  - **컨테이너:** MP4가 가장 인기가 많고 권장됨  
  - **오디오 코덱:** Opus 사용 권장 (효율적이고 무료)  
- 최대 호환성을 위한 파일 준비  
  - **데스크톱 및 최신 모바일 브라우저용** (Chrome, Safari, Firefox, Edge 등)  
    - MP4 컨테이너 + AV1 비디오 코덱 + Opus 오디오 코덱  
    - 사용자 커버리지: 약 74% (2023년 9월 기준)  
  - **구형 Safari 및 macOS용**  
    - MP4 컨테이너 + H.264 비디오 코덱 + AAC 오디오 코덱  
    - 사용자 커버리지: 약 19%  
  - **구형 iPhone 및 Mac 지원 강화용** (선택 사항)  
    - MP4 컨테이너 + HEVC 비디오 코덱 + AAC 오디오 코덱  
  
### AV1 비디오 파일 생성 방법  
#### 1. FFmpeg 설치  
- Mac: `brew install ffmpeg`  
- Linux: 배포판에서 FFmpeg 설치  
- Windows: [설치 가이드](https://www.wdiaz.org/how-to-install-ffmpeg-on-windows/) 참고  
  
#### 2. H.264 파일 생성 (구형 기기 지원용)  
- `ffmpeg -i SOURCE.mov -map_metadata -1 -c:a aac -c:v libx264 -crf 24 -preset veryslow -profile:v main -pix_fmt yuv420p -movflags +faststart -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" video.h264.mp4`  
  
#### 3. AV1 파일 생성 (최신 기기 지원용)  
- `ffmpeg -i SOURCE.mov -map_metadata -1 -c:a libopus -c:v libsvtav1 -qp 30 -tile-columns 2 -tile-rows 2 -pix_fmt yuv420p -movflags +faststart -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" video.av1.mp4`  
- crf 또는 qp 값 조정으로 화질과 파일 크기 간 균형 조정 가능  
  
#### 4. HEVC 파일 생성 (필요 시)  
- 오래된 iPhone 및 Mac 지원을 위해 HEVC 인코딩   
- `ffmpeg -i SOURCE.mov -map_metadata -1 -c:a aac -c:v libx265 -crf 24 -preset veryslow -pix_fmt yuv420p -movflags +faststart -tag:v hvc1 -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" video.hevc.mp4`  
  
### FFmpeg 주요 옵션 설명  
- **-i SOURCE.mov**: 원본 파일 입력 설정  
- **-map_metadata -1**: 불필요한 메타데이터 제거  
- **-c:a libopus**: 오디오 코덱 선택 (Opus)  
- **-c:v libsvtav1**: 비디오 코덱 선택 (AV1)  
- **-crf 34**, **-qp 30**: 화질 및 파일 크기 조정 (낮을수록 화질이 좋고 크기가 커짐)  
- **-preset veryslow**: 고품질 파일 생성을 위한 인코딩 속도 설정  
- **-pix_fmt yuv420p**: 색상 데이터를 줄여 파일 크기 감소  
- **-movflags +faststart**: 스트리밍 시작 시간 단축  
- **-tile-columns 2 -tile-rows 2**: 인코딩 속도 향상  
  
### 브라우저 호환성 설정  
- 최신 브라우저에서 AV1 사용, 구형 브라우저에서는 H.264로 대체  
  ```html  
  <video controls width="600" height="400">  
    <source src="video.av1.mp4" type="video/mp4; codecs=av01.0.05M.08,opus">  
    <source src="video.h264.mp4" type="video/mp4; codecs=avc1.4D401E,mp4a.40.2">  
  </video>  
  ```  
- 구형 iPhone 및 Mac 지원 시 HEVC 파일 추가 가능  
  ```html  
  <source src="video.hevc.mp4" type="video/mp4; codecs=hvc1">  
  ```  
  
### GIF를 AV1 또는 H.264로 변환하기  
- GIF는 H.264 및 AV1 대비 **20~40배 더 크기 크고** CPU랑 전원도 많이 먹음 → 변환 권장  
- GIF → H.264 변환  
  - `ffmpeg -i IMAGE.gif -map_metadata -1 -an -c:v libx264 -crf 24 -preset veryslow -profile:v main -pix_fmt yuv420p -movflags +faststart -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" animation.h264.mp4`  
- GIF → AV1 변환  
  - `ffmpeg -i IMAGE.gif -map_metadata -1 -an -c:a opus -c:v libsvtav1 -qp 30 -tile-columns 2 -tile-rows 2 -pix_fmt yuv420p -movflags +faststart -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" animation.av1.mp4`  
- HTML에서 GIF 대체 예제  
  ```html  
  <video autoplay loop muted playsinline width="600" height="400">  
    <source src="animation.av1.mp4" type="video/mp4; codecs=av01.0.05M.08">  
    <source src="animation.h264.mp4" type="video/mp4">  
  </video>  
  ```

## Comments



### Comment 35879

- Author: laeyoung
- Created: 2025-03-14T12:30:12+09:00
- Points: 1

Landing page에서 비디오를 쓰는 경우가 많은데, 한번 시도해봐도 좋겠네요. 잘 되는지, 예외 케이스가 생겨서 못 쓰는지.