GIF 대신 MP4를 muted·loop로

블로그에 데모 영상을 넣을 때 습관적으로 GIF를 만들었다. 결과물은 12MB짜리 뿌연 이미지. 같은 소스를 MP4로 인코딩하니 800KB, 화질은 원본 그대로였다. 왜 아직도 GIF를 쓰고 있었을까.

GIF가 지는 이유

GIF는 256색 팔레트에 무손실 프레임을 통째로 쌓는 1989년 포맷이다. 반면 H.264는 프레임 간 차이만 저장한다. 화면 녹화처럼 대부분의 픽셀이 안 바뀌는 콘텐츠에서 압축률 차이는 10~20배까지 벌어진다.

<video autoplay muted loop playsinline>
  <source src="demo.mp4" type="video/mp4">
</video>

핵심은 muted다. 모바일 브라우저는 소리 있는 영상의 자동재생을 막지만, 무음이면 GIF와 완전히 같은 UX로 재생된다. playsinline은 iOS에서 전체화면으로 튀는 걸 막는다.

정리

인코딩은 ffmpeg 한 줄이면 끝났다. 블로그는 가벼워졌고 데모는 선명해졌고, 읽는 경험은 아무것도 달라지지 않았다. 오래된 습관은 가끔 감사(audit)가 필요하다.

lore. 무음 반복 콘텐츠는 무조건 MP4(H.264, muted·loop·playsinline). GIF는 이제 밈 전용.