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 :
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