Format gambar yang umum digunakan untuk website adalah JPG dan PNG. Kedua format ini memiliki ukuran file besar jika digunakan tanpa dikompres terlebih dahulu. Ukuran file gambar yang besar akan menyebabkan halaman website dimuat lambat. Waktu muat halaman website (page speed) adalah salah satu sinyal pemeringkatan. Halaman website yang dimuat lambat memberi user experience yang buruk pada pengguna.
JPG adalah format gambar lossy. Ketika dikompres, format JPG memiliki ukuran file kecil, namun ada detail gambar yang hilang sehingga gambar hasil kompresi kemungkinan berbeda dengan gambar asli. PNG adalah format gambar lossless. Ketika dikompres, format PNG dapat menjaga kualitas dan detailnya, namun ukuran file tidak banyak berkurang atau masih tetap besar.
Alternatif lain dalam menggunakan format gambar untuk website adalah WebP. WebP adalah format gambar yang dikembangkan oleh Google untuk mengurangi ukuran file tanpa mengurangi kualitasnya. Fitur utama dari format ini adalah ukuran file yang lebih kecil dibanding format JPG dan PNG. Anda juga dapat memilih untuk menyimpan format WebP dengan kompresi lossless atau lossy.
Pengembang Google telah menyarankan bahwa format WebP dengan kompresi lossy bisa berukuran 25% sampai dengan 34% lebih kecil dibandingkan dengan format JPG. Demikian juga, format WebP dengan kompresi lossless bisa berukuran 26% lebih kecil dibandingkan dengan format PNG.
Biasanya, gambar akan diedit terlebih dahulu sebelum digunakan pada website. Salah satu aplikasi populer yang banyak digunakan untuk mengedit gambar adalah Adobe Photoshop. Anda perlu memastikan apakah Adobe Photoshop yang digunakan mendukung format WebP sehingga Anda bisa membuka, membuat, mengedit, dan menyimpan dalam format gambar ini.
Ada dapat memeriksa untuk mengetahui versi Adobe Photoshop yang digunakan. Adobe Photoshop versi 23.2 atau versi yang lebih baru sudah mendukung format WebP secara native. Bila Anda menggunakan Adobe Photoshop versi lama, Anda perlu menginstal ekstensi atau plugin WebPShop untuk bisa bekerja dengan format gambar WebP.
Untuk menginstal plugin WebPShop Adobe Photoshop di komputer Windows cukup mudah. Terlebih dahulu, Anda perlu mengunduh (download) plugin WebPShop dalam bentuk file binary dari laman GitHub dan kemudian menyimpannya di folder yang Anda tentukan sendiri.
Bila Anda menggunakan Adobe Photoshop CC, copy paste atau letakkan file binary WebPShop_0_4_3_Win_x64.8bi (1) yang sudah diunduh ke direktori atau folder di bawah ini (2).
JIka Anda menggunakan Adobe Photoshop versi lainnya, Anda bisa mencoba untuk menginstal dengan meletakkan file binary ke direktori atau folder di bawah ini.
Setelah selesai, Anda dapat menjalankan Adobe Photoshop untuk memeriksa apakah instalasi ekstensi atau plugin WebPShop sudah benar dan berfungsi. Klik menu Help (1), arahkan pointer mouse ke submenu About Plug-ins... (2), dan Anda kini dapat melihat submenu WebPShop...(3).
Cara lainnya adalah ketika Anda menyimpan pekerjaan melalui submenu Save atau Save As..., di kotak dialog Save atau Save As yang muncul, terdapat opsi WebPShop (*.WEBP;*.WEBP;) di kotak daftar tarik turun (drop-down box) Save as type.
