Cara Animasi Animasi Animasi Animasi GIF Kerja Sebenarnya — Dari Bingkai Kanvas hingga Pemampatan LZW
Format GIF adalah 39 tahun dan masih di mana-mana. Inilah yang terjadi antara mengklik 'Export' dan mendapatkan berkas — tangkapan bingkai, kuantisasi warna, kompresi LZW, dan mengapa GIF adalah 4MB.
Mengapa GIF Masih Ada
Format Interchange Grafika dibuat oleh CompuServe pada tahun 1987 [CompuServe, 1987]. Ini mendukung animasi, transparansi, dan kompresi tanpa kehilangan. Ini terbatas pada 256 warna per bingkai. Ini tidak memiliki audio. Ini menghasilkan file besar. Dengan setiap ukuran teknis, seharusnya sudah diganti beberapa dekade yang lalu.
Dan lagi: Discord, Slack, iMessage, Twitter, Reddit, dan email semua mendukung GIF asli. GIPHY melayani lebih dari 10 miliar GIF per hari [GIPHY, 2020]. Formatnya berlanjut karena bekerja di mana-mana, tidak memerlukan kodeks, dan bermain secara otomatis. Tak ada format lain yang memiliki kombinasi dukungan universal dan pemutaran friksi nol ini.
Memahami cara kerja GIF berguna di luar trivia — menjelaskan mengapa GIF yang diekspor adalah 4MB, mengapa gradien terlihat dibantina, dan apa yang dapat Anda lakukan.
Langkah 1: Tangkap Bingkai
UPG0X animasi adalah urutan gambar (frames) yang ditampilkan dalam rangka dengan jeda antara masing-masing. Untuk membuat satu dari animasi kanvas, Anda perlu menangkap keadaan kanvas pada interval biasa.
Dalam sebuah peramban, ini berarti membaca data piksel dari elemen HTML <canvas> pada setiap waktu bingkai — biasanya melalui canvas.toDataURL() atau ctx.getImageData(). Animasi ini dimajukan ke waktu target, kanvas dirender, dan piksel ditangkap. Kekangan kunci: anda harus menunggu siklus cat peramban (requestAnimationFrame) sebelum membaca piksel, jika tidak anda menangkap penyangga basi.
A GIF khas pada 15 FPS selama 3 detik membutuhkan 45 penangkapan frame. APBN Pada resolusi 1080×1080, setiap frame sekitar 4,7 juta piksel.
Tahapan 2: Kuantisasi Warna
Wahana GIF mendukung maksimum 256 warna per bingkai, disimpan dalam tabel warna (palette). Sebuah bingkai kanvas yang khas memiliki ribuan warna yang berbeda. Ukraina Reducing ke 256 tanpa degradasi terlihat merupakan bagian tersulit dari pengkodean GIF.
Pendekatan standard adalah algoritma potong median* [Heckbert, 1982]: mengurutkan semua piksel oleh saluran reddest mereka, membagi daftar di median, ulangi untuk hijau dan biru, membagi ruang warna secara rekursif menjadi 256 region. Rata-rata masing-masing wilayah menjadi entri palet. Inilah yang digunakan oleh gif.js — perpustakaan yang digunakan PinePaper — yang diterapkan dalam Web Workers untuk paralelisme [Rubaxa, gif.js].
Kuantisasi warna Color adalah mengapa GIF menangani grafik warna datar dengan baik tetapi berjuang dengan foto dan gradien. Sebuah gradien sepanjang 1080 piksel mungkin menggunakan 500+ warna yang berbeda. Mampatkan ke 256 menghasilkan band yang tampak — langkah - langkah diskret di mana gradiennya harus mulus.
**** Apa yang bisa kau lakukan:** Andorna menggunakan lebih sedikit warna dalam desain Anda. Bentuk pipih, isian padat, dan teks mengkuantisasi dengan baik. Gradien halus dan tekstur fotografi tidak. Jika GIF Anda memiliki banding, permudah palet, bukan resolusi.
Langkah ketiga: Pemampatan LZW
Indeks piksel setiap bingkai (rujukan ke dalam palet 256-warna) dimampatkan menggunakan Lempel-Ziv-Welch (LZW) kompresi [Welch, 1984]. LZW membuat kamus urutan byte berulang saat memindai data. Saat bertemu urutan yang telah dilihat sebelumnya, ia mengeluarkan indeks kamus daripada bait mentah.
Ini berarti kompresi GIF paling efektif ketika ada area besar warna berulang — latar belakang padat, bentuk datar, teks di permukaan yang seragam. Tekstur kompleks dengan variasi tingkat piksel menghasilkan rasio kompresi yang buruk karena kamus LZW menemukan sedikit urutan berulang.
*Aplikasi praktis: A GIF GIF 1080×1080 dari teks putih pada latar belakang hitam mungkin memampatkan ke 200KB. Resolusi yang sama GIF dari sebuah foto kompleks mungkin 8MB. Ukuran berkas ini lebih bergantung pada kerumitan visual daripada resolusi atau hitungan bingkai.
Langkah 4: Pembuangan dan Optimasi Bingkai
Bingkai GIF dapat menyatakan metode disposal*: apakah untuk membersihkan kanvas sebelum menggambar bingkai berikutnya, meninggalkan bingkai sebelumnya terlihat, atau dikembalikan ke Latar belakang. Pengekod GIF yang cerdas menggunakan frame differencing — hanya pengkodean piksel yang berubah di antara bingkai, bukan seluruh bingkai.
Jika animasi Anda memiliki latar belakang statis dengan elemen bergerak kecil, sebuah optimasi GIF mengkodekan latar belakang sekali dan hanya memperbarui wilayah tempat elemen tersebut berpindah. Hal ini secara drastis mengurangi ukuran berkas. Pengekod PinePaper-nya menggunakan gif.js yang menerapkan optimasi ini secara otomatis.
Bilangan
XOY untuk animasi PinePaper yang khas (1080×1080, 15 FPS, 3 detik, latar belakang gelap dengan teks animasi):
| Komponen | Ukuran |
|---|---|
| Bingkai Raw (45 × 4,7M piksel × 3 byte) | ~634 MB |
| Setelah kuantisasi (256 warna, 1 byte/piksel) | ~211 MB |
| Setelah kompresi LZW | ~2-4 MB |
| Perbedaan kerangka | ~1-2 MB |
Rasio kompresi dari mentah ke akhir adalah kira-kira 300:1 sampai 600:1. Sebagian besar ini berasal dari kuantisasi warna (3:1) dan LZW (50:1 sampai 100:1).
When to Use GIF vs Other Formats
| Format | Terbaik untuk | Batasan |
|---|---|---|
| GIF | Dukungan Universal, auto-play, aplikasi pesan | 256 warna, berkas besar, tanpa audio |
| WebM (VP9) | Kualitas terbaik, file terkecil, web | Dukungan terbatas di Safari, iMessage |
| MP4 (H.264) | Media sosial, pemain video | Memerlukan kodeks, tanpa transparansi |
| APING | Animasi warna penuh dengan transparansi | Dukungan terbatas di peramban yang lebih tua |
Keserasian universal dan permainan otomatis adalah pilihan yang tepat. Untuk kualitas atau ukuran berkas, WebM atau MP4 lebih baik.
Cobalah
Open PinePaper Studio, membuat desain, dan ekspor sebagai GIF. Perhatikan bagaimana ukuran berkas berubah saat Anda:
- Tingkatkan jumlah bingkai (lebih banyak bingkai = berkas lebih besar, secara proporsional)
- Tambah gradien (kuantisasi miskin = berkas lebih besar)
- Una warna solid (kuantisasi baik = berkas lebih kecil)
- Tingkatkan ukuran kanvas (lebih banyak piksel per bingkai = berkas lebih besar)
Setiap perubahan adalah pengukuran pipa kompresi. Anda tidak hanya membuat GIF -- Anda mengamati bagaimana teori informasi diterapkan pada desain Anda.
Rujukan
- CompuServe (1987). Spesifikasi Format Interchange Grafika, Versi 87a.
- AZO GIPHY (2020). Laporan Tahunan: 10 Miliar Pelayanan Harian.
- ^ Heckbert, P. (1982). Kuantisasi Gambar Warna untuk Tampilan Buffer Bingkai. * Grafik Komputer (SIGGRAPH)*, 16(3), 297-307.
- Enkoder JavaScript GIF menggunakan Web Workers. github.com/jnordberg/gif.js.
- Welch, T.A. (1984). Teknik untuk Pemampatan Data Performance Tinggi.
Ekspor GIF milik PinePaper gratis — tidak ada watermark, tidak ada tanda tangan. (/editor) dan ekspor animasi pertama Anda.
Ready to create?
Start making animated GIFs, videos, and graphics — free, no signup.
Open PinePaper Editor