GIF 사용을 멈춰주세요!

열무님
열무님
Aug 23, 2018 · 18 min read
GIF is everywhere (Image Source)

Compression Efficiency

First frame comparison between two file formats.
File size comparison between two animated image files
Single Animated Image on 3Mbps Mobile Network
Multiple Animated Image on 10Mbps Wi-Fi Network

Decoding Performance

이번에 이야기 할 주제는, 디코딩 성능입니다.

Instrumented macOS WebKit Processes
Chrome Raster Thread metrics
Instrumented macOS WebKit Processes

GIF is not designed for Animation

Platform Compatibility

이정도면 이제 GIF보다 비디오를 쓰는게 더 낫다는건 충분히 이해하실겁니다. 그런데 “호환성"이 걱정되신다고요? 그러실 줄 알고 미리 준비했습니다.

  • H.264/AVC, Baseline Profile, Level 3.1
    Recommended encoder: x264
  • Maximum resolution: 540p (960 * 540)
  • CRF rate control mode
    Target CRF: 22 ~ 24 / Maximum Bitrate: 1600K / Buffer size: 2400K)
  • YUV420 Color space/Chroma Subsampling
  • No Audio

How to play video?

비디오를 클라이언트에서 재생하기 위해서는, 몇가지 변경사항이 필요합니다. 플랫폼별로 필요한 변경사항들을 나열해보면 다음과 같습니다:

Web

Android

Android의 경우 보통 이미지 뷰어로 Facebook에서 만든 Presco를 사용하는데, 비디오를 재생하려면 Presco 대신 별도의 비디오 플레이어 라이브러리를 사용해야 합니다. 저는 Vingle Android App에서 사용중인 ExoPlayer를 추천합니다.

iOS

iOS의 경우 iOS팀의 현수님이 쓰신 글로 대신합니다 :)

How to convert GIF to Video?

비디오를 재생하려면 GIF로 비디오로 변환하는 작업 또한 필요합니다.

일반 사용자 혹은 플랫폼 내에서 비디오 변환이 꼭 필요하지 않은 경우

더이상은 naver…
Giphy

플랫폼 내에서 비디오 변환이 필요한 경우

플랫폼 내에 GIF 업로드 기능이 이미 있는 상태에서 비디오 변환을 추가하려면, 별도로 서버에서 비디오 변환을 처리해야합니다.

$ ffmpeg -i GIF_IMAGE_INPUT.gif -c:v libx264 -profile:v baseline -level 3.1 -crf 24 -maxrate 1600K -bufsize 2400K -pix_fmt yuv420p -an -movflags +faststart EFFICIENT_VIDEO_OUTPUT.mp4
[libx264 @ 0xa3b85a0] height not divisible by 2 (520x369)
-vf "scale=trunc(iw/2)*2:trunc(ih/2)*2"
Example atom tree
Multiple MP4 Requests explaination
Comparison of Partial Content Response support
moov optimization can skip additional seeking steps
AWSKRUG Architecture Meetup — Serverless Media Workflow

Why we don’t use WebP/WebM

아마 이런 생각을 하시는 분도 계실겁니다.

  • Adoption Rate이 아직 낮다고 판단했습니다.
    H.264/AVC는 사실상의 산업 표준 (industry standard) 인 반면에, WebP/WebM은 사용하기에 적절할 정도로 널리 보급되지 않았습니다.
  • 하드웨어 가속 디코딩에 대한 지원이 부족합니다.
  • 낮은 Bitrate에서는 꽤 괜찮은 결과를 보여주지만, H.264/AVC 만큼 좋지는 않습니다.

Wrapping up

이야기 했던 내용들을 간단히 요약하면 다음과 같습니다.

  1. GIF를 Video로 변환해서 제공하자
    giphy, ffmpeg, cloudinary, imgix등 다양한 선택지가 존재하니 상황에 맞게 선택해라
GIF 대신 Video를 쓰기로 결정하셨다면 축하의 박수를! :)

Vingle Tech Blog

Vingle. Very Community. Love the things that you love.

Thanks to Young Min Kim.

열무님

Written by

열무님

컴퓨터와 함께 춤을

Vingle Tech Blog

Vingle. Very Community. Love the things that you love.