웹사이트에 넣을 영상, 용량은 얼마가 적당할까
홈페이지나 쇼핑몰에 영상을 넣으면 첫 화면이 눈에 띄게 좋아지지만, 잘못 넣으면 페이지가 느려지고 휴대폰 데이터를 많이 씁니다. 스마트폰으로 찍은 10초 영상은 보통 20~40MB인데, 웹에 필요한 크기는 그 10분의 1 정도면 충분한 경우가 많습니다. 이 글에서는 웹용 영상의 적당한 해상도와 용량, 줄이는 방법을 정리합니다.
용량은 "비트레이트 × 길이"로 정해집니다
영상 용량은 대략 다음 식으로 계산할 수 있습니다.
용량(MB) ≈ 비트레이트(Mbps) × 길이(초) ÷ 8
예를 들어 2Mbps로 15초짜리 영상을 만들면 약 3.75MB입니다. 같은 영상을 휴대폰 원본처럼 16Mbps로 두면 30MB가 됩니다. 결국 용량을 줄이려면 비트레이트를 낮추거나, 길이를 줄이거나 둘 중 하나입니다. 해상도와 프레임 수를 줄이면 같은 화질을 더 낮은 비트레이트로 낼 수 있습니다.
쓰임새별 권장 크기
| 쓰임새 | 해상도 | 길이 | 목표 용량 |
|---|---|---|---|
| 첫 화면 배경 영상 | 1280×720 | 10~20초 반복 | 2~4MB |
| 상품 상세 설명 영상 | 1280×720 ~ 1920×1080 | 15~40초 | 3~8MB |
| 작은 카드·썸네일 영상 | 640~960px | 3~8초 | 0.3~1MB |
| 1분 이상 긴 영상 | - | - | 유튜브 등 영상 서비스에 올리고 퍼가기 |
화면에 보이는 크기보다 큰 해상도는 용량만 늘립니다. 배경 영상은 흐리게 처리하거나 글자를 얹는 경우가 많아 720p로도 충분하고, 휴대폰 화면에서는 차이가 거의 보이지 않습니다.
용량을 줄이는 다섯 가지 방법
- 해상도 낮추기 — 4K나 1080p 원본을 720p로 내리면 픽셀 수가 1/4~1/9로 줄어듭니다.
- 프레임 수 30fps로 — 60fps로 찍은 영상은 웹에서 30fps로 충분합니다. 프레임이 절반이니 용량도 크게 줄어듭니다.
- 소리 빼기 — 배경 영상은 어차피 소리 없이 재생해야 자동재생이 됩니다. 소리 트랙을 빼면 그만큼 가벼워집니다.
- 길이 줄이기 — 반복 재생할 배경 영상은 10~15초면 충분합니다. 구간 자르기로 필요한 부분만 남기세요.
- 웹 표준 형식(H.264 MP4)으로 다시 저장 — 아이폰 HEVC(MOV) 영상은 일부 브라우저에서 재생되지 않습니다. H.264 MP4는 거의 모든 브라우저에서 재생됩니다.
영상 압축 도구는 위의 1·2·3·5번을 한 번에 처리합니다.
로딩을 빠르게 하는 설정
- faststart — MP4 파일의 재생 정보(moov)를 파일 앞에 두는 설정입니다. 이게 없으면 브라우저가 파일 끝까지 받아야 재생을 시작할 수 있습니다. 이 사이트에서 만든 MP4에는 항상 적용됩니다.
- 포스터 이미지 —
poster속성에 첫 화면 이미지를 넣으면 영상이 준비되는 동안 빈 화면 대신 이미지가 보입니다. - preload — 화면 아래쪽에 있는 영상은
preload="none"이나preload="metadata"로 두어, 사용자가 스크롤하기 전에는 데이터를 받지 않게 합니다.
정리
웹용 영상은 "보이는 크기에 맞춘 해상도, 30fps, 필요한 길이만, H.264 MP4"가 기본입니다. 대부분의 짧은 영상은 이 원칙만 지켜도 원본보다 80~90% 작아집니다.