-->

Menggunakan gambar WebP mempercepat memuat blog

Cara ampuh untuk mempercepat dan optimasi loading web dengan menggunakan gambar format webp.

Daftar Isi [Tutup]
    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%


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


    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.

    Terus membaca

    Show comments
    Hide comments


    MANTANKODE.NET Kebijakan Komentar, Silahkan berkomentar sesuai ketentuan perundang-undangan!
    Baca Kebijakan Berkomentar kami sebelum berkomentar.

    Notification

    Donasi yang anda berikan akan digunakan untuk, pengembangan blog ini.

    Kesehatan admin dan lebih semangat berbagi tips dan informasi.

    Yang telah membantu saya ucapkan terima kasih

    Donasi: Trakteer

    Done
    Night Mode