Penggemar desain grafis, kali ini berbagi hal kecil yang menyenangkan saat berseliweran tentang web hari ini - langkah kecil ke masa depan yang dapat menambahkan sedikit keajaiban ke proyek web berikutnya.

Animated PNG (APNG) tampaknya, suatu hal. Dan mereka dapat dibuat dalam alur kerja Photoshop yang ada.

Selalu cari cara inovatif untuk terlibat dan memikat melalui visual, untuk menciptakan pengalaman yang tak terlupakan bagi pengguna, apa pun medianya.

Hari ini, sepertinya telah menemukan harta karun tersembunyi di lanskap digital yang kita sebut web, pasti kita akan menambahkan alat baru ini ke dalam toolkit kreasi digital.

PNG animasi

Animasi web bukanlah hal baru; GIF pertama dibuat pada tahun 1987. Pikirkan APNG sebagai sepupu GIF yang modern dan canggih. Mereka adalah cara yang fantastis untuk memperkenalkan animasi ke dalam desain tanpa mengorbankan kualitas. Tidak seperti GIF, yang 8-bit dan karenanya sering terlihat sedikit pixelated, APNG menawarkan pengalaman visual yang lebih halus dan lebih hidup. Dan bisa dikatakan, transparansi.

PNG animasi pertama kali memulai debutnya sekitar awal 2000-an. Namun, mereka belum menerima sorotan sebanyak GIF dan teknologinya telah berkembang secara diam-diam.

Kompatibilitas Browser

Tidak perlu khawatir, kompatibilitas bukanlah rintangan besar.

Firefox: Sepenuhnya bergabung dengan APNG sejak pertengahan 2008. Salut untuk Mozilla.

Safari: APNG yang didukung sejak akhir 2014, tetapi memerlukan klik untuk memutar animasi.

Chrome: Didukung sejak pertengahan 2017.

Opera: Didukung pada hari-hari awal, kemudian istirahat dan sekarang mendukung lagi tanpa keributan sejak pertengahan 2017 di browser desktop. Bekerja pada Opera Mobile tetapi pada Opera Mini, hanya akan menampilkan frame pertama.

Edge: Didukung penuh sejak awal 2020. Sebelum itu, browser ini hanya menampilkan frame pertama.

Detail lebih lanjut dapat ditemukan di sini: https://caniuse.com/apng

Menambahkan APNG ke Desain

Proses untuk menambahkan APNG ke situs web sama dengan menambahkan PNG.

Jika menggunakan Sistem Manajemen Konten (CMS) seperti WordPress, prosesnya harus sama dengan gambar lainnya. Satu-satunya peringatan mungkin jika mereka menerapkan beberapa kompresi pada gambar saat diunggah.

Berikut adalah contoh menyematkan APNG langsung ke HTML :

    <img src="animation.png" alt="APNG Animation" />

Dalam cuplikan ini, jika pengguna menggunakan browser yang sangat lama yang tidak mendukung APNG, frame pertama akan tetap ditampilkan.

Elemen terkecil pun dapat meninggalkan kesan abadi pada pengunjung.

Jadi, rekan-rekan desainer, bersiaplah untuk menjelajahi dunia APNG. Efeknya mungkin halus, tetapi dampaknya tidak dapat disangkal.

Jangan khawatir, jika masih penggemar GIF klasik dari sumber seperti GIPHY. Meskipun akan selalu menghargai pesona GIF pixelated dari tahun 80-an, kemungkinan kreatif yang dibawa APNG tidak dapat disangkal menarik untuk dijelajahi.

Biarkan desain bernafas dan bergerak, audiens akan berterima kasih atas momen-momen ajaib itu.s