Cara Mengonversi Gambar ke WebP di WordPress dengan Imagify

Diterbitkan: 2021-07-19

Tertarik untuk mengonversi gambar Anda ke WebP di WordPress? Sapa Imagify, plugin gratis kami yang mengoptimalkan gambar Anda dan mengonversinya ke WebP.

Dalam panduan kami, kami menjelaskan cara memberikan gambar berkualitas tinggi tanpa memperlambat situs Anda. Jika Anda sudah memiliki ratusan gambar PNG atau JPG di situs web Anda, Imagify akan mengoptimalkannya dan mengonversinya ke WebP secara otomatis.

Kedengarannya menjanjikan? Mari gali format WebP modern ini untuk melihat bagaimana hal itu memengaruhi kinerja dengan mengecilkan ukuran file gambar hingga 35%!

Apa itu format WebP?

WebP adalah format gambar yang menawarkan kompresi gambar dengan mengurangi ukuran file tetapi tidak mengurangi kualitasnya. Dikembangkan oleh Google, WebP adalah format file gambar modern yang berisi kompresi lossless dan lossy. Format ini dapat mengurangi ukuran file gambar hingga 35% lebih kecil dari gambar JPEG dan PNG dengan tetap mempertahankan kualitas tinggi. Terbaik dari kedua dunia, bukan?

Pengunjung menginginkan kualitas DAN situs web yang cepat. Itulah mengapa ada format baru yang keluar dalam beberapa tahun terakhir yang dirancang dengan meminimalkan file sambil tetap mempertahankan kualitas. "WebP" jelas merupakan pembaruan yang paling menonjol dalam 10 tahun terakhir.

Pada contoh di bawah – disediakan oleh situs web Google WebP – kami membandingkan dua gambar dengan kualitas yang sama. Salah satunya adalah JPEG, yang lainnya adalah WebP, dan kami memperhatikan tiga hal, yaitu:

  • Kualitas gambar tetap sama dalam format JPEG atau WEBP
  • Ukuran file JPEG adalah 43,84 KB.
  • File WebP berukuran 29,61 KB, yang jauh lebih ringan daripada format JPEG.
JPEG vs WebP: kualitas sama tetapi ukuran berbeda - Sumber: Galeri WebP

Format WebP membantu Anda mencapai keseimbangan berikut: Gambar berkualitas tinggi dan ukuran file rendah .

Mengapa Anda Harus Mengonversi Gambar ke WebP

Manfaat utama format WebP adalah membuat file gambar yang lebih kecil sambil mempertahankan kualitas gambar yang sama. Akibatnya, kompresi gambar akan mempercepat situs web Anda.

Anda mungkin tidak menyadarinya, tetapi gambar memakan banyak ruang di server Anda. Tidak hanya menghabiskan penyimpanan seperti orang gila, tetapi juga dapat memperlambat situs web dan membuat pengunjung Anda kabur.

JPEG, PNG, dan GIF adalah format yang dapat dengan mudah dikonversi ke WebP:

  • JPEG : format paling umum, ideal untuk foto dan visual yang sangat kaya warna
  • PNG: format yang direkomendasikan untuk grafik, ikon, dan logo sederhana
  • GIF: untuk semua gambar animasi yang menandai pesan Anda

Google menjalankan studi kompresi WebP untuk melihat bagaimana webP dibandingkan dengan format JPEG dan PNG dalam hal ukuran file. Hasilnya menarik:

  • Gambar WebP 25% lebih kecil dari gambar PNG.
  • Gambar WebP 25-35% lebih kecil dari gambar JPEG.

Hasil ini menunjukkan bahwa WebP dapat memberikan peningkatan kompresi yang signifikan dibandingkan JPEG dan PNG. Pada grafik di bawah, kita melihat bahwa gambar WebP secara konsisten membutuhkan lebih sedikit bit per piksel daripada JPEG:


Selanjutnya, Google PageSpeed ​​Insights menyarankan Anda untuk menyajikan Gambar dalam format generasi berikutnya (WebP) , yang berarti unduhan lebih cepat dan konsumsi data lebih sedikit. Alat kinerja web juga menyarankan menggunakan plugin WordPress untuk mengompres dan mengonversi gambar Anda ke format yang optimal.

Tebak siapa yang ada dalam daftar? Bayangkan!

Bagaimana Mengonversi Gambar ke WebP

Imagify adalah salah satu plugin WordPress terbaik untuk mengonversi gambar Anda ke WebP dan mengoptimalkannya.

Kita semua tahu alat online yang dapat mengonversi banyak format (dari JPG ke PDF, misalnya). Alat tersebut tidak ramah pengguna, dan sebagian besar tidak akan mengizinkan Anda melakukan konversi massal secara gratis.

Sebuah plugin mungkin lebih mudah untuk mengonversi file Anda ke WebP. Mari kita lihat mengapa. Hal-hal menjadi sedikit lebih rumit ketika datang ke WordPress. WordPress 5.8 memungkinkan Anda mengunggah gambar WebP tetapi tidak mengonversi format aslinya ke WebP .

Itu sebabnya kami menyarankan Anda mengunggah gambar PNG dan JPEG dan biarkan Imagify melakukan pekerjaan itu. Plugin Imagify dapat secara otomatis mengonversi gambar Anda ke format WebP di dasbor WordPress Anda . Ini akan mengoptimalkan file JPG, GIF, atau PNG di situs web Anda dengan mengecilkannya untuk pengalaman menjelajah yang lebih cepat tanpa mengorbankan kualitas. Jika Anda memiliki gambar yang sudah ditambahkan ke halaman yang Anda terbitkan, jangan khawatir, Imagify juga akan mengonversinya.

Bayangkan secara otomatis mengoptimalkan dan mengonversi gambar WordPress ke WebP:

  • Saat mengunggah gambar baru
  • Pada yang sudah ada (fitur massal, yang akan menghemat waktu Anda yang berharga)

Terlebih lagi, Imagify membantu Anda membuat foto dimuat lebih cepat di WordPress. Plugin ini memampatkan banyak gambar dalam format aslinya dan mengubah ukuran gambar ke satu set dimensi maksimal tanpa kehilangan kualitas. Ini bukan hanya alat konverter. Ini juga merupakan plugin yang membantu situs WordPress Anda berjalan lebih cepat!

Ikuti panduan langkah demi langkah kami untuk melihat cara mengonversi gambar ke WebP menggunakan Imagify:

Langkah 1 – Unduh Immagify secara gratis

Aktifkan plugin dan buat KUNCI API gratis.

(Buka kotak masuk email Anda untuk mendapatkan kunci API Anda dan tempel di kotak di bawah).

Langkah 2 – Menyiapkan opsi konversi WebP

Setelah Anda menambahkan kunci Imagify API, buka Pengaturan → Imagify dan gulir ke bagian “Optimization Webp format”. Pastikan kedua kotak dicentang seperti di bawah ini:

Konversi format webp - Bayangkan dasbor

Kotak pertama memberi tahu Imagify untuk mengonversi gambar Anda ke WebP; yang kedua menunjukkan plugin untuk menyajikan gambar WebP tersebut ke browser yang didukung.

Langkah 3 – Saatnya mengonversi gambar Anda

Buka Media -> Optimasi Massal dan tekan tombol biru Imagify'em all :

Itu dia! Anda bisa mendapatkan situs web yang lebih cepat hanya dalam tiga langkah dengan Imagify.

Harga Imagify (dan ya, paket gratis tersedia!)

Paket pemula: Imagify memungkinkan Anda untuk mengoptimalkan dan mengonversi 20 MB gambar per bulan secara gratis (sekitar 200 gambar).

Paket pertumbuhan: Jika Anda membutuhkan lebih dari itu, Anda dapat meningkatkan ke paket berbayar, dengan biaya $4,99/bulan untuk 500 MB (~5.000 gambar).

Paket tak terbatas: $9,99 per bulan untuk data tak terbatas. Itu bagus jika Anda memiliki situs web dengan ribuan gambar untuk dioptimalkan.

Harga dapat ditemukan di situs web resmi Imagify.

Dampak WebP pada Performa dengan Imagify

Sekarang mari kita lihat cara menggunakan Imagify untuk mengurangi ukuran file media.

Untuk analisis, kami akan menjalankan dua skenario menggunakan dasbor WordPress kami:

  1. Saya akan mengunggah GIF, PNG, JPG dan memeriksa ukuran file untuk masing-masing.
  2. Saya akan mengaktifkan Imagify, mengonversi 3 file saya dari atas ke WebP dan memverifikasi ukuran file baru.

Mari kita jalankan analisisnya.

  • Dampak Imagify pada ukuran file GIF saya:
Ukuran file GIF – Tanpa Bayangan Format WebP – Dengan Imagify
816 KB 512 KB
  • Dampak Imagify pada ukuran file PNG saya:
Ukuran file PNG – Tanpa Bayangan Format WebP – Dengan Imagify
67 KB 28 KB
  • Dampak Imagify pada ukuran file JPG saya:
Ukuran file JPG – Tanpa Bayangan Format WebP – Dengan Imagify
755 KB 525 KB

Apakah Imagify mengurangi ukuran file saya saat mengonversinya ke WebP?

Jawabannya iya! Seperti yang Anda lihat, semua ukuran file telah berkurang secara signifikan setelah menggunakan Imagify dan format WebP. Berikut rekapnya:

  • GIF → WebP : ukuran berubah dari 816 KB menjadi 512 KB
  • PNG → WebP : ukuran berubah dari 67 KB menjadi 28 KB
  • JPEG → WebP : ukuran berubah dari 755 KB menjadi 525 KB.

Menggunakan Imagify untuk Meningkatkan Tingkat Kinerja Saya di Google PageSpeed ​​Insights

Untuk audit kinerja ini, saya telah membuat halaman yang menampilkan beberapa media: foto JPG, elemen PNG, dan GIF.

Kami akan menggunakan Google PageSpeed ​​Insights dan menjalankan dua skenario berikut:

  1. Skenario #1 – Audit kinerja halaman saya (gambar format PNG dan JPG + GIF) – tanpa Imagify – tanpa WebP
  2. Skenario #2 – Tingkat performa halaman saya setelah mengonversi semua media saya ke WebP dengan Imagify

Skenario #1 : Tanpa Imagify – Tanpa WebP

Saya berwarna oranye di Google PageSpeed ​​Insights (88/100), dan tidak semua Data Web Inti saya berwarna hijau:

Audit tanpa Imagify - Sumber: PSI

Di bagian peluang, kita dapat melihat beberapa masalah yang terkait dengan format gambar saya, seperti "Gunakan format video untuk konten animasi" atau "Sajikan Gambar dalam format generasi berikutnya".

Bagian Peluang - PSI

Jika saya memiliki 50 halaman dengan 200 produk, saya akan sangat khawatir untuk mengonversinya secara manual… Tapi untungnya, Imagify bisa melakukannya untuk saya!

Skenario #2: Format WebP dengan Imagify

Sekarang mari kita lihat hasilnya setelah mengonversi semua media ke WebP menggunakan Imagify.

Nilai kinerja saya meningkat : Saya berada di zona hijau, dengan skor 99/100!

Skor hijau saya berkat Imagify - Sumber: PSI

Di bagian peluang, semua masalah terkait gambar saya hilang:

Masalah terkait gambar diselesaikan berkat Imagify - Sumber: PSI

Membungkus

WebP jelas merupakan cara yang efisien untuk mengurangi ukuran gambar dan membuat situs WordPress Anda dimuat lebih cepat. Format modern ini menghemat penyimpanan rata-rata ~ 25% lebih banyak daripada file JPEG atau PNG. Kabar baik lainnya adalah pengalaman pengguna tidak akan terpengaruh, mengingat kualitas gambar tetap sama.

Juga, jangan khawatir jika Anda memiliki setidaknya 200 dari satu jenis file gambar (png atau .jpg) dalam berbagai ukuran karena Plugin Imagify kami yang kuat akan menggantikannya dengan format WebP yang dioptimalkan tanpa mengorbankan kualitas.

WordPress 5.8 akan menambahkan dukungan untuk gambar WebP (tetapi tidak akan mengonversinya dari format asli ke WebP). Itu sebabnya kami tetap menyarankan Anda menggunakan plugin untuk mengonversi file Anda. Inilah alasannya:

  • Kemampuan untuk mengunggah gambar WebP langsung ke Perpustakaan Media tidak akan memperbaiki ~5% pengunjung yang browsernya tidak mendukung WebP.
  • Gambar dan gambar biasanya dalam format JPG atau PNG, jadi untuk mengunggahnya dan mengonversinya secara massal, plugin seperti Imagify dapat menghemat ratusan jam.

Bagaimana dengan mengambil Imagify untuk test drive? Gratis untuk sekitar 200 gambar per bulan.

Dan ingat, jika Anda memiliki pertanyaan tentang penggunaan WebP di situs WordPress Anda, silakan tanyakan kepada kami di komentar di bawah!