콘텐츠로 이동

WebM과 MP4

브라우저 재생, 코덱 지원, 파일 크기, 편집자용 파일, 그리고 폴백 패턴을 통한 웹사이트 비디오 배포를 위해 WebM과 MP4를 비교합니다.

제공 Petr Samokhin

MP4는 직접 공유, 편집, 미지의 재생 기기에서 사용하기에 안전한 단일 파일 선택지입니다. WebMVP9 또는 AV1 비디오와 Opus 오디오를 갖춘 브라우저 배포용 강력한 오픈 포맷입니다. 웹사이트에서는 두 형식을 모두 제공하면 현대적인 압축과 안정적인 폴백을 결합할 수 있습니다.

WebM과 MP4는 컨테이너입니다

컨테이너는 비디오, 오디오, 자막, 타이밍 정보, 메타데이터를 담습니다. 코덱은 그 안의 스트림을 압축합니다. .webm.mp4만 비교하면 품질, 크기, 재생에 가장 중요한 선택지들을 놓칠 수 있습니다.

컨테이너일반적인 비디오 코덱일반적인 오디오 코덱주요 용도
WebMVP8, VP9, AV1Vorbis, Opus오픈 브라우저 미디어 및 웹 배포
MP4H.264, H.265, AV1AAC, 지원되는 워크플로우의 Opus일반적인 공유, 기기, 편집기, 웹 폴백

하나의 MP4 파일이 H.264를 포함하고 다른 MP4 파일이 HEVC를 포함하면 두 파일은 매우 다르게 동작할 수 있습니다. 하나의 WebM 파일이 VP9를 사용하고 다른 WebM 파일이 AV1을 사용하면 두 파일은 다를 수 있습니다. 기술적인 결정을 내릴 때는 항상 코덱 조합을 명시하세요.

호환성은 코덱 조합에 따라 달라집니다

파일을 이메일로 보내거나, 알 수 없는 서비스에 업로드하거나, 프레젠테이션 소프트웨어에 삽입하거나, 다양한 하드웨어에서 열어야 할 때 H.264 비디오와 AAC 오디오를 사용한 MP4는 가장 신뢰할 수 있는 조합입니다. 이 조합의 강점은 보장된 효율성보다 도달 범위입니다.

VP9 또는 AV1 비디오와 Opus 오디오를 사용한 WebM은 웹 미디어를 위해 설계되었으며 현대적인 브라우저 워크플로우에서 잘 작동합니다. 오래된 기기나 일부 편집기에서는 여전히 어색할 수 있습니다. 특히 앱이 WebM 컨테이너는 지원하지만 그 안에 있는 특정 코덱 프로필은 지원하지 않을 때 그렇습니다.

MDN은 미디어 컨테이너 가이드 에서 오픈 웹 포맷에는 WebM을, 범용 호환성에는 MP4를 고려할 것을 권장합니다. 확장자 alone에 의존하기보다 청중에게 중요한 가장 오래된 브라우저, 기기, 편집기, 업로드 서비스를 확인하세요.

파일 크기와 품질은 확장자의 속성이 아닙니다

WebM이 항상 MP4보다 작지는 않으며, MP4가 본질적으로 더 높은 품질을 갖지도 않습니다. 동일한 길이에서 총 비트레이트가 파일 크기를 주로 결정합니다. 코덱 효율성, 인코더 설정, 소스 복잡도, 해상도, 프레임 레이트가 그 비트레이트가 보존할 수 있는 품질을 결정합니다.

신중하게 인코딩된 VP9 WebM은 제한된 비트레이트에서 무심코 인코딩된 H.264 MP4보다 더 나은 성능을 낼 수 있습니다. 그 반대도 흔합니다. 출처 없는 백분율 주장에 따라 형식을 선택하지 마세요.

공정한 비교를 사용하세요:

  1. 동일한 소스 마스터에서 시작합니다.
  2. 길이, 해상도, 프레임 레이트, 오디오 처리를 일관되게 유지합니다.
  3. 다른 압축된 파일이 아닌 소스에서 각 후보를 인코딩합니다.
  4. 일반 재생 및 전체 크기에서 동일한 어려운 프레임을 비교합니다.
  5. 실제 목적지에서 재생을 테스트합니다.

목적지에 따라 형식을 선택하세요

목적지더 나은 기본값이유
이메일, 채팅 또는 클라이언트 납품H.264 MP4넓은 재생 지원
소셜 또는 서드파티 업로드서비스의 문서화된 형식, 주로 MP4미지원 조합 방지
단일 소스만 있는 웹사이트H.264 MP4보수적인 호환성
다중 소스가 있는 웹사이트WebMMP4 폴백폴백이 있는 현대적인 옵션
편집기 공유편집기의 문서화된 코덱 및 컨테이너확장자보다 가져오기 및 스크러빙이 더 중요함

공유하기 편리하다는 이유로 어느 형식도 원본을 대체해서는 안 됩니다. 카메라 파일이나 고품질 편집 내보내기를 보관한 후, 각 목적지마다 작은 사본을 생성하세요.

웹사이트에서 MP4 폴백과 함께 WebM을 제공하세요

HTML은 브라우저가 순서대로 여러 소스를 시도하도록 합니다:

<video controls width="1280" height="720" preload="metadata">
 <source src="demo.webm" type="video/webm" />
 <source src="demo.mp4" type="video/mp4" />
 Download the <a href="demo.mp4">MP4 video</a>.
</video>

MDN은 이 다중 컨테이너 폴백 패턴 을 문서화했습니다. 레이아웃 공간을 확보하기 위해 실제 width와 height 속성을 설정하고, 비디오가 장식용이 아닌 경우 controls를 포함하며, 첫 번째 소스에 대한 지원을 일시적으로 제거하여 폴백을 테스트하세요.

프로덕션 사이트의 경우 자막, 포스터 이미지, reduced-motion 동작, 그리고 비디오가 화면 상단(fold) 위에 필요한지 여부도 고려하세요.

피할 수 있는 품질 손실 없이 변환하세요

컨테이너만 변경하는 것을 리뮥싱이라고 합니다. 기존 비디오 및 오디오 코덱이 목적지 컨테이너에서 유효할 경우 빠르고 무손실일 수 있습니다. 인코딩된 스트림을 더 작게 만들지는 않습니다.

목적지가 소스 코덱을 지원하지 않거나, 더 낮은 비트레이트, 더 작은 해상도, 다른 오디오 형식이 필요한 경우 재인코딩이 필요합니다. 원본 마스터에서 한 번만 재인코딩하세요. WebMMP4로 변환한 후 다시 WebM으로 변환하면 두 번의 손실 인코딩이 적용되어 버려진 디테일을 복원할 수 없습니다.

변환 도구를 제외한 다른 플레이어에서 변환된 파일을 검증하세요. 길이, 오디오 동기화, 존재하는 경우 자막, 그리고 끝부분 근처의 시킹을 확인하세요.

실용적인 변환 경로는 Mac에서 비디오를 MP4로 변환 또는 Windows에서 를 참조하세요. 코덱 배경 지식: VP9와 AV1이란 .

간단한 MP4 공유로 충분할 때

수령인이 알 수 없거나, 업로드 양식에 MP4가 나열되어 있거나, 이메일, 채팅, 슬라이드에서 열 수 있는 단일 파일이 필요한 경우 단일 H.264 MP4로 작동할 수 있습니다.

사이트를 직접 제어하고 폴백과 함께 현대적인 압축을 원한다면 WebMMP4 쌍을 준비하세요. GetCompress WebMMP4를 포함한 일반적인 비디오 형식을 로컬에서 변환 및 압축하여 이러한 배포 사본을 만들 수 있습니다. 수령인이 알 수 없는 경우 널리 호환되는 MP4 프리셋을 사용하세요. 사이트의 HTML, 자막, 캐싱, 성능 예산은 여전히 별도의 구현과 테스트가 필요합니다. 정확한 목표 파일 크기는 비디오 워크플로우에만 적용됩니다.