GIF와 MP4, 웹에는 무엇을 써야 할까
움직이는 이미지를 웹에 넣을 때 가장 먼저 떠오르는 것은 GIF입니다. 하지만 같은 장면이라면 GIF는 MP4보다 몇 배에서 열 배 이상 큽니다. 둘의 차이와 언제 무엇을 써야 하는지 정리합니다.
왜 GIF가 더 클까
GIF는 1987년에 만들어진 이미지 형식입니다. 한 장에 최대 256색만 쓸 수 있고, 각 장면을 거의 독립된 그림처럼 저장합니다. 반면 MP4(H.264)는 앞뒤 장면에서 바뀐 부분만 저장하는 영상 압축을 씁니다. 화면 대부분이 그대로인 짧은 움짤에서 이 차이가 매우 크게 벌어집니다.
| 항목 | GIF | MP4 (H.264) |
|---|---|---|
| 용량 | 큼 | GIF의 1/5~1/10 수준인 경우가 많음 |
| 색 | 장면당 256색 | 수백만 색 |
| 소리 | 없음 | 넣을 수 있음 |
| 어디서나 보이나 | 이메일·메신저·게시판 대부분 | 웹페이지는 대부분, 이메일은 거의 안 됨 |
| 넣는 방법 | <img> | <video> |
웹페이지에는 MP4를 GIF처럼
내 홈페이지나 블로그처럼 HTML을 직접 쓸 수 있는 곳이라면, 소리를 뺀 MP4를 GIF처럼 자동 반복 재생하는 것이 가장 가볍습니다. 구글의 페이지 속도 검사(Lighthouse)도 "움직이는 콘텐츠에는 동영상 형식을 사용하라"고 권합니다.
<video autoplay muted loop playsinline width="480" height="270"> <source src="/videos/clip-web.mp4" type="video/mp4"> </video>
영상 압축에서 "소리 빼기"를 켜고 변환하면, 이렇게 바로 쓸 수 있는 코드도 함께 드립니다.
그래도 GIF가 필요한 곳
- 이메일 뉴스레터 — 대부분의 메일 앱이 영상 재생을 지원하지 않습니다.
- 메신저·커뮤니티 게시판 — 영상 첨부가 안 되거나, 올려도 자동재생되지 않는 곳이 많습니다.
- 이미지만 받는 곳 — 프로필 이미지, 일부 쇼핑몰 상세페이지 편집기처럼 이미지 파일만 올릴 수 있는 곳.
GIF를 가볍게 만드는 요령
- 짧게 — 3~5초면 충분합니다. 길이가 곧 용량입니다.
- 작게 — 게시판용은 가로 480px, 메신저용은 320px이면 됩니다.
- 프레임 줄이기 — 15fps면 대부분 자연스럽고, 10fps로 줄이면 더 가벼워집니다.
- 색상표 최적화 — 영상에서 쓰인 색으로 색상표를 새로 만들면 같은 256색이라도 훨씬 깨끗합니다.
GIF 만들기 도구는 이 네 가지를 모두 적용합니다. 길이는 최대 10초, 크기는 320·480·640px 중에서 고를 수 있습니다.