Ditulis oleh: Ditulis pada: 4/21/2018
Setelah sebelumnya kita bisa menggunakan image dengan format webp pada AMP HTML sesuai anjuran Google, kini kita akan mengkonversi image menjadi format webp. Sebenarnya banyak tool online yang bisa kita gunakan untuk mengkonversi image dari jpg, png, atau lainnya menjadi webp, namun file webp hasil konversi harus dihosting lagi untuk bisa ditampilkan di web AMP.Nah untuk itu sebenarnya kita bisa mengkonversi image menjadi format webp dan sekaligus menghostingnya yaitu dengan menggunakan Google Photos yang disediakan gratis oleh Google untuk semua penggunanya.
Google memberikan ruang sebesar 15GB Untuk menyimpan photo, email, dan drive. Untuk itu sangat disayangkan jika kita tidak memanfaatkannya salah satunya untuk menghosting sekaligus mengkonversi image menjadi webp.
Dengan Google Photos, kita dapat dengan mudah untuk menghosting sekaligus mengkonversi image menjadi webp. Untuk mulai menghosting dan mengkonversi image menjadi webp di Google Photos, tentunya yang pertama yang harus dilakukan adalah membuat imagenya.
Usahakan untuk membuat image dengan size yang kecil (di bawah 100kb) namun tetap memiliki kualitas yang tetap bagus.
Setelah gambarnya siap, silahkan upload di Google Photos, silahkan masuk ke url https://photos.google.com/ ini dengan akun Google Anda.
Silahkan klik tombol Upload di sebelah kanan atas halaman Google Photos kemudian silahkan upload gambar Anda. Setelah gambar berhasil diupload, silahkan klik pada gambar yang barusan berhasil diupload, seperti gambar di bawah ini.
Setelah itu akan masuk ke halaman selanjutnya dan silahkan klik pada thumbnail gambar yang diupload tadi dan akan masuk ke halaman seperti di bawah ini. Silahkan klik kanan pada gambar lalu Copy image address.
Selanjutnya Anda akan mendapatkan URL image dari Google Photos yang cukup panjang seperti berikut ini.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAM13bygZ6G9pLn0wnlA6r3yKd8Xpw4nft9LvnNiS4kh5czla90K0p5l4bHKOHKvMsrV6PpmWkgqMeH3tAQM1zKfgFss9Ax-_pV_NlDdCpUFzUggLXMwK6j-bLvDJJW8p1U-ebEz2uFY4/w1000-h600/no
Perhatikan kode
no yang terakhir pada URL tersebut seperti yang saya tandai, silahkan ganti menjadi rw untuk merubah format image menjadi webp, sehingga penampakannya seperti di bawah ini.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAM13bygZ6G9pLn0wnlA6r3yKd8Xpw4nft9LvnNiS4kh5czla90K0p5l4bHKOHKvMsrV6PpmWkgqMeH3tAQM1zKfgFss9Ax-_pV_NlDdCpUFzUggLXMwK6j-bLvDJJW8p1U-ebEz2uFY4/w1000-h600/rw
Sehingga penampakannya ketika disimpan dengan kode
amp-img dengan fallback untuk menampilkan image dengan webp pada AMP akan tampak seperti di bawah ini.
<amp-img alt="Contoh webp" height="600" width="1000" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAM13bygZ6G9pLn0wnlA6r3yKd8Xpw4nft9LvnNiS4kh5czla90K0p5l4bHKOHKvMsrV6PpmWkgqMeH3tAQM1zKfgFss9Ax-_pV_NlDdCpUFzUggLXMwK6j-bLvDJJW8p1U-ebEz2uFY4/w1000-h600/rw" title="Contoh webp" layout="responsive">
<amp-img fallback="fallback" alt="Contoh webp" height="600" width="1000" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAM13bygZ6G9pLn0wnlA6r3yKd8Xpw4nft9LvnNiS4kh5czla90K0p5l4bHKOHKvMsrV6PpmWkgqMeH3tAQM1zKfgFss9Ax-_pV_NlDdCpUFzUggLXMwK6j-bLvDJJW8p1U-ebEz2uFY4/w1000-h600/no" title="Contoh webp" layout="responsive"></amp-img>
</amp-img>
Dan gambarnya akan tampak seperti di bawah ini.
Semua gambar pada postingan ini menggunakan webp dari Google Photos, jika Anda menggunakan Google Chrome maka Anda bisa merasakan bagaimana loading halaman ini meskipun menampilkan 3 buah image. Untuk membuktikan bahwa postingan ini menggunakan webp dari Google Photos dengan trik di atas, jika Anda menggunakan Google Chrome silahkan klik kanan pada gambar lalu Save image as... Nanti akan disimpan sebagai file webp.
UPDATE:
Agar gambar di Google Photos bisa dilihat semua orang, gambar harus disimpan pada sebuah album berbagi (shared album) dengan sharing setting yang memungkinkan semua orang dengan URL dapat melihat gambar. Setelah itu baru kita bisa mengambil URL image seperti langkah-langkah di atas.Bagaimana, mudah bukan? Selamat mencoba dan semoga bermanfaat.