GIF파일 최적화

gif 파일을 최적화한 방법에 대해 정리해보고자 한다. 사실 이전까지는 gif파일을 아무 생각없이 사용했던 것 같은데, gif 포맷이 비효율적인 부분도 있고 사이즈도 다른 포맷과 비교했을 때 훨씬 크다는 걸 이번에 알 수 있었다. 

GIF란?

GIF는 우리가 흔히 볼 수 있는 이미지 포맷 중 하나이다. 움직이는 이미지랄까,,? 요즘에는 어딜가나 gif 파일이 많이 존재하는데, gif 포맷은 거의 30년전에 개발된 오래되고 비효율적인 포맷이다.

 

내가 정리해본 gif파일이 비효율적인 이유는 다음과 같다.  더 자세히 알아보기 

 

• GIF는 불필요하게 대역폭을 낭비해 엄청나게 많은 전송량을 발생시킨다.
• 더 많은 CPU 자원을 소모한다. 즉, 더 많은 배터리를 소모한다.
• 256색을 표현할 수 있는 컬러 팔레트와, 각 프레임의 모든 픽셀에 대한 정보를 무손실 압축 데이터로 담고 있어서 파일의 크기가 크다.

따라서 gif 포맷의 파일을 mpeg4/webm format의 video로 변형하는 것을 추천한다. 변형을 위해서 command line 도구인 ffmpeg를 사용했다.

ffmpeg란?

ffmpeg는 동영상 분야에서 많이 사용되는 오픈소스이다. 비디오/오디오 관련한 많은 기능을 제공하고 있으며, 성능또한 상당히 좋은 편이다. ffmpeg라는 오픈소스는 크게 4가지로 분류할 수 있다.

 

1. ffmpeg: command line 도구 ( 동영상 크기및 코덱을 변경하경 할수 있다. )
2. ffserver: 동영상 streaming을 위한 서버
3. ffplay: SDL 이라는 오픈소스 기반으로 player를 해주는 컴포넌트
4. ffprobe: 간단한 멀티미디어(동영상) 분석도구

 

 

mp4/webm 중 어떤 파일로 변환하는게 더 좋을지 찾아봤다. 압축률은 webm이 더 좋은데, webm의 경우 애플 기계에서 지원이 안될 수도 있기 때문에 webm으로 변환할 시에는 동시에 mp4변환 파일로도 변환해서 대응해야 한다고 한다.

 

그래서 최종적으로는 mp4 파일로 변환하기로 했는데, 그래도 일단 내가 가진 파일을 두 개로 다 변환해서 비교해보았다.

1. ffmpeg 설치

brew install ffmpeg

2. gif 파일 mp4/webm으로 변환 후 비교

find.gif 2.0MB → MP4로 변환 → fing.mp4 331KB (83.45% 압축)

 

ffmpeg -i src/assets/images/find.gif src/assets/images/find.mp4

 

 

find.gif 2.0MB → WEBM으로 변환(option 적용 X) → find.webm 162KB (91.9% 압축)

 

ffmpeg -i src/assets/images/find.gif src/assets/images/find.webm

 

 

find.gif 2.0MB → WEBM으로 변환(option 적용: -c vp9 -b:v 0 -crf 41) → find.webm 388KB (80.6% 압축)

 

ffmpeg -i src/assets/images/find.gif -c vp9 -b:v 0 -crf 41 src/assets/images/find.mp4

 

3. fing.gif, trending.gif 모두 mp4로 변환

find.gif 2.0MB → MP4로 변환 → fing.mp4 331KB (83.45% 압축)

trending.gif 1.3MB → MP4로 변환 → trending.mp4 148KB (88.62% 압축)

 

4. gif를 src로 사용했던 img 태그를 video 태그로 수정

변경 전

 

<img className={styles.featureImage} src={imageSrc} />

 

변경 후

 

<video className={styles.featureImage} autoPlay muted loop>
  <source src={videoSrc} type="video/mp4" />
  cannot play video
</video>