1. 왜 AV1을 쓰는가?
- 기존 H.264, HEVC(=H.265) 대비 최대 30~50% 더 용량을 줄이면서 비슷한 화질을 유지.
- 이미 Chrome, Safari(최신 iOS/macOS), Firefox 등 주요 브라우저에서 지원 시작.
- 단점: 인코딩 시간이 길고, 일부 구형 기기에서는 AV1을 지원하지 않으므로 H.264(또는 추가로 HEVC) 파일도 함께 제공해야 함.
2. 준비: FFmpeg 설치
- macOS:
brew install ffmpeg
- 리눅스: 배포판 패키지로 FFmpeg 설치
- 윈도우: FFmpeg 공식 사이트에서 설치
3. H.264와 AV1 두 가지 파일 만들기
3.1 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
SOURCE.mov
대신 원하는 소스 영상을 입력
-crf 24
를 조정(24 → 26 → 28
)하면 화질↓, 용량↓
3.2 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
-qp 30
(값↓ = 화질↑ = 용량↑)
- 소스가 없을 경우,
video.h264.mp4
→ AV1 변환도 가능(화질 조금 손해)
(선택) 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
- 구형 iPhone이나 Mac이 HEVC만 지원하는 경우 조금 더 용량을 줄이고 싶을 때
4. HTML에서 코덱별로 분기 처리하기
<video controls width="600" height="400">
<source
src="video.av1.mp4"
type="video/mp4; codecs=av01.0.05M.08,opus"
>
<source
src="video.hevc.mp4"
type="video/mp4; codecs=hvc1"
>
<source
src="video.h264.mp4"
type="video/mp4; codecs=avc1.4D401E,mp4a.40.2"
>
</video>
- 브라우저는 위에서부터 지원 가능한 형식을 찾아 재생
type
속성에 컨테이너(MP4), 영상 코덱(av1/hvc1/avc1), 오디오 코덱(opus/mp4a.40.2) 명시
5. 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
- AV1 변환
ffmpeg -i IMAGE.gif \
-map_metadata -1 \
-an \
-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" \
animation.av1.mp4
- HTML에 넣어서 자동 반복처럼 쓰기:
<video autoplay loop muted playsinline width="300" height="200">
<source src="animation.av1.mp4" type="video/mp4; codecs=av01.0.05M.08">
<source src="animation.h264.mp4" type="video/mp4">
</video>
핵심 요점 정리
- FFmpeg를 이용해 AV1(최신용), H.264(호환용) 최소 2가지 버전 제작.
- (선택) HEVC를 추가하면 구형 Apple 기기에서 더 작은 용량 사용 가능.
- HTML
<video>
에 <source>
를 코덱별로 나열 → 브라우저가 자동 선택.
- GIF 대신 AV1/H.264 MP4 사용 시 용량을 최대 수십 배 줄이고 성능도 개선됨.
-crf
(H.264), -qp
(AV1) 값을 조절해 품질/용량 균형점을 찾기.
- 인코딩이 오래 걸릴 수 있으니 짧은 영상 먼저 시도 후 최적화.
댓글을 작성하려면 로그인이 필요합니다.
로그인하기