웹사이트용 동영상 압축

WebM을 먼저, MP4는 대체용으로

페이지에 넣은 동영상은 페이지 용량의 일부이므로 파일이 작을수록 빨리 로드됩니다. WebM의 VP9은 같은 화질에서 H.264보다 파일이 작습니다. Can I use에 따르면 Chrome, Edge, Firefox, macOS의 Safari 16 이상, iOS 17.4 이상의 Safari가 WebM을 완전히 지원합니다(caniuse, 2026년 9월 확인).

이전 Safari를 위해서는 MP4를 추가하세요. 같은 원본을 형식 MP4로 한 번 더 실행하고, 두 파일을 `<video>` 요소에 WebM부터 나열하세요. 브라우저는 `<source>` 요소를 차례로 살펴 재생할 수 있는 첫 번째 파일을 사용하며, `type` 속성이 있으면 지원하지 않는 파일은 내려받지 않고 건너뜁니다(MDN).

가로 영상에서 720p는 1280 × 720입니다. 페이지의 플레이어가 1280픽셀보다 넓다면 화면 크기에서 1080p를 고르세요.

배경 반복 영상과 오디오

Chrome은 음소거된 자동 재생을 항상 허용합니다(Chrome for Developers). iOS에서 `<video autoplay>`는 음소거되어 있거나 오디오 트랙이 없으면 탭 없이 재생되며, iPhone에서 인라인으로 재생하려면 `playsinline`이 필요합니다(WebKit). 배경 반복 영상의 소리는 들리지 않으므로, 고급에서 오디오를 오디오 제거로 설정하면 파일에 오디오 트랙이 아예 들어가지 않습니다.

사람들이 소리와 함께 재생하는 동영상이라면 오디오를 유지하세요. WebM에는 Opus나 Vorbis 오디오만 담을 수 있으므로, 그대로 유지는 원본이 이미 Opus나 Vorbis일 때만 트랙을 복사하고 그 밖의 오디오는 Opus로 변환합니다. 2채널을 넘는 오디오는 스테레오로 다운믹스됩니다.

페이지에 넣을 때

`preload="metadata"`나 `preload="none"`을 쓰면 브라우저가 처음부터 파일 전체를 가져오지 않으며, `poster` 이미지로 동영상이 시작되기 전까지 보여 줄 그림을 정할 수 있습니다(MDN). 배경 영상에는 `muted playsinline autoplay loop`가 필요합니다.

동영상은 내 컴퓨터에서 압축되고 업로드되지 않으므로, 공개 전 제품 영상도 게시할 때까지 외부에 나가지 않습니다.

자주 묻는 질문