Cara menggunakan Kompres Lottie JSON
- Ekspor animasimu sebagai Lottie JSON (Bodymovin/LottieFiles), lalu seret filenya ke sini.
- Pakai 3 desimal untuk hasil yang aman. Coba 2 desimal untuk hemat lebih besar, lalu bandingkan animasinya.
- Unduh file hasil optimasi dan unggah ke elemen Lottie di Webflow (atau player kamu).
Kenapa file Lottie bisa besar?
Animasi Lottie yang diekspor dari After Effects menyimpan setiap nilai keyframe hingga 15 angka desimal, menyimpan nama layer dan bentuk asli, menyertakan metadata exporter, dan kadang ikut membawa layer panduan yang tersembunyi. Semua itu tidak mengubah tampilan animasi, tapi tetap harus diunduh dan diproses sebelum animasi diputar. Akibatnya halaman jadi lambat dan Core Web Vitals ikut terdampak.
Apa saja yang dihapus optimizer?
| Optimasi | Efek |
|---|---|
| Bulatkan angka (misalnya 80.0000001 → 80) | Biasanya penghematan terbesar; 3 desimal tampilannya sama persis |
Hapus nama (nm, mn, cl, ln) | Menghapus label yang mudah dibaca manusia (nama marker untuk segmen tetap dipertahankan) |
| Hapus metadata | Menghapus info exporter, author, dan keyword |
| Hapus layer/bentuk tersembunyi | Menghapus elemen yang ditandai tersembunyi (hd: true) |
Memakai Lottie di Webflow
Elemen Lottie di Webflow (panel Add → Media → Lottie) menerima file JSON yang diunggah dan mengatur pemutarannya lewat Interactions. File yang lebih kecil akan lebih cepat dimuat, terutama jika beberapa animasi berjalan di satu halaman. Jika animasimu berisi gambar raster tertanam (PNG/JPG base64), gambar itu biasanya paling banyak memakan ukuran, jadi kompres dulu sebelum ekspor atau ganti dengan vektor. Jika kamu merujuk nama layer di kode (misalnya properti dinamis lottie-web), biarkan opsi “Hapus nama layer & bentuk” tidak dicentang.
Juga dicari sebagai: kompres lottie, optimasi lottie json, optimizer lottie, bodymovin, ukuran file lottie json, lottie webflow, optimasi animasi lottie.
Tool yang cocok dipakai bersama Kompres Lottie JSON
- SVG ke Webflow — Paste SVG dari Figma dan salin ke Webflow sebagai Custom Elements asli.
- Kompres Gambar — Perkecil foto dan grafis hingga 90% tanpa penurunan kualitas yang terlihat, tergantung gambar dan pengaturannya.
- Format JSON — Tempel JSON untuk dirapikan, di-minify, atau divalidasi.
- HTML ke Webflow Rich Text — Tempel HTML yang berantakan dari situs lama, ekspor WordPress, Google Docs, atau Word.