Cara membuat GIF animasi dari gambar, dan menjaga ukuran filenya tetap kecil

Membuat GIF dari beberapa gambar diam hanya butuh semenit. Membuat GIF yang ukurannya tidak sampai beberapa megabyte butuh pemahaman tentang cara format ini menagih Anda, dan cara menagihnya mudah dihitung sebelum Anda menekan tombol apa pun. Panduan ini membahas gambar diam; jika Anda memulai dari klip video, pengukuran dalam video ke GIF: byte per piksel per frame membahas kasus itu.

Cara GIF menagih Anda

GIF animasi adalah tumpukan gambar diam yang lengkap, masing-masing disimpan sebagai indeks palet 8-bit dan dikompresi dengan LZW, dengan jeda waktu yang ditulis di samping setiap gambar. Tidak ada estimasi gerak dan tidak ada frame referensi: tidak ada bagian dari format ini yang menyadari bahwa dua frame nyaris sama persis. Jadi, ukurannya mendekati sebuah perkalian:

byte ≈ lebar × tinggi × jumlah frame yang di-encode × byte per piksel per frame

Suku terakhir ditentukan oleh gambarnya, bukan oleh pengaturan apa pun. Diukur melalui encoder yang dipakai alat ini, di Chromium pada 27 September 2026:

Konten	Byte per piksel per frame
Foto, 800 × 533, 8 frame	0.56 hingga 0.69
Foto, 480 × 320, 8 frame	0.59 hingga 0.75
Pita warna datar	0.033
Screenshot antarmuka	0.006 hingga 0.013

Selisih antara foto dan screenshot mencapai dua orde besaran. LZW sangat efektif meringkas deretan panjang piksel yang identik, tetapi nyaris tidak bisa berbuat apa-apa terhadap butiran foto, jadi tidak ada pengaturan palet atau dithering yang bisa menutup selisih itu.

Menghitung bobot file sebelum membuatnya

Alat ini menampilkan perkiraannya di bawah What this will weigh (perkiraan bobot), di atas tombol pembuatan. Alat mengambil sampel piksel Anda sebesar 64 × 64, menghitung jumlah warna yang berbeda, lalu memilih tarif antara 0.03 byte per piksel per frame (64 warna atau kurang dalam sampel, yang dianggap datar) dan 0.65 (2 000 warna atau lebih, yang dianggap foto). Setelah itu alat menambahkan 800 byte untuk file dan 24 byte untuk setiap frame. Berikut hitungan tersebut untuk enam foto 4:3:

Pengaturan	Frame yang di-encode	Ukuran frame	Tarif yang dipakai	Perkiraan
Enam foto, lebar 480	6	480 × 360	0.65	674 864 B
Enam foto, lebar 240	6	240 × 180	0.65	169 424 B
Enam foto, lebar 480, crossfade 2, berulang	18	480 × 360	0.65	2 022 992 B
Dua belas foto, lebar 800	12	800 × 600	0.65	3 745 088 B
Enam screenshot datar, lebar 480	6	480 × 360	0.03	32 048 B

Baris pertama adalah 800 + 6 × (24 + 480 × 360 × 0.65) = 674 864. Ada tiga hal yang bisa disimpulkan dari tabel itu.

Lebar adalah tuasnya. Membagi dua lebar dari 480 ke 240 membuat jumlah piksel tinggal seperempat dan menurunkan perkiraan menjadi 25% dari baris pertama (169 424 ÷ 674 864 = 0.251). Tidak ada kontrol lain yang mendekati hasil ini dengan pengorbanan visual yang sama.

Crossfade dihitung dalam frame utuh. Setiap langkah peralihan adalah satu frame tambahan yang lengkap. Dengan dua langkah di antara setiap gambar dari enam gambar, dan gambar terakhir memudar kembali ke gambar pertama karena animasinya berulang, 6 gambar menjadi 6 + 6 × 2 = 18 frame yang di-encode, dan perkiraannya naik tiga kali lipat. Setiap frame peralihan ditampilkan selama 40 ms, jadi durasinya hanya bertambah dari 1.2 detik menjadi 1.68 (6 × 200 ms + 12 × 40 ms).

Garis merahnya 3 000 000 byte. Melewati angka itu, perkiraan berubah menjadi merah. Dua belas foto dengan lebar 800 piksel melampauinya dengan mudah.

Perkiraan ditampilkan sebagai rentang 35% di kedua sisi angka yang paling mungkin, dan diganti dengan jumlah byte sebenarnya setelah file dibuat. Ada dua keterbatasan yang perlu Anda ketahui. Perkiraan tidak berubah saat Anda menggeser Colours atau Dithering, karena yang menentukannya hanya ukuran, jumlah frame, dan sampel piksel. Selain itu, untuk screenshot antarmuka yang datar, tarif terendahnya, 0.03, masih di atas 0.006 hingga 0.013 yang benar-benar terukur, sehingga GIF dari screenshot bisa jauh lebih kecil daripada rentang yang ditampilkan.

Membuatnya di GIF maker

1. Buka GIF maker dan tekan Choose images (pilih gambar), atau seret gambar ke kotak; gambar-gambar itu menjadi frame sesuai urutan Anda menambahkannya. File HEIC langsung dari iPhone biasanya perlu dikonversi dulu.
2. Urutkan frame di bawah Frames · drag to reorder. Seret thumbnail, atau gunakan tombol ← dan → di bawahnya; × menghapus sebuah frame, dan Add more images menambahkan gambar di bagian akhir.
3. Pilih lebar: 240, 320, 480 (nilai awal), 640, atau 800, atau ketik lebar sendiri di Exact width. Tingginya mengikuti bentuk frame pertama.
4. Atur waktunya dengan slider Frame delay (jeda frame), yang dimulai di 200 ms (5 fps). Untuk mengatur waktu setiap frame secara terpisah, tekan One delay for all hingga berubah menjadi Per-frame delays, lalu ketik nilainya di kotak ms di bawah setiap thumbnail.
5. Atur Loops · 0 is forever (jumlah perulangan). Frame yang bentuknya berbeda dari frame pertama ditempatkan dengan Fit inside atau Fill and crop, di atas latar White, Black, atau Grey.
6. Baca What this will weigh. Jika angkanya merah atau memang terlalu besar, kurangi lebarnya sebelum menyentuh pengaturan lain.
7. Tekan Build the GIF, lalu Download (tombolnya mencantumkan ukuran sebenarnya). Di bawah The actual file, alat ini menampilkan byte per piksel per frame yang sebenarnya dari file yang baru saja dibuat.

Jeda yang Anda ketik dan jeda yang Anda dapat

Format ini menyimpan setiap jeda sebagai hitungan seperseratus detik, jadi setiap nilai jatuh pada kelipatan 10 ms: 33 ms disimpan sebagai 30, yang diputar pada 33.3 frame per detik, bukan 30. Di balik itu, setiap browser utama mengganti jeda 10 ms atau kurang dengan 100 ms, aturan warisan Netscape yang tidak dilaporkan oleh apa pun. Slider berhenti di 20 ms. Kotak per frame menerima 10, dan jika Anda mengetiknya, alat ini memberi peringatan merah bahwa browser akan menggantinya dengan 100 ms, dan pratinjau diputar dengan kecepatan lebih lambat yang memang akan dimiliki file tersebut.

Warna dan dithering

Colours menawarkan 32, 64, 128 (nilai awal), dan 255, jumlah maksimum yang diizinkan format ini setelah satu slot disisihkan untuk transparansi. Satu palet dibangun dari semua frame dan dipakai bersama, dan itulah yang mencegah area datar berganti warna dari frame ke frame. Dithering on menyamarkan banding pada gradasi dengan menyebarkan galatnya, dan biasanya membuat file lebih besar, karena piksel yang tersebar memberi LZW lebih sedikit deretan untuk diringkas. Mengurangi jumlah warna memang mengecilkan GIF, dengan konsekuensi banding yang terlihat; pengukuran video ke GIF memberi angka untuk kompromi itu.

GIF hanya punya satu slot palet yang sepenuhnya transparan dan tidak mendukung transparansi parsial, jadi frame PNG bertepi halus akan diratakan ke warna latar yang Anda pilih, alih-alih dibiarkan dengan pinggiran bergerigi.

Cara lain untuk melakukannya

FFmpeg bisa membuat GIF dari gambar diam bernomor dengan palet bersama:

ffmpeg -framerate 2 -i frame%03d.png -vf "split[a][b];[a]palettegen[p];[b][p]paletteuse" out.gif

-framerate 2 menampilkan dua frame per detik, artinya 500 ms per frame (1 000 ÷ 2). frame%03d.png membaca file yang diberi nomor tiga digit, mulai dari frame001.png dan seterusnya. Rangkaian filter itu membuat satu palet dari semua frame lalu menerapkannya, gagasan palet bersama yang sama dengan yang dipakai alat ini. macOS dan Windows tidak punya cara bawaan untuk membuat GIF animasi, jadi tidak ada yang bisa kami tunjukkan di sana.

Sebelum membuat GIF sama sekali, periksa apakah tujuan Anda menerima video. Animasi yang sama dalam format MP4 atau WebM biasanya sepuluh hingga lima puluh kali lebih kecil dan diputar lebih mulus; GIF adalah pilihan yang tepat jika tujuan Anda hanya menerima gambar.

Memastikan tidak ada yang diunggah

Buka tab Network di developer tools browser Anda sebelum membuat GIF. Menekan Build the GIF untuk pertama kali akan mengambil encoder, sebesar 11.6 KB setelah gzip, dari situs ini; tidak ada permintaan yang membawa frame Anda ke mana pun, karena semuanya disusun dan di-encode di dalam tab.

Buat GIF Anda di GIF maker, dan baca bobotnya sebelum menekan tombol. Jika frame perlu dipotong atau diluruskan dulu, lakukan di image editor, yang meng-encode-nya sekali saja, bukan tiga kali.