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.

Gambar format GIF untuk loading lebih cepat

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

Memilih dan mengganti warna tempate blog
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.

tes kecepatan postingan format GIF di pagespeed insight

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

tes kecepatan postingan format PNG di pagespeed insight


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

tes kecepatan postingan format GIF di pingdomtools

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

tes kecepatan gambar PNG
Total kecepatan gambar png saat di tes

tes kecepatan gambar GIF
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.

Berlangganan Artikel Via Email :

10 comments:

  1. Kunjungan rutin mas teguh :D
    1. mau tanya2 nih..gambar gif animasi diatas bikinnya make apa ya ?
    2. sorry mungkin OOT,aku mau beli domain dot com, beli domain yang aman dan bagus dimana ya mas?
    3. apa bener klo mw daftar google adsense harus make domain dot com, dan terus blognya harus bahasa inggris ?
    terima kasih :D

    ReplyDelete
    Replies
    1. Terima kasih atas kunjungannya mas :D

      1. Untuk animasi gambar gif diatas saya pakai powerpoint aja mas, trus direkam pakai software LICEcap (hasilnya nanti langsung jadi Format GIF).

      2. Kalau domain saya pakainya dari idwebhost mas, hampir 1 tahunan pakai hingga saat ini tidak ada masalah, cuma kalau untuk hosting saya belum pernah coba pakai. Masih merasa lebih safe di bloggernya aja.

      3. Untuk daftar Google Adsense pakai domain blogspot juga bisa mas dan ga perlu bikin blog yang berbahasa inggris. Setau saya dari tahun 2012 lalu untuk blog yang berbahasa indonesia sudah bisa daftar adsense, memang banyak yang ngeluh susah diterima. Tapi banyak juga yang sudah diterima. Yang terpenting mematuhi aturan dan TOS (Term OF Service) Google Adsense, baik saat daftar sampai full diterima.




      Delete
    2. Dapet satu ilmu lagi dari blog ini, trims :D
      Saya ada sedikit maslah nih mas bikin gambar GIFnya kok kayak slowmtion ya, jadi lemot..apa ada pengaturan khusus di software LICECap biar hasilnya smooth kaya contoh diatas..kayak FPS atau apanya gitu mas?

      Saya juga cuma pake blogger saja kok mas, baru belajar ngeblog soalnya..cuma kepikiran make domain sendiri kayak di blog ini biar lebih bagus gitu...

      kalo mnurut pengalaman mas teguh sendiri waktu daftar adsense di blog ini..itu make blog ini atau make blog lain? klo pake blog lain, pake bhs indo atau inggris? trus apa aja yang harus ada di blog biar nanti cepet diterima...soalnya googling malah banyak versi..jadi bingung mau mulainya


      hahaha..maaf mas saya banyak tanya klo berkunjung ke blog ini, malah kayak wartawan :D

      Delete
    3. Gunanya sharing pengetahuan diblog ya begitulah mas :D, lagipula saya juga merasa senang kalau bisa membantu . . .

      Masalah slowmotion, coba Max FPS mas kasih nilai 10 aja, nanti pas mau save, dibagian menu pilihan kosongkan semua centang yang ada, kecuali pada pilihan use .GIF transparency for smaller files (dicentang).

      Nah kalau adsense ini sebenernya saya agak lupa karena akun adsense blog ini sudah lama daftarnya sekitar tahun 2009, waktu itu belum bisa pakai blog berbahasa Indonesia, jadi saya pakai blog berbahasa inggris.

      Inget saya waktu daftar dulu cuma seminggu sudah full approve, bahkan artikelnya cuma 15 aja. blognya kebetulan sudah saya hapus mas.

      Kalau ini saran saya saja karena tiap tahun TOS Google Adsense bisa berubah dan saya sendiri belum ada coba lagi mendaftar sendiri.

      Sepengetahuan saya kalau mau daftar adsense pakai bahasa indonesia. Ini saya sering baca aja di forum dari yang sudah di approve GA, sehingga saya punya kesimpulan seperti ini

      Buat saja blog baru khusus untuk persiapan daftar adsense.

      1. Pakai template standar blogspot, ga usah modifikasi macam2.
      2. Pasang widget label untuk menu navigasi
      3. Tambahin halaman privasi, kontak, page about
      4. Jumlah artikel minimal yang pernah saya baca di Google Adsense (lupa saya linknya) sekitar 50 artikel bermanfaat n original buatan sendiri (ga copas n mematuhi copyright, baik gambar, ebook atau konten lainnya).
      5. Akun email yg didaftarin ke GA belum bermasalah karena blog dan suatu hal lainnya

      Setelah daftar dan masa review perhatikan halaman error 404 dan halaman kosong yang tidak ada isinya, jangan sampai menampilkan iklan di halaman tersebut, Kalau dahulu rasanya tidak masalah, sekarang sepertinya bisa jadi masalah.

      Itu aja sih mas kesimpulan dan pendapat saya, soalnya dulu blog saya waktu daftar adsense tu polos banget, ga ada modifikasi ini dan itu, bahkan fotonya saja masih pakai foto sendiri dari kamera vga jadul.. heheh

      Untuk lebih jelasnya coba baca dan ikuti arahan di TOS google Adsense mas supaya bisa buat blog yang sesuai kriteria mereka.

      Delete
    4. Gambar GIFnya masih tetep slowmotion ahahahha, apa ada yang salah ya

      untuk saran yang kedua :
      2. Pasang widget label untuk menu navigasi...

      itu maksudnya home ,about, contact atau kayak kategori misalnya blogging, internet, komputer dll gitu? atau yang mana mas..maklum newbie saya di blog ahahhaha

      Delete
    5. Sama aja mas, saya juga masih banyak belajar, terkadang sudah belajarpun lupa :D, yang saya maksud itu kayak kategori yang sudah mas sebutkan tadi, blogging, internet, komputer.

      Masa disetting gitu masih slow motion mas, boleh saya liat hasilnya ngga?

      Delete
    6. Oke trims mas :D
      untuk gambar gifnya udah fix kok mas...kemarin saya coba record video di YT ternyata yang bikin lemot itu.terus setingan size buat dimensinya jangan gede-gede..plus gak bisa lama-lama recordnya pasti slowmotion jadinya..

      tapi klo buat gambar gif record kayak power point dan durasi sebentar hasilnya smooth...

      coba klo bisa bikin gambar gif durasi panjang and smooth pasti lebih enak bikin gambar gif daripada record video klo mw buat tutorial blog...

      berrti software LICECap gak cocok buat record yang durasi panjang :D

      Delete
  2. Hahaha namanya juga software buat gambar animasi mas :D

    ReplyDelete
  3. Walah.. Dengan fakta di atas membuat opini saya patah, saya dari awal mengira jika PNG lebih cepat di muat dari pada gif..
    Hemmm.. Mesti mendalami lagi nih..
    Suwun infone mas..

    ReplyDelete

Informasi:
Form komentar ini menggunakan moderasi, setiap komentar yang masuk akan melalui proses pemeriksaan sebelum ditampilkan dalam kolom komentar. Memasang link yang sifatnya promosi di dalam komentar tidak akan di tampilkan. Hanya komentar yang membangun dan sesuai topik artikel saja yang akan saya tampilkan. Mohon maaf atas ketidaknyamanannya.