Format Gambar WEBP, SVG: Untuk Membuat Loading Blog Jadi Ngebut

Diposting pada

Berawal dari saya merasa kalau website saya ini loadingnya masih lambat. Kalah cepat dibandingkan dengan website-website besar, sekelas tempo versi amp dengan ribuan artikelnya.

Saya coba menganalisa penyebanya melalui gtmetrix serta pagespeed insight google. Hasil gtmetrix cukup memuaskan untuk desktop, kadang A, kadang B.

Namun kurang memuaskan untuk versi mobile. Amat buruk skornya, di level 29 yang saya dapati dari hasil tes pagespeed insightnya google. Untuk itu saya terus mencoba melakukan perbaikan-perbaikan agar performa blog loadingnya jadi ngebut.

Menggunakan Format Gambar WEBP

Saya tidak sengaja melihat sebuah gambar dari demo_nya tema superfast, yang dibuat sama mas Gian MR pembuat tema wordpress yang saya gunakan ini.

Disitu saya baru nggeh, kalo format gambar yang digunakan itu bukanlah JPEG, atau PNG. Melainkan formatnya WEBP.

Mendadak saya-pun penasaran, ingin tahu mengenai format tersebut. Saya googling dulu, melihat keunggulan dan kelemahannya. Berikut ini yang saya dapati:

Keunggulan format WEBP

  1. Ukurannya sangat kecil
  2. Berbasis Bitmaps, sehingga bisa untuk mengolah berbagai model gambar
  3. Support transparansi, bahkan bisa menampilkan gambar transparan seperti png
  4. Ukurannya sangat kecil. Saya sudah coba kompress, dari file berukuran 1,24 MB menjadi 68,4 Kb. Amazing !!!

Kelemahan gambar WEBP

  1. Belum banyak di-support oleh device atau software
  2. Sebuah format file gambar terbaru yang masih terus dikembangkan
  3. Belum ada software yang mengolah khusus menghasilkan output gambar bergormat webp.

Gambar berformat webp ini dikembangkan oleh Google.

Menerapkan Jenis Gambar SVG

Gambar SVG ini adalah gambar yang basisnya vector dan kode. Namanya vector, berarti berlawanan dengan bitmaps. Saya sudah mencoba membuat gambar dengan format SVG ini melalui software Corel Draw X7.

Pada desain yang saya buat tersebut, terdapat tiga elemen yaitu teks, objek kotak, serta gambar png hasil upload dari PC.

Ketika saya desain sedemikian rupa, untuk dikombinasikan supaya bagus. Lalu saya export dalam format SVG.

Betapa kagetnya ketika mendapati bahwa hasil yang tampil hanya objek kotak (rectangle), dan teksnya (font) saja. Bagian gambarnya, tidak ikut ter-export.

Jadi jelas, SVG ini nggak bisa digunakan untuk menghasilkan gambar yang ada bagian berformat jpeg/png. Sementara Software corel draw, bisa digunakan untuk mengolah gambar dengan output file berekstensi SVG.

Kelemahan Gambar Format SVG

Karena gambar svg ini merupakan serangkaian kode, sehingga kode tersebut ketika digunakan dalam sebuah situs website akan memungkinkan untuk diubah. Masih bisa diubah ini yang memicu masalah.

Maka, gambar svg ini memiliki kerentanan dari sisi keamanan. Itu sebanya, kenapa wordpress tidak mensupport format file berekstensi SVG. Karena alasan keamanan, rupanya.

Namun bukan berarti tidak bisa menggunakannya dengan aman. Ada dua cara yang bisa dilakukan untuk mengupload gambar SVG ke wordpress. Pertama menggunakan kode php yang nanti diletakkan pada bagian functions.php atau dengan menggunakan plugin.

Saya disarankan untuk menggunakan plugin bernama SVG Support , sebab lebih mudah untuk melakukan setting keamanan berupa hanya administrator saja yang berwewenang terhadap kemungkinan adanya perubahan kode pada gambar jenis SVG ini.

Saya juga sudah pernah mencoba menginstall pluginnya. Sangat mudah, serta terdapat rule hanya admin yang boleh mengendalikan format gambar svg-nya. Namun, saya saat ini tidak meneruskan menggunakan plugin ini. Sebab, saya lebih memilih untuk menggunakan jenis gambar berformat WEBP.

Kelebihan Gambar SVG

Kelebihan gambar svg sama seperti webp, yaitu ukurannya sangat kecil. Ini akan sangat membantu website dalam melakukan loading dengan lebih cepat. Gambar SVG bisa dibuat dengan software seperti Corel Draw, Adobe XD.

Manfaat Gambar WEBP untuk Website & Blog

webp image, with xnconvert tools

Menggunakan gambar berformat WEBP, akan memberikan keuntungan bagi kita selaku pemilik blog yaitu berupa kecepatan loading website. Selain itu, sudah pasti space pada hosting juga akan menyusut drastis.

Ini menjadikan penghematan dari sisi kapasitas hardisk server. Sudah websitenya loading cepat, harddisk penyimpanannya juga hemat. Mungkin perlu dipertimbangkan untuk menggunakan format gambar webp ini untuk blog kalian.

Hanya butuh sedikit kesabaran saja, dalam membuat gambar webp. Yaitu dengan cara mengconvertnya terlebih dahulu dengan menggunakan alat bantu software bernama XNConvert.

Cara Mengconvert Gambar JPG, PNG menjadi format WEBP

Untuk mendapatkan gambar webp. Memang tidak bisa langsung dihasilkan dari olah software. Ini mesti dikonvert dulu menggunakan aplikasi, salah satunya xnconvert yang bisa diunduh secara gratis.

Cara melakukannya yaitu:

  1. Buka XNConvert, pada tab “Input” klik tombol “Add Files…” kemudian pilih gambar yang akan diconvert.
  2. Jika sudah, pergi ke tab “Output” lalu ubah formatnya menjadi WEBP.
  3. Tentukan folder, dimana file hasil output itu akan diletakkan.
  4. Klik “Convert” disebelah kanan bawah. Done !

Software Untuk Membuat Gambar WEBP

Corel Draw, tidak bisa.

Saya sudah coba membuatnya dengan corel draw. Sebelum saya membuat gambarnya, terlebih dahulu saya cek format output yang tersedia pada corel draw.

Rupanya, tidak ada format webp pada corel draw. Ahirnya saya otomatis, tidak melakukan percobaannya.

Adobe XD, tidak bisa.

Kemudian saya coba menggunakan adobe xd juga, karena kebetulan saya menginstallnya di komputer. Ketika saya cek pada output exporternya, juga tidak tersedia format webp.

Akhirnya karena belum menemukan solusi, saya googling dan menemukan sebuah aplikasi Converter bernama XNConvert dari XNView.

XnConvert

Tools, untuk mengonvert file gambar menjadi berekstensi webp. Ini bisa digunakan secara OFFLINE. Alamat situs website resminya kalo temen-temen mau makai juga disini: https://xnview.com

Saya tambah senang ketika lihat ternyata merupakan freeware, alias bisa dimanfaatkan secara gratis. Tidak berbayar.

Namun, jika kita berlebih rezeki, sebaiknya kita berdonasi. Atau membeli paket lisensi untuk penggunaan skala perusahaan.

Hasi Kompresi Gambar

Teman-teman, bisa lihat sendiri hasil kompresinya melalui gambar dibawah ini.

hasil kompresi gambar dari png ke webp menggunakan xnconvert

Referensi:

https://www.niagahoster.co.id/blog/svg-adalah/

https://developer.android.com/studio/write/convert-webp?hl=id

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

This site uses Akismet to reduce spam. Learn how your comment data is processed.