어떻게 2025년에 AV1 코덱을 사용해서 웹 비디오 용량을 크게 줄일 수 있을까

ressac0 points약 10시간 전원본 링크 (evilmartians.com)

번역으로 이동

1. 왜 AV1을 쓰는가?

  • 기존 H.264, HEVC(=H.265) 대비 최대 30~50% 더 용량을 줄이면서 비슷한 화질을 유지.
  • 이미 Chrome, Safari(최신 iOS/macOS), Firefox 등 주요 브라우저에서 지원 시작.
  • 단점: 인코딩 시간이 길고, 일부 구형 기기에서는 AV1을 지원하지 않으므로 H.264(또는 추가로 HEVC) 파일도 함께 제공해야 함.

2. 준비: FFmpeg 설치

  1. macOS:
    brew install ffmpeg
    
  2. 리눅스: 배포판 패키지로 FFmpeg 설치
  3. 윈도우: 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">
  <!-- 최신 기기용: AV1 -->
  <source
    src="video.av1.mp4"
    type="video/mp4; codecs=av01.0.05M.08,opus"
  >
  <!-- (선택) HEVC 지원 기기용 -->
  <source
    src="video.hevc.mp4"
    type="video/mp4; codecs=hvc1"
  >
  <!-- 구형 기기용: H.264 -->
  <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>
    

핵심 요점 정리

  1. FFmpeg를 이용해 AV1(최신용), H.264(호환용) 최소 2가지 버전 제작.
  2. (선택) HEVC를 추가하면 구형 Apple 기기에서 더 작은 용량 사용 가능.
  3. HTML <video><source>를 코덱별로 나열 → 브라우저가 자동 선택.
  4. GIF 대신 AV1/H.264 MP4 사용 시 용량을 최대 수십 배 줄이고 성능도 개선됨.
  5. -crf(H.264), -qp(AV1) 값을 조절해 품질/용량 균형점을 찾기.
  6. 인코딩이 오래 걸릴 수 있으니 짧은 영상 먼저 시도 후 최적화.

댓글 (0)

댓글을 작성하려면 로그인이 필요합니다.

로그인하기