GIF Loader vs Animasi Vektor: Mengapa Tim Mengganti GIF Animasi di UI
Mengapa GIF animasi kurang cocok untuk pemuat dan ikon UI, apa yang harus digunakan (CSS, SVG, Lottie, video, runtime berbasis negara) dan cara memilih.
Pengambilan Inti
GIF animasi terbatas pada palet dengan maksimal 256 warna, memiliki transparansi aktif atau nonaktif, buram saat diskalakan, dan tidak dapat bereaksi terhadap status aplikasi. Untuk pemuat dan ikon UI, animasi CSS atau SVG biasanya lebih ringan dan tajam; Lottie berfungsi untuk ilustrasi yang lebih kaya; dan runtime berbasis status seperti ExodeUI atau Rive adalah yang terbaik ketika animasi harus berubah seiring pemuatan, keberhasilan, dan kesalahan.
Apa yang bisa dan tidak bisa dilakukan GIF
Panduan format gambar MDN menjelaskan bahwa setiap piksel GIF adalah indeks ke dalam palet dengan maksimal 256 warna, dan mencatat bahwa format lama seperti GIF berkinerja buruk dibandingkan dengan format baru seperti WebP dan AVIF. Untuk UI, masalah praktisnya adalah garis melintang dalam gradien, tepi bergerigi pada latar belakang transparan, penskalaan buram pada layar dengan kepadatan tinggi, dan tidak ada cara untuk merespons apa yang sedang dilakukan aplikasi.
Apa yang harus digunakan sebagai gantinya
Pilih berdasarkan apa yang perlu dilakukan animasi:
- Pemintal atau pulsa sederhana: animasi CSS atau SVG sebaris. Mungil, tajam, dan mudah dijeda untuk mengurangi gerakan.
- Lingkaran atau ikon bergambar: Lottie atau SVG animasi. Vektor, terukur, kecil untuk karya seni sederhana.
- Rekaman fotografi atau kompleks: video (WebM atau MP4) atau animasi WebP/AVIF, bukan GIF.
- Loader yang berubah menjadi sukses atau error: runtime berbasis status seperti ExodeUI atau Rive, yang ditentukan oleh status aplikasi Anda.
Loader harus tahu apa yang terjadi
GIF melakukan perulangan dengan cara yang sama baik permintaan memerlukan waktu satu detik atau satu menit, dan tidak dapat menjadi tanda centang ketika pekerjaan selesai. Pemuat berbasis negara dapat beralih dari pemuatan ke keberhasilan atau kesalahan dan menunjukkan kemajuan, yang memberi tahu orang-orang lebih dari sekadar gambar yang berputar.
Aksesibilitas
Perulangan GIF tidak dapat mengikuti pengaturan gerakan yang dikurangi dengan sendirinya. CSS, SVG dan animasi runtime dapat dijeda atau disederhanakan ketika pengguna meminta lebih sedikit gerakan. Berikan juga label yang dapat diakses oleh pemuat, seperti "Memuat hasil", sehingga pengguna pembaca layar mengetahui apa yang terjadi.
Kunci Principles untuk Diingat
- Palet GIF menampung paling banyak 256 warna dan skalanya buruk
- Gunakan CSS atau SVG untuk loader sederhana
- Gunakan Lottie untuk loop bergambar, video untuk cuplikan
- Gunakan runtime berbasis negara ketika pemuatan harus berubah menjadi sukses atau kesalahan
- Mendukung pengurangan gerakan dan menambahkan label yang dapat diakses
Pertanyaan yang Sering Diajukan
Sumber
- Image file type and format guide — Dokumen Web MDN
- lottie-web — GitHub (Airbnb)
- prefers-reduced-motion — Dokumen Web MDN