어떻게 애니메이션 GIF 실제 작업 — 캔버스 프레임에서 LZW 압축

왜 GIF는 여전히 존재

그래픽 교환 형식은 1987 년 CompuServe에 의해 생성되었습니다 [CompuServe, 1987]. 애니메이션, 투명성 및 무손실 압축을 지원합니다. 프레임 당 256 색상으로 제한됩니다. 오디오가 없습니다. 큰 파일을 생성합니다. 모든 기술적인 측정에 의하여, 10년 전에 대체되어야 합니다.

그리고 아직: Discord, Slack, iMessage, Twitter, Reddit 및 이메일 모든 지원 GIF를 기본적으로. GIPHY는 하루에 10 억 GIF를 봉사 [GIPHY, 2020]. 모든 곳에서 작동하기 때문에 형식의 persists는 코덱이 없으며 자동으로 재생합니다. 다른 형식은 보편적 인 지원과 제로 마찰 재생의이 조합이 없습니다.

어떻게 GIF가 trivia보다 유용하다는 것을 이해 — 그것은 왜 당신의 수출 된 GIF는 4MB이다, 왜 gradients가 밴딩을보고, 무엇을 할 수 있는지 설명합니다.

단계 1: 프레임 캡처

Animated GIF는 각 사이의 지연으로 표시된 이미지 (프레임)의 순서입니다. 캔버스 애니메이션에서 하나를 만들려면 일반 간격으로 캔버스 상태를 캡처해야합니다.

브라우저에서, 이것은 각 프레임 시간에 HTML <canvas> 요소에서 픽셀 데이터를 읽고 의미 - 일반적으로 canvas.toDataURL() 또는 ctx.getImageData()를 통해. 애니메이션은 대상 시간에 고급, 캔버스 렌더링, 픽셀 캡처. 키 제약: 당신은 브라우저의 페인트 사이클 (requestAnimationFrame)에 대 한 기다려야 합니다.

3 초 동안 15 FPS에 전형적인 GIF는 45의 구조 붙잡음을 요구합니다. 1080×1080 해결책에서, 각 구조는 대략 4.7백만개의 화소입니다.

단계 2: 색깔 Quantization

GIF는 프레임 당 최대 256 색상을 지원하며 색상 테이블에 저장됩니다. 전형적인 캔버스 프레임에는 수천 가지 색상이 있습니다. 눈에 보이는 degradation 없이 256로 감소는 GIF 기호화의 가장 단단한 부분입니다.

표준 접근법은 median cut 알고리즘 [Heckbert, 1982]: 그들의 가장 높은 채널에 의해 모든 픽셀을 정렬, 미디어에 목록을 분할, 녹색과 파란색을 반복, 반복적으로 256 영역으로 색상 공간을 분할. 각 지역의 평균은 팔레트 항목이됩니다. 이것은 gif.js - 라이브러리 PinePaper 사용 - 병렬 [Rubaxa, gif.js]에 대한 웹 노동자에 구현.

색상 정량화는 GIF가 플랫 색상 그래픽을 잘 처리하지만 사진과 그리스와 투쟁하는 이유입니다. 1080 픽셀의 주위는 500 +의 색상을 사용할 수 있습니다. 256로 압축하면 눈에 띄는 붕대를 생성합니다. 그라디언트가 매끄럽습니다.

그것에 대해 무엇을 할 수 있습니다 : 당신의 디자인에 있는 몇몇 색깔을 사용하십시오. 평평한 모양, 단단한 채우기 및 원본은 잘 정리합니다. 부드러운 gradients 및 사진 질감은하지 않습니다. GIF가 밴딩이있는 경우, 팔레트를 단순화, 해상도가 아닙니다.

단계 3: LZW 압축

각 프레임의 픽셀 인덱스 (256 색상 팔레트로 설정)는 Lempel-Ziv-Welch (LZW) 압축 [Welch, 1984]를 사용하여 압축됩니다. LZW는 데이터 스캔으로 반복된 바이트 시퀀스의 사전을 구축합니다. 앞에 보았을 때, 원시 바이트 대신 사전 인덱스를 출력합니다.

이것은 GIF 압축은 반복된 색깔의 큰 지역이 있을 때 가장 효과적입니다 - 단단한 배경, 편평한 모양, 획일한 표면에 원본. LZW 사전은 몇 가지 반복된 시퀀스를 발견하기 때문에 픽셀 수준의 변형이 빈번한 압축 비율을 가진 복잡한 질감.

실제적인 의미: 까만 배경에 백색 원본의 1080×1080 GIF는 200KB에 압축할지도 모릅니다. 복잡한 사진의 동일한 해상도 GIF는 8MB가 될 수 있습니다. 파일 크기는 해상도 또는 프레임 수보다 시각적 복잡성에 더 의존합니다.

단계 4: 구조 Disposal와 Optimization

GIF 프레임은 처리 방법을 지정할 수 있습니다. 다음 프레임을 그리기 전에 캔버스를 삭제하거나 이전 프레임을 표시하거나 복원 할 수 있습니다. 배경. Smart GIF encoders use frame differencing - 프레임 사이에 변경되는 픽셀 만 전체 프레임.

애니메이션이 작은 이동 요소와 정적 배경을 가지고 있다면 최적화 된 GIF는 한 번 배경을 인코딩하고 요소가 이동 한 지역을 업데이트합니다. 이것은 극적으로 파일 크기를 감소시킵니다. PinePaper의 인코더는 gif.js를 사용하여이 최적화를 자동으로 적용합니다.

번호

일반적인 PinePaper 애니메이션 (1080×1080, 15 FPS, 3 초, 애니메이션 텍스트가있는 어두운 배경) :

회사연혁	크기 (mm)
원시 프레임 (45 × 4.7M 픽셀 × 3 바이트)	~634 MB
정량화 후 (256 색상, 1 바이트 / 픽셀)	~211 MB
LZW 압축 후	~2-4 MB
구조 differencing로	~1-2 MB

마지막에 원료에서 압축 비율은 대략 300:1에서 600:1입니다. 이것은 색깔 quantization (3:1)와 LZW (50:1에서 100:1)에서 옵니다.

GIF 대 다른 형식을 사용할 때

지원하다	제품 정보	계정 관리
사이트맵	범용 지원, 자동 플레이, 메시징 앱	256의 색깔, 큰 파일, 오디오 없음
WebM (VP9)	최고의 품질, 가장 작은 파일, 웹	Safari의 제한된 지원, iMessage
MP4 (H.264)	소셜 미디어, 비디오 플레이어	Codec, 투명성 필요
사이트맵	투명성의 풀 컬러 애니메이션	이전 브라우저에서 제한된 지원

GIF는 당신이 보편적인 겸용성 및 자동 놀이를 필요로 할 때 적당한 선택입니다. 질 또는 파일 크기를 위해, WebM 또는 MP4는 더 낫습니다.

다운로드

[PinePaper Studio] (/editor)를 열고, 디자인을 만들고, GIF로 수출하십시오. 파일 크기가 변경되는 방법을 관찰:

• 프레임 수 증가 (더 많은 프레임 = 더 큰 파일, 비례)
• Gradients 추가 (poor quantization = 더 큰 파일)
• 단단한 색깔을 사용하십시오 (좋은 quantization = 작은 파일)
• 캔버스 크기 증가 (프레임당 더 많은 픽셀 = 더 큰 파일)

각 변화는 압축 파이프라인의 측정입니다. GIF를 만들뿐만 아니라 정보 이론이 디자인에 어떻게 적용했는지 관찰 할 수 있습니다.

이름 *

• 컴파일 (1987). 그래픽 교환 형식 사양, 버전 87a.
• 지프 (2020). GIPHY 연례 보고서: 10 억 매일 봉사.
• Heckbert, P. (1982). 프레임 버퍼 디스플레이에 대 한 색상 이미지 Quantization. *Computer Graphics (SIGGRAPH) *, 16(3), 297-307.
• Rubaxa. gif.js — 웹 노동자를 사용하여 JavaScript GIF 인코더. github.com/jnordberg/gif.js 의 확장 파일.
• Welch, T.A. (1984). 고성능 데이터 압축을 위한 기술. IEEE Computer, 17(6), 8-19.

---

PinePaper의 GIF 수출은 자유롭습니다 — 워터 마크 없음, signup. pinepaper.studio/editor를 열고 첫 번째 애니메이션을 수출합니다.