Trenggaleknjenggelek - Sejak PNG 3 dirilis resmi oleh W3C, satu fitur yang paling bikin heboh adalah dukungan animasi APNG yang kini menjadi bagian dari standar.
Ya, kamu gak salah baca, format gambar PNG sekarang bisa bergerak, seperti GIF, tapi dengan kualitas gambar lebih tajam dan warna yang lebih kaya.
Dengan APNG, kamu bisa membuat animasi ringan yang tetap mempertahankan transparansi dan kualitas lossless, cocok untuk UI animasi, ikon bergerak, atau sekadar stiker lucu di website.
Apa Itu APNG di PNG 3?
APNG (Animated PNG) sebenarnya bukan hal baru. Sudah digunakan sejak 2008, tapi statusnya “tidak resmi”, semacam anak tiri format gambar PNG.
Baru di PNG 3, dukungan terhadap APNG disahkan sebagai bagian dari spesifikasi utama.
Itu artinya, sekarang kamu bisa membuat animasi PNG secara lebih konsisten, didukung browser modern, dan tidak perlu lagi bergantung pada GIF yang terkenal boros ukuran dan warna.
Alat untuk Membuat Animasi PNG
Sebelum masuk ke teknis, kamu perlu siapkan:
- Frame individual (PNG statis): Gambar berurutan untuk dijadikan animasi
- Aplikasi pembuat APNG: APNG Assembler (GUI)
- apngasm (CLI untuk pengguna lanjutan)
- Photoshop + plugin APNG (opsional)
Cara Membuat Animasi PNG (APNG)
Langkah 1: Siapkan Frame PNG
Pastikan semua gambar (misal frame01.png, frame02.png, dst.) memiliki ukuran dan transparansi yang konsisten.
Langkah 2: Gabungkan Frame Jadi APNG
Jika pakai APNG Assembler, langsung jalankan aplikasinya.
Tambahkan semua frame secara berurutan
- Atur durasi frame (dalam milidetik)
- Klik Create APNG
- Simpan dengan ekstensi .png, yes, tetap .png!
Hasil file akan terlihat seperti PNG biasa, tapi sebenarnya berisi beberapa frame animasi.
Cara Menampilkan APNG di HTML
Nah, ini bagian paling menyenangkan: kamu tidak perlu kode aneh-aneh. Karena browser modern (Chrome, Firefox, Edge) sudah mendukung format APNG, kamu cukup menulis seperti ini <img src="animasi.png" alt="Animasi PNG">.
Tidak perlu canvas, tidak perlu video, cukup <img> biasa. Safari kadang perlu versi terbaru untuk mendukung APNG. Tes dulu, jangan langsung lempar ke klien.
Setelah PNG 3 disahkan, kini tak ada alasan lagi buat bertahan dengan GIF. Dengan APNG, kamu bisa bikin animasi PNG berkualitas tinggi, ringan, dan langsung tampil di HTML tanpa ribet.
Cocok buat developer, desainer, bahkan anak magang yang mau bikin website lebih hidup. (sun)
Editor : Mahsun Nidhom