Gambar Format GIF Untuk Kecepatan Loading Super Cepat

Mengelolablog.com - Bagi blogger, gambar menjadi sebuah elemen penting yang perlu di masukkan kedalam artikel. Memasukkan unsur gambar bisa menambah daya tarik artikel tersebut, menguatkan makna artikel dan membantu pembaca untuk mengurangi tingkat jenuh akibat tulisan panjang dalam artikel.

Memilih format gambar yang akan dimasukkan kedalam posting blog sangatlah penting dilakukan. Namun, untuk mendapatkan hasil yang optimum baik dari segi tampilan dan pengaruhnya terhadap kecepatan loading halaman, Anda harus benar-benar jeli dalam menentukan format gambar yang akan digunakan.

Kombinasi yang tepat antara format gambar, dimensi dan file size yang digunakan, akan berdampak cukup besar terhadap daya tarik maupun kenyamanan pengguna saat membaca artikel Anda.

Mengapa demikian ?

Pemilihan format gambar yang tidak tepat, dimensi yang tidak sesuai serta file size yang besar, dapat berpengaruh terhadap kenyamanan pengguna.

Salah satunya adalah loading halaman yang semakin lambat, sehingga sangat dimungkinkan gambar tersebut tidak dapat tampil dihalaman browser pengguna.



Sejauh ini, ada 3 tipe format gambar yang sering digunakan dalam sebuah posting blog, yaitu format gambar GIF, PNG dan JPEG.

Masing-masing format gambar ini tentu memiliki kelebihan dan kekurangannya masing-masing yang disebabkan oleh spesifikasi format gambar tersebut jika digunakan kedalam postingan.

Namun pada artikel kali ini, saya hanya akan men-share pengalaman saya tentang penggunaan format gambar GIF dalam posting blog. Seperti apa ulasannya? Simak pada penjelasan dibawah berikut.

Sekilas tentang File gambar dengan Format GIF

GIF sendiri adalah singkatan dari Graphic Interchage Format, sebuah format gambar yang dikembangkan dengan tujuan untuk mempercepat proses transfer file meskipun koneksi jaringan memiliki kecepatan transfer data yang rendah.

Hal inilah yang yang menyebabkan file GIF ini menjadi format standar internet atau publikasi elektronik (wikipedia).

File gambar dengan format GIF memiliki akhiran (ekstensi) file .gif, contohnya  gambar01.gif. File gambar dengan format GIF ini hanya dapat menyimpan gambar 8 bit dengan dukungan 256 warna saja.

Dalam proses pembuatan gambar format GIF ini, ada istilah dithering, yaitu proses yang menggabungkan 2 piksel warna menjadi satu warna untuk mengurangi jumlah warna dalam gambar. Proses ini sangat membantu dalam memperkecil ukuran file gambar yang dibuat.

Namun, efek dari proses tersebut juga mengakibatkan gambar dengan format GIF ini menjadi kurang menarik jika digunakan untuk gambar-gambar berjenis foto. Berikut adalah contoh gambar foto yang diubah ke format GIF

Perbandingan gambar PNG dengan GIF

Gambar dengan format GIF sangat mendukung multiple bitmap dalam satu file, sehingga format GIF ini bisa digunakan untuk membuat gambar animasi. Selain itu, format gambar ini juga mendukung transparansi serta interlacing.

Contoh Gambar GIF animasi

Seperti jenis file gambar lainnya, file gambar dengan format GIF juga memiliki kelebihan dan kekurangan saat digunakan sebagai elemen tambahan dalam artikel blog.

Salah satu kelebihan yang paling mencolok dari gambar fromat GIF ini adalah kecepatan loading yang super cepat pada halaman posting blog.

Berikut ini adalah hasil percobaan sederhana yang saya lakukan untuk melihat performa kecepatan loading halaman yang menggunakan format gambar GIF jika dibandingkan dengan format gambar PNG melalui page speed insight dan pingdom tools.

Tes Kecepatan loading halaman posting dengan gambar GIF melalui Page Speed Insight

Coba Anda perhatikan screenshoot hasil pengecekan kecepatan loading halaman disalah satu postingan saya yang banyak menggunakan format gambar gif ini.



Screenshoot ini saya ambil dari hasil pengecekan di page speed insight pada postingan tentang cara mengganti warna template blog.

Dalam postingan tersebut terdapat 5 buah gambar gif dengan efek animasi yang saya gunakan sebagai panduan untuk mengganti warna template blog yaitu

• 1. Mengganti warna template blog, file size 120,6kb
• 2. Menggunakan menu inspeksi, file size 221kb
• 3. Memilih elemen template blog, file size 121kb
• 4. Preview mengganti warna elemen, file size 163,4kb
• 5. Mengganti warna header blog, file size 195,6kb

(Ukuran file size gambar diatas, diambil menggunakan pingdom tool test tanggal 10 Maret 2016)

Secara total, kelima gambar tersebut memiliki file size yang cukup besar yaitu 821,6kb atau sekitar 0,82 Mb.

Jumlah tersebut merupakan jumlah seluruh file gambar dalam postingan saja, belum lagi gambar yang digunakan untuk ikon dan logo nama blog ini.

Sementara, skor kecepatan loading halaman yang diperoleh untuk postingan tersebut ternyata cukup tinggi yaitu, score 95 untuk desktop dan score 93 untuk perangkat mobile seluler (dites tgl 10 maret 2016).

Coba Anda perhatikan pada hasil "Optimalkan Gambar", Apa yang Anda lihat ?

Hal yang cukup mengejutkan jika kita melihat hasil pada screenshoot diatas yaitu, semua file gambar yang saya gunakan dalam postingan tersebut (5 file dengan total file size 0,826Mb)...

...tidak dimasukkan oleh Google Pagespeed Insight sebagai Ringkasan saran pengoptimalan gambar yang perlu diperbaiki untuk meningkatkan kecepatan loading halaman.

Coba Anda bandingkan dengan screnshoot hasil Pagespeed Insight dibawah ini pada postingan saya yang banyak menggunakan gambar PNG

Perbandingan kecepatan loading antara GIF dengan PNG melalui Pingdom test

Karena saya masih penasaran dengan hasil yang didapat pada kecepatan loading halaman dengan menggunakan pagespeed insight, maka saya juga mencoba memeriksa kecepatan load dengan Pingdom tools website speed tester. Berikut screenshootnya



Score yang ditorehkan dalam pengecekan ini adalah
1. Performance Grade sebesar 77/100
2. Request sebesar 78
3. Load time 4.29s
4. Page size 1.3MB

Oke, sekarang mari kita fokuskan pada page sizenya.

Jika dihitung selisih antara total page size (1.3MB) dengan size total gambar dalam postingan (0.82MB), maka didalam halaman tersebut lebih dari 50 persennya adalah gambar, dengan selisih 0.48MB.

Artinya, gambar yang digunakan pada halaman ini jauh lebih banyak daripada teks / script yang ada.

Sedangkan jika kita melihat hasil score 95 pada Page Speed Insight dan melihat ringkasan saran perbaikan yang diperlukan pada bagian pengoptimalan gambar, semua gambar diatas tidak temasuk gambar-gambar yang perlu dioptimalkan.

Hal inilah yang menjadi penyebab rasa penasaran saya.

Kemudian saya mencoba untuk mencari tau lebih dalam tentang perbedaan yang terjadi antara penggunaan format gambar PNG dengan format gambar GIF berkaitan dengan kecepatan loading halaman tersebut.

Ada dua file gambar yang saya jadikan pembanding yaitu:

• 1. Logo nama blog; Logo nama ini menggunakan file gambar bertipe PNG dengan size sebesar 2,6KB
• 2. File gambar berikutnya adalah "menggunakan menu inspeksi.gif" jenis GIF dengan size sebesar 221KB

Berikut adalah hasil tes kecepatan gambar keduanya

Total kecepatan gambar png saat di tes

Total kecepatan gambar gif saat di tes

Coba Anda perhatikan pada kedua gambar tersebut,

Gambar dengan tipe PNG ternyata membutuhkan 6 kali proses untuk memuat gambar, sedangkan gambar format GIF hanya melalui 3 proses saja. (secara detail proses ini saya masih belum memahami, mungkin bagi Anda yang sudah paham bisa menambahkannya dalam kolom komentar dibawah).

Dari data diatas, saya hanya mengambil dua data saja yang akan saya gunakan untuk melihat efektifitas kecepatan loading sebuah gambar saat dimuat ke browser, yaitu ukuran File size dan Total waktu yang diperlukan dihitung berdasarkan waktu per bytenya.

Pada data diatas terlihat bahwa file tipe PNG ini, sepertinya memiliki keunggulan waktu lebih cepat  dibandingkan gambar format GIF yaitu  314ms, sedangkan untuk file tipe GIF memiliki catatan total waktu sebesar 610ms.

Sampai saat ini, mana tipe gambar yang menurut Anda lebih cepat ?

Benarkah PNG lebih cepat daripada GIF ?

Mari kita coba berhitung sejenak, mudah saja kok

1. File PNG

• Size = 2.6kb (2600 byte)
• Total time = 314 ms (milisecon)
• Speed per byte = 314ms/2600byte
• Hasil = 0.120769 ms/byte

2. File GIF

• Size= 221kb (221000 byte)
• Total time = 610 ms (milisecon)
• Speed per byte = 610ms/221000byte
• Hasil = 0.002760 ms/byte

3. Hasil

• File PNG = 0.120769 ms/byte
• File GIF = 0.002760 ms/byte

Sekarang coba perhatikan hasil diatas, mana yang lebih cepat jika diukur berdasarkan waktu per bytenya ?

Jika File size keduanya di buat sama, katakanlah kedua file tersebut berukuran 221kb maka yang terjadi berikutnya adalah

File PNG = 0.120769 ms/byte x 221 000 byte = 26 689ms atau setara dengan 26,6 s
File GIF = 0.002760 ms/byte x 221 000 byte = 610ms atau setara dengan 0,6 s

Berdasarkan kecepatan, dari hasil hitung yang didapat jika menggunakan ukuran file size yang sama, ternyata File GIF memiliki kecepatan waktu per byte yang jauh lebih baik daripada format file PNG saat digunakan dalam posting blog.

Kelemahan format gambar GIF

Namun jika berbicara tentang kualitas gambar yang ditampilkan dengan ukuran yang sama (221kb), kualitas gambar file PNG tentu jauh lebih unggul dibandingkan dengan file GIF ketika dimuat kedalam browser, khususnya saat terjadi perbesaran gambar (di zoom).

Sampai saat ini, salah satu kelemahan format GIF lainnya jika digunakan kedalam posting blog yang sudah saya temui adalah...

Format gambar GIF kurang bisa diandalkan untuk mendatangkan pengunjung yang datang melalui mesin pencarian gambar.

Hal ini disebabkan karena untuk mencari dan menemukan gambar format GIF di mesin pencarian gambar, Anda harus masuk ke mode pencarian gambar tingkat lanjut dan mensetnya terlebih dahulu.

Sangat berbeda dengan gambar format PNG dan JPEG yang kebanyakan sudah berada di pencarian gambar mode normal, sehingga format gambar PNG atau JPEG lebih mudah untuk ditemukan oleh calon pengunjung blog Anda.

Baca juga: Cara optimasi gambar postingan SEO friendly

Kesimpulan

Dari hasil yang saya dapatkan melalui percobaan diatas adalah format gambar GIF merupakan pilihan tepat yang bisa digunakan untuk memperingan kecepatan loading halaman blog Anda sebagai elemen gambar dalam postingan (terlebih untuk postingan tutorial dengan banyak gambar), namun dengan catatan sebagai berikut

1. File size gambar diusahakan berada di kisaran 221kb atau kurang.
2. Kurang cocok untuk gambar jenis foto yang banyak menggunakan gradasi warna karena tampilannya menjadi tidak menarik.
3. Anda tidak mengandalkan gambar untuk meningkatkan jumlah pengunjung.

Bagaimana dengan pendapat Anda? Silahkan berikan saran dan komentarnya pada kolom komentar dibawah. Demikianlah artikel ini saya sampaikan, semoga bermanfaat.

Catatan:

1. Hitungan diatas adalah hitungan sederhananya saja, pendapat bisa berbeda jika dihitung oleh orang yang lebih profesional.
2. File PNG pada Logo nama blog merupakan file hasil kompresi yang sudah tereduksi sebanyak 70% dari ukuran file aslinya.
3. Hasil score Pagespeed dan Pingdom Tools dapat berubah-ubah tergantung kecepatan transfer data internet.

SHARE