Panduan Lengkap untuk Menggunakan Format Gambar WebP

WebP, atau secara tidak resmi diucapkan sebagai weppy, adalah format gambar yang diperkenalkan oleh Google Developers sekitar 5 tahun yang lalu. jika Anda seorang desainer web, atau pengembang yang berusaha mengurangi dan mengoptimalkan ukuran file gambar Anda, apa yang mampu dilakukan WebP harus membuat Anda tersenyum..

Secara singkat, berikut adalah beberapa hal penting yang perlu Anda ketahui tentang format gambar yang tidak begitu baru tapi tetap keren ini:

• WebP berjalan dengan ekstensi file .webp.
• WebP mengadopsi kompresi lossy dan lossless.
• Gambar webP lossy berpotensi 25-34% lebih kecil dari JPEG.
• Gambar WebP lossless berpotensi 25% lebih kecil dibandingkan dengan PNG.
• WebP mendukung transparansi tanpa kehilangan, yaitu PNG dengan saluran alfa.
• WebP mendukung animasi. mis. GIF animasi.

Singkatnya, WebP mampu secara signifikan mengurangi ukuran file gambar JPEG, GIF, PNG. Ini penyegar di WebP yang harus Anda periksa sebelum kita membahas hal-hal yang menyenangkan.

Eksperimen

Hal terbaik tentang klaim di Web adalah bahwa kita selalu dapat menjalankan eksperimen untuk memeriksa kebenaran dan keaslian. Berikut adalah beberapa percobaan yang saya lakukan untuk mengetahuinya seberapa kecil suatu gambar berpotensi mendapatkan setelah mereka dikonversi dari berbagai format gambar (JPEG, PNG dan GIF) ke WebP.

1. JPEG - Gambar Rugi

Ini gambar JPEG acak yang saya ambil dari Pexels. Ukuran file asli - 165kb. ↓

Gambar dioptimalkan dengan JpegMini. Ukuran file baru - 101kb. ↓

Akhirnya, gambar yang sama dikonversi ke format WebP. Finalisasi file - 70kb. ↓

Di samping catatan: Berikut adalah ukuran file yang berbeda jika gambar yang sama dikonversi ke format berikut:

• GIF - 285kb
• PNG 8 - 241.2kb
• PNG 24 - 657.6kb

2. PNG - Gambar Tanpa Rugi

Sekarang, mari kita coba dengan PNG dengan transparansi. (Sumber). Ukuran file asli - 587kb. ↓

Inilah gambar yang dioptimalkan dengan tinypng. Ukuran file baru - 278kb. ↓

Dan terakhir, gambar dikonversi ke format WebP. Finalisasi file - 112kb. ↓

3. GIF animasi

Ketika dikonversi ke WebP, gambar JPEG naik dari 165kb ke 70kb, sedangkan gambar PNG berubah dari 587kb ke 112kb.

Mari kita lihat bagaimana harga GIF animasi:

• Ukuran file asli - 6.8mb
• Ukuran file WebP - 6.3mb

Ringkasan:

Berikut adalah tabel untuk merangkum seluruh percobaan:

	Rugi (JPG)	Lossless (PNG)	Animasi-GIF
Asli	165kb	587kb	6.8mb
Dioptimalkan dengan alat	101kb	278kb	-
Format WebP	70kb	112kb	6.3mb

Tanpa banyak memikirkan perhitungan matematis, angka-angka itu menunjukkan pengurangan besar ukuran file, dan menilai dari gambar, Anda tidak dapat benar-benar mengetahui perbedaan dalam hal kejelasan dan resolusi. Ukuran file yang lebih kecil dan lebih ringan dengan tingkat kualitas gambar yang sama, WebP jelas layak untuk dilihat.

Konversi ke WebP dengan Alat

Jika Anda sudah siap dan ingin mulai merilis gambar dalam format WebP, mari selami dan lihat bagaimana Anda dapat mengkonversi gambar Anda dengan mudah ke format ini. Semua metode yang disebutkan di bawah ini bervariasi dalam hal kontrol, kemudahan penggunaan, dan kenyamanan. Pilih racunmu.

WebPonize untuk Mac

WebPonize mungkin merupakan cara termudah dan tercepat untuk mengonversi gambar ke format WebP di Mac. Yang perlu Anda lakukan hanyalah drag dan drop gambar Anda ke WebPonize dan itu akan melakukan konversi. Anda akan menerima ouput, ukuran sebelum, ukuran sesudah dan% pengurangan dari file asli. [Unduh WebPonize]

Webpconv untuk Windows

Jika Anda menjalankan Windows, Webpconv adalah aplikasi yang harus Anda instal. Itu juga datang dalam versi portabel sehingga Anda dapat menjalankannya secara mandiri di flash drive Anda. [Unduh Webconv]

Konversi dengan Baris Perintah

Jika Anda merasa culun, Anda mungkin ingin keluar dari konversi menggunakan baris perintah. cwebp mengkonversi gambar JPEG, PNG, atau TIFF Anda ke dalam format WebP dan dwebp mengubahnya kembali ke format PNG. Mari kita lihat bagaimana ini bekerja.

catatan: Panduan berikut untuk Mac OS X. Untuk pengguna Windows dan Linux, klik di sini.

Menyiapkan MacPort di Mac OSX

Pertama, pastikan Anda telah menginstal Xcode, kemudian ikuti langkah-langkah ini:

1. Unduh dan instal MacPorts. Jika Anda sudah menginstal MacPorts di Mac Anda, lanjutkan ke langkah 2.
2. Meluncurkan Terminal.
3. Ketik "sudo port selfupdate"dan tekan enter. Ini akan memperbarui MacPorts Anda ke versi terbaru.

   

4. Selanjutnya, ketik "sudo port install webp"dan tekan enter. Ini akan menginstal libwebp (Perpustakaan WebP).

   

Itu dia. Sekarang mari kita lihat cara mengkonversi gambar ke WebP menggunakan baris perintah.

Perintah untuk Mengkonversi / Mengembalikan

Berikut adalah perintah untuk:

I - Mengonversi file gambar JPEG / PNG ke format WebP

Format: cwebp -q [image_quality] [JPEG / PNG_filename] -o [WebP_filename]

Contoh:

cwebp -q 80 example.png -o example.webp 

II - File gambar WebP Terselubung kembali ke PNG

Format: dwebp [WebP_filename] -o [PNG_filename]

Contoh:

dwebp image.webp -o image.png 

Lebih: Jika Anda membatalkan konversi dengan cara lain, berikut adalah petunjuk untuk menggunakan tugas Grunt dan Gulp untuk mengonversi file JPG / PNG ke WebP.

Konversi Dengan Alat Daring

Jika Anda tidak ingin menginstal aplikasi apa pun pada sistem operasi Anda untuk melakukan tugas ini, pilih alat online ini sebagai gantinya. Berikut adalah beberapa yang saya ketahui:

• Online-converter.com
• Webp-convertor.com
• Zamzar

Tip: Jika Anda google konversi webp online , Anda mungkin akan menemukan lebih banyak opsi.

Plugin Photoshop

Anda mungkin senang mengetahui bahwa ada juga Plugin Photoshop yang memungkinkan Anda untuk menyimpan gambar ke format WebP melalui Photoshop. Plugin ini mendukung Mac OS X (CS 2- CS 6) dan Windows (32 bit & 64 bit). [Unduh plugin di sini.]

Catatan: Hanya berpikir Anda harus tahu bahwa saya mencobanya di Photoshop CC. Tidak bekerja di sana.

Dukungan Browser WebP

Terakhir, mari kita bicara tentang kompatibilitas. Saat ini, Anda dapat melihat gambar format WebP di browser berikut (ref):

• Chrome / Chrome untuk iOS
• Opera / Opera Mini

Tidak terlalu beruntung FireFox dan Safari, yang masih tidak mendukung format WebP secara asli. Namun, Anda dapat menggunakan pustaka Javascript WebPJS untuk mengkonversi gambar WebP menjadi string dataURI di situs klien.

Kembali ke format gambar lain

Itu selalu merupakan ide yang baik untuk menggunakan fallback untuk menghindari menampilkan kesalahan gambar karena browser yang tidak didukung. Dalam hal ini, fallback akan ke gambar dalam format JPG atau PNG. Begini cara Anda melakukannya.

  source srcset = "example.webp 1x" type = "image / webp">   

Untuk kode ini, gambar / panduan lengkap menggunakan webp-image-format_13.jpg akan dimuat jika pengguna menggunakan Firefox atau Safari.

Pratinjau gambar WebP

Anda dapat mempratinjau gambar WebP di browser Chrome dan Opera. Tetapi jika Anda ingin melakukannya secara lokal di mesin Anda, Anda akan memerlukan beberapa alat.

Pengguna Mac dapat menggunakan WebPQuickLook untuk mempratinjau gambar format WebP menggunakan fungsi Tampilan Cepat (dengan gambar yang dipilih atau disorot, tekan bilah spasi).

Untuk Pengguna Windows, WebPCodec akan menampilkan pratinjau gambar kecil gambar WebP di File Explorer. Baik padanan WebP dan JPEG akan ditampilkan. Pada OS Window tertentu yang didukung (Vista, 7, 8), gambar WebP juga dapat ditampilkan pada Windows Photo Viewer.

Lebih: ReSCR.it memberikan gambar dalam format WeBP secara otomatis dan tersedia jika Anda menyimpan gambar Anda dengan MaxCDN. (Baca lebih lajut)

Referensi lebih lanjut

• Mengubah GIF Animasi ke WebP
• Cara kerja WebP
• Menyebarkan WebP melalui Negosiasi Konten Terima
• Lebih cepat, web lebih kecil dan lebih indah dengan WebP
• Menyebarkan Format Gambar Baru di Web
• Dokumentasi WebP API