Gambar Format WebP, File kecil loading lebih cepat - Mengelola Blog

Gambar Format WebP, File kecil loading lebih cepat

Saat ini, kecepatan loading halaman akan menjadi salah satu "item" tambahan yang diperhitungkan sebagai faktor pemeringkat halaman di Google SERP.

Dalam artikelnya,  Google menjelaskan bahwa mereka akan menggunakan faktor kecepatan loading halaman (khususnya untuk pencarian dari perangkat mobile) sebagai salah satu acuan pemeringkat halaman di SERP. Aturan ini, rencananya akan di terapkan mulai Juli 2018 nanti.

Terlepas dari kondisi tersebut, tentunya sebagai pengelola blog kita juga ingin memberikan konten yang tersaji dengan cepat kepada pengunjung. Karena bagaimanapun, pengunjung lebih suka dengan "yang cepat-cepat" termasuk penyajian halaman.

Guna mempercepat penyajian konten ke hadapan pengunjung, salah satu caranya adalah dengan meminimalkan ukuran file halaman yang akan dimuat.

Ini artinya, kita perlu menekan ukuran dan jumlah byte yang digunakan dalam halaman. Ya, kecepatan loading halaman sangat tergantung dari jumlah byte yang dimuat untuk halaman tersebut.

Semakin besar bytenya maka proses loading halaman juga akan semakin berat.

Dari sekian banyak elemen yang digunakan dalam halaman blog, gambar menjadi salah satu elemen yang umumnya membutuhkan byte lebih besar dari hal lainnya. Apalagi gambar yang digunakan termasuk kategori photo, dimana biasanya gambar berbentuk photo ini memiliki jumlah file size yang ukurannya juga cukup besar.

menggunakan gambar format webp


Format gambar untuk Blog


Seperti sudah kita ketahui saat upload gambar untuk postingan blog, ada 3 format yang bisa digunakan, yaitu JPEG, PNG dan GIF. Dari ketiga format gambar ini, mayoritas saat ini yang paling baik untuk digunakan adalah gambar dengan format PNG.

Salah satu alasannya, gambar format PNG yang di kompres dengan benar, bisa lolos dari deteksi di Pagespeed Insight Tools namun masih bagus dilihat secara visual oleh mata pengguna.

Hal ini pernah sedikit saya singgung sebelumnya pada postingan tentang 3 cara membuat gambar lolos dari page speed insight.

Pada postingan tersebut, diketahui bahwa format gambar PNG yang dikompres kembali, bisa lolos dari deteksi pagespeed insight. Ini artinya, gambar format PNG tidak menjadi sebuah hambatan yang dapat memperlambat kecepatan loading blog kita.

Meskipun begitu, ternyata masih ada lho format file gambar yang visibilitasnya memadai namun dengan ukuran lebih kecil lagi bahkan lebih kecil dari png yang sudah dikompres. Format gambar ini dikenal dengan format WebP.


Format gambar WebP


Seperti dikutip dari Developers.google.com tentang format WebP, WebP merupakan format gambar modern yang dapat mengkompres gambar lebih maksimal lagi tanpa harus kehilangan visibilitas berarti bagi mata yang melihat.

Diperkenalkan 2014 silam, format Webp memiliki ukuran 26% lebih kecil dari gambar format PNG dan citra lossy yang lebih kecil (25-34%) dibanding format JPEG. Untuk gambar dengan transparansi, format WebP memiliki file berukuran 3x lebih kecil dari PNG.

Meskipun begitu, dari percobaan yang penulis lakukan, format gambar webP ini masih terdeteksi sebagai salah satu faktor yang memperlambat kecepatan loading di page speed insight, meskipun ukuran filenya memang jauh lebih kecil dari file aslinya yang berformat PNG.

Berikut contoh perbandingan file size gambar antara JPEG dengan WebP yang saya copy dari laman sample WebP Gallery

perbandingan JPEG dan WEBP

Seperti terlihat pada contoh gambar diatas, ukuran file size gambar bisa dikompres dan direduksi sedemikian rupa tanpa mengurangi kualitas tampilan (visibilitas) yang sesungguhnya.


Tampilan File gambar format WebP


Oleh karena formatnya berbeda , maka tampilan file dari gambar format WebP ini tidak terlihat seperti file gambar lainnya yang disimpan dalam folder. Tipe filenya adalah Chrome HTML Document. Berikut contoh bentuk gambar file WebP dalam folder .


File WebP ini sewaktu saya coba tidak bisa di buka dengan menggunakan aplikasi pembuka photo di windows pada umumnya , namun ia bisa dibuka dengan aplikasi browser Chrome dan Opera (saat dicoba dengan firefox tidak bisa)


Converter Tool Gambar Format WebP


Untuk meng-convert / mengubah bentuk file gambar dari PNG ataupun JPEG ke format gambar WebP ini, kita bisa menggunakan aplikasi XnConvert yang bisa anda unduh gratis di www.xnview.com

Untuk menggunakannya juga cukup mudah, namun anda perlu mengubah terlebih dahulu format gambar yang dihasilkan yaitu
  1. Pilih Tab Output
  2. Klik pada tab dropdown bagian Format
  3. Lalu pilih format WebP
setting hasil output gambar menjadi format webp


Untuk melakukan converting /pemformatan gambar, berikut langkahnya.
  1. Lanjutkan dengan mengklik Tab Input
  2. Klik +Add files
  3. Pilih file yang akan di convert
  4. Klik Convert.
memformat gambar ke format webp

Selamat, Gambar format WebP sudah tersedia, Anda tinggal membukanya di folder tempat anda menyimpan file convert WebP tersebut.


Kesimpulan


Meskipun sudah lama dikenalkan, sepertinya tidak banyak yang mengaplikasikannya. Hal ini (menurut saya) dikarenakan format file tersebut tidak familiar untuk dibuka melalui aplikasi photo viewer ataupun aplikasi untuk melihat gambar lainnya.

Namun untuk pengelola blog, format gambar ini cukup efektif untuk menekan kapasitas file gambar yang akan di upload sebagai postingan.

Format gambar Webp ini memang ditujukan agar gambar yang disimpan kedalam web bisa menjadi lebih kecil sekaligus berguna untuk mempercepat loading, dimana gambar yang dihasilkan tetap bisa memberikan tampilan yang nyaman untuk dilihat.

Demikianlah artikel tentang Gambar Format WebP, File kecil loading lebih cepat ini bisa saya sampaikan, semoga bisa bermanfaat.

6 comments:

  1. Format WebP sebuah inovasi penting dan terbaru buat pengelolaan situs juga saya, untuk ngepress gambar yang masih berukuran besar apalagi jika artikel yang harus memakai banyak file gambar.

    Namun saya lihat Aplikasi ini hanya pada komputer dan apps Store, saya harap kedepan bisa di Android biar lebih Mobile Frendly dan saya bebas memakainya dimana saja. Terimakasi infonya Mas.

    ReplyDelete
    Replies
    1. Ya sepertinya masih kurang maksimal mas hasilnya. Mungkin karena banyak faktor penghambat sehingga pengembangannya tidak lagi agresif.

      Delete
  2. Saya kira loading blog yang lambat itu disebabkan karena template blog. Ternyata banyak faktor salah satunya adalah gambar yang terlalu besar.

    setelah lihat di analitik dan saran yang diberikan, memang dianjurkan untuk mengompres gambar menjadi berukuran lebih kecil.

    makasih informasinya, Mas.
    salam dan semoga sehat selalu

    ReplyDelete
    Replies
    1. Iya benar mas. Selain template blig, gambar bisa menjadi penghambat kecepatan loading seperti pada artikel sudah pernah saya posting sebelumnya.

      Terima kasih mas. Salam dan sehat selalu juga buat mas fajrin 😊

      Delete
  3. Saya masih ragu menggunakan format gambar ini mas, apa nantinya gambar bisa tampil di semua browser ketika membuka blognya mas

    ReplyDelete
    Replies
    1. Kalau ragu mending ngga usah semua.karena yg saya coba juga sedikit sulit mengelolanya di folder.

      Di coba aja pada gambar-gambar yg tidak memagang peranan penting di halaman (mis: gambar tutor) kalau gambar pemanis bolehlah dicoba.

      Delete

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.