움직이는 이미지 mp4로 표시하기

GIF는 MP4에 비해 모든면에서 안좋다.

• 화질
• 용량
• 최적화
• CPU사용량

 

때문에 GIF이미지를 mp4로 변경하여 사용하는 사이트가 요즘 늘어나는 추세다.

 

FFMPEG와 같은 미디어인코더를 통해 서버에서 GIF를 MP4로 변환시키거나.

사용자 브라우저에서 WASM기술을 이용해 인코딩할수도 있다.

 

이렇게 변환한 파일을 gif.mp4라고 가정하고 설명한다.

 

GIF를 MP4로 변환했다면

아래와 같이 mp4파일을 autoplay loop muted playsinline 옵션을 준다면 GIF와 동일하게 동작한다.

<video src="gif.mp4" autoplay loop muted playsinline></video>

 

Video태그 각 옵션에 대해 설명

• autoplay

  자동재생을 한다. GIF도 로딩과 동시에 움직이는 이미지로 보인다.

• loop

  무한 반복을 한다. 보통 GIF는 무한반복을 이용한다.

• muted

  음소거를 한다. GIF는 소리가 없다.

  이 옵션은 특히 중요한데 음소거가 되지않은 영상을 브라우저 정책상 로딩과 동시에 재생불가하다.

• playsinline

  영상실행시 브라우저 창에서 실행한다.

  이 옵션도 있어야 최신브라우저에서 클릭없이 동작한다.

  이 옵션이 없다면, 영상은 전체화면으로 재생되므로 브라우저 정책상 자동재생이 불가하다.

이 정도로 기존의 GIF를 MP4로 변경하는데 도움이 될것입니다.

 

GIF가 많은 페이지는 최신 컴퓨터 + 최신브라우저로도 로딩에 시간이 꽤 걸리나

MP4(같은 GIF 이미지를 변경한)가 많다고 페이지 로딩속도에 크게 영향을 주지도 않을뿐더러 구형 휴대폰에서도 로딩속도가 크게 개선됩니다.

 

GIF는 MP4의 하위호환이라고 보고 안쓰는게 훨씬 좋습니다.

 

GIF는?..

1. 20년도 더 된 표준기술이며
2. 같은수준 화질의 MP4보다 보통 용량이 10~20배 크고
3. CPU로 그래픽 렌더링작업을 하며 (전기 소모량 증가, 속도도 느림)
4. 서버와 클라이언트 모두에게 안좋은 포맷입니다.

 

 

GIF, MP4 비교하기

GIF
용량	7.51MB (8배 정도 큼)
해상도 (*)	360p
비교	열화 현상과 글자 해상도가 낮은게 보인다.

MP4
용량	919KB
해상도 (*)	360p
비교	용량이 8배정도 낮은데 화질이 훨씬 좋다.

* 해상도를 1080p로 처음에 만들었는데 mp4용량 8MB인 반면 GIF가 64MB로 너무 용량이 커서 줄였다.

 

영상 출처 : pixabay(https://pixabay.com/ko/videos/%EC%95%84%EC%9D%B4%ED%8F%B0-%EC%82%AC%EC%A7%84-%EC%82%AC%EC%A7%84%EC%88%A0-%EC%8A%A4%EB%A7%88%ED%8A%B8%ED%8F%B0-8255/)

 

MP4가 GIF에 비해 그래픽도 부드럽고 버퍼링 또한 적습니다.

데이터 절약과 성능 모두 MP4가 좋습니다.