gif 대신 mp4를 사용하자

아마존 라이트세일을 사용할 땐 gif의 로딩속도가 생각보다 빨라서 큰 걱정이 없었는데 깃허브로 옮기고 나선 이미지 로딩속다가 정말 심란하게 느렸다. 깃허브 블로그를 운영하는 사람들은 대부분 고용량의 이미지를 올리지 않는 개발 블로그로 사용하니 큰 부담은 없겠지만 나는 티스토리에서 넘어왔기에 고용량의 이미지가 매우 많다.

png, jpg의 경우엔 이미지 압축기를 이용해서 용량을 최대한 줄였지만 gif가 정말 큰 문제였다… 대부분 10MB를 넘나드는 큰 용량을 가졌기에 용량도 많이 잡아먹고 로딩도 너무 지연되었다.

그러다 gif를 트위터를 통해서 호스팅을 받으려는 악한 속셈을 가져봤는데 트위터에 gif를 올렸더니 영상으로 바뀌는 것이 아닌가? 그것도 매우 자연스럽게 바뀌고 재생되었다. 전에 어떤 글에서 gif대신 mp4를 사용해야 한다는 글을 본 적이 있어서 시도해 보려고 했지만 실패했는데 트위터를 보니 해낼 수 있을 것 같았다

먼저 Convert to MP4라는 웹 사이트에서 gif를 mp4를 무료로 변경해준다. 용량을 비교해보니 정말 엄청난 압축률을 보여준다. 그리고 영상을 gif 처럼 출력해 주기 위해서는 다음과 같이 태그를 작성해 주면 된다.

1
2
3
<video autoplay muted loop>
    <source src="iu.mp4" type="video/mp4" />
</video>

6.3mb짜리 gif가 150kb로 압축되어 재생되고 있는 영상이다.

WRITTEN BY

배진오

웹 개발자 지망생
im@baejino.com

comments powered by Disqus