Widget HTML #1

Optimasi Gambar - Mempercepat akses Blog

Menggunakan gambar WebP mempercepat memuat blog optimasi - mantankode

Format WebP sering saya gunakan pada blog ini terutama pada semua gambar yang saya gunakan. saya cukup tertarik menggunakannya karena memang karena tidak perlu lagi susah-susah untuk optimasi dengan kompres ukuran gambar baik itu secara online atau offline.

untuk ukurannya bisa kita atur sekecil mungkin tampa harus merusak hasilnya. yang paling saya sering gunakan ukurannya antara 1-30KB tergantung dari isi gambarnya.

Apa itu WebP

WebP adalah format gambar yang menggunakan kompresi lossy dan lossless. Saat ini dikembangkan oleh Google, berdasarkan teknologi yang diperoleh dengan pembelian On2 Technologies. Sebagai turunan dari format video VP8, ini adalah proyek sejenis dengan format wadah multimedia WebM. (Akses Wikipedia:2020)

dengan menggunakan format gambar WebP ini membuat web lebih cepat dan gambar yang dihasilkan ukurannya lebih kecil. ini yang saya suka dari WebP.

Gambar WebP juga bisa transparansi/transparan, yang bisa menghasilkan file 3x lebih kecil dibandingkan dengan PNG.

Gambar lossless WebP berukuran (26% lebih kecil) dibandingkan dengan PNG. Gambar webp lossy adalah (25-34% lebih kecil) dari gambar JPEG yang sebanding pada indeks kualitas SSIM yang setara.

WebP juga merupakan rekomendasi dari google untuk mempercepat tampilan web atau blog (Akses Google Developers:2020)

Contoh Besar Ukuran (jpg,png,webp)

disini saya menggunakan gambar bawaan dari windows picture (Chrysanthemum) yang memiliki ukuran original berupa 859KB.

Setalah itu saya melakukan perubahan format dan melakukan kompres. dan mencoba memilih berapa persen kualitas gambar yang baik terkompres unyuk menghasilkan ukuran terkecil. berikut ini hasil uji coba tadi.

 Jenis Ukuran Kualitas
 jpg 859KB Asli
 jpg 165KB -81%
 png 241KB -80%
 webp 43KB -65%

Menggunakan gambar WebP mempercepat memuat blog - mantankode

Download Hasil Kompress dan Asli

bisa diliat dari tabel diatas, format WebP masih ungul dengan ukurannya yang kecil dengan kualitas yang sama dengan png dan jpg.

Compiling the Utilities

Bagi kamu yang suka menggunakan dengan perintah di terminal bisa ikuti referensi ini - Compiling the Utilities

Photoshop plug-in

nah bagi yang menggunakan aplikasi berupa Photoshop bisa menggunakan plugin ini. kita bisa langsung menyimpan gambar dan mengatur kualitas dan melihat ukuran yang sempurna.

biasanya saya antara 1KB-30KB (tergantung berapa banyak gambar yang ditampilkan)

Download Plug-in WebP di Photoshop disini

Cara Install di Windows

  1. Salin file plug-in WebPShop.8bi di WebPShop_0_2_1_Win_xxx (Sesuaikan dengan jenis windows anda pakai 32/64)
  2. dan pindahkan kedalam folder C:\Program Files\Adobe\Adobe Photoshop\Plug-ins untuk x64
  3. tutup Photoshop dan buka kembali.

Cara Install di Mac

  1. salin file WebPShop.plugin di bin/WebPShop_0_3_0_Mac_x64
  2. dan pindahkan kedalam folder Applications/Adobe Photoshop/Plug-ins
  3. tutup dan buka kembali photoshop.

Untuk macOS 10.15+, apabila ada keterangan "WebPShop.plugin cannot be opened because the developer cannot be verified" dapat digunakan dengan terminal (Finder > Applications > Utilities)

sudo xattr -r -d com.apple.quarantine "/Applications/Adobe Photoshop 2020/Plug-ins/WebPShop.plugin"

Cara Penggunaan Plug-in

Agar anda tidak binggung cara penggunaannya, maka kamu perlu tau sedikit biar ketika save as tidak binggung karena tidak ada pilihan WebP.

  • Gambar harus dalam mode rgb color, jika anda impor dari file cmyk. bisa diubah dengan klik Image > Mode > RGB Color

Menggunakan gambar WebP mempercepat memuat blog SETTING PLUG-IN

Mode RGB Color

  • Setelah itu bisa di Save As > WebP (*biasanya ada di paling bawah).

Tool Online Convert Image to WebP

Bagi anda yang tidak mempunyai Photoshop atau tidak mengerti menggunakan fitur 2 point diatas. maka bisa menggunakan tool dibawah ini.

Tools ini memgubah semua jenis gambar menjadi format WebP.

Buka Tools

Perlu kawan ketahui gambar yang anda kompres di tool ini tidak tersimpan diblog mantankode. jadi tidak perlu takut akan penyalahgunaan gambar anda.

Penutup

Sudah sampai akhir penutupan untuk pembahasan Menggunakan Gambar WebP untuk mempercepat loading blog. jadi sobat jatuh kepada format gambar apa yang anda senanggi?

Saya tunggu sanggahannya di kolom komentar, terima kasih sudah mampir.

Posting Komentar untuk "Optimasi Gambar - Mempercepat akses Blog"