gacerindo.com - Sudah lama neh mamang tidak mengupdate blog gacerindo yang satu ini. Kali ini mamang akan memberikan cara menambahkan gambar WeBP ke dalam postingan blog AMP.Google sendiri menyarankan agar gambar yang diunggah ke dalam blog berformat WebP, JP2k (JPEG 2000) dll. Sekarang bukan jamannya lagi gambar dengan formast jpg,png atau format lain yang ketinggalan jaman.
Mengapa google menyarankan agar beralih ke format gambar tersebut? Karena tiada lain untuk kecepatan loading blog kita. Biasanya gambar-gambar yang berformat WebP memiliki ukuran gambar yang relatif kecil tapi tidak mengurangi kualitas gambar tersebut.
Baca Juga:
Lalu bagaimana cara mengkonversi dan menambahkan gambar berformat WebP ke dalam blog AMP. Simak caranya dibawah ini.
Mengkonversi Gambar Menjadi WebP Dengan Google Photos untuk Blog AMP
1. Bagi yang punya akun google silahkan masuk ke alamat ini: https://photos.google.com/
2. Upload gambar seperti biasanya.
3. Pilih kualitas normal, sesuai apa adanya
4. Setelah selesai klik gambar yang kamu upload tadi. Kemudian setelah muncul klik kanan pada gambar tersebut. Selanjutnya copas image adress-nya.
5. Setelah itu kamu akan mendapatkan url gambar yang cukup panjang dari google photos seperti berikut ini.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyCPQBuDo0U66jf4JGxmym4IT2F9DA_byBWJ1YDVQ3YWeaU3ZgYD78ge32axz1yyUwUT-0mHlj97LHB4bw0nVV3XQELyBSvJwxqjegiOr15FvDxfg7BZ1LN0qcDL8zSOsH-6SYgRBA0x8/w640-h400/no
6. Cari kode yang ditandai atau kata no pada bagian url gambar
7. Kemudian ganti kata no tersebut dengan rw untuk membuat gambar itu menjadi berformat Webp. Sehingga hasilnya seperti dibawah ini.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyCPQBuDo0U66jf4JGxmym4IT2F9DA_byBWJ1YDVQ3YWeaU3ZgYD78ge32axz1yyUwUT-0mHlj97LHB4bw0nVV3XQELyBSvJwxqjegiOr15FvDxfg7BZ1LN0qcDL8zSOsH-6SYgRBA0x8/w640-h400/rw
Setelah kita mendapatkan kode hasil konversi dari gambar jpg yang dikonversi ke WebP. Berikut cara menerapkan pada blog AMP.
1. Masuk ke mode HTML pada postingan blog.
2. Tambahkan kode berikut ini.
<amp-img src="url gambar"
width="600"
height="300"
layout="responsive"
alt="an image">
</amp-img>
3. Copas kode gambar WebP tadi ke bagian url gambar. Sehingga hasilnya seperti berikut ini.
<amp-img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyCPQBuDo0U66jf4JGxmym4IT2F9DA_byBWJ1YDVQ3YWeaU3ZgYD78ge32axz1yyUwUT-0mHlj97LHB4bw0nVV3XQELyBSvJwxqjegiOr15FvDxfg7BZ1LN0qcDL8zSOsH-6SYgRBA0x8/w640-h400-rw/"
width="600"
height="300"
layout="responsive"
alt="an image">
</amp-img>
4. Silahkan lihat hasilnya, kurang lebih akan seperti berikut ini.
Mengkonversi Gambar Menjadi WebP Dengan Fallback untuk Blog AMP
Cara kedua kali ini lebih mudah dibanding dengan menggunakan google photos. Karena gambar yang akan di konversi kedalam WebP cara uploadnya sama seperti meng-upload image pada blogger.
Hanya perlu sedikit tambahan kode saja, agar image atau gambar tersebut berubah format menjadi WebP. Berikut caranya.
1. Upload gambar seperti biasanya didalam postingan blog.
2. Perhatikan url gambarnya, kemungkinan hampir mirip dengan kode berikut ini.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMfc2mY6lSeh6i47UYVgzOg5JK3yjlguzDhqgdDrW-5PR7tmZ1PoMD4HoqPdWIadAdnCwZ4dqESThPpKk7EFhpWeorXySkSgNT5-z4walxA-bX9XKM8qjA3k4DAAslh8DkqlxWKRn-cQ4/s1600/Menambahkan%2BGambar%2BWebP%2BKe%2BPostingan%2BBlog%2BAMP.jpg
3. Tambahkan kode -rw untuk mengubah image blogger menjadi WebP.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMfc2mY6lSeh6i47UYVgzOg5JK3yjlguzDhqgdDrW-5PR7tmZ1PoMD4HoqPdWIadAdnCwZ4dqESThPpKk7EFhpWeorXySkSgNT5-z4walxA-bX9XKM8qjA3k4DAAslh8DkqlxWKRn-cQ4/-rw/Menambahkan%2BGambar%2BWebP%2BKe%2BPostingan%2BBlog%2BAMP.jpg
4. Sehingga apabila diuplad untuk blog amp, silahkan gunakan kode berikut ini didalam mode HTML postingan blog.
<amp-img alt="Contoh gambar menjadi webp"
width="1000"
height="600"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMfc2mY6lSeh6i47UYVgzOg5JK3yjlguzDhqgdDrW-5PR7tmZ1PoMD4HoqPdWIadAdnCwZ4dqESThPpKk7EFhpWeorXySkSgNT5-z4walxA-bX9XKM8qjA3k4DAAslh8DkqlxWKRn-cQ4/s1600-rw/Menambahkan+Gambar+WebP+Ke+Postingan+Blog+AMP.jpg"
title="Contoh gambar blogger menjadi webp"
layout="responsive">
<amp-img alt="Contoh gambar menjadi webp"
fallback
width="1000"
height="600"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMfc2mY6lSeh6i47UYVgzOg5JK3yjlguzDhqgdDrW-5PR7tmZ1PoMD4HoqPdWIadAdnCwZ4dqESThPpKk7EFhpWeorXySkSgNT5-z4walxA-bX9XKM8qjA3k4DAAslh8DkqlxWKRn-cQ4/s1600/Menambahkan+Gambar+WebP+Ke+Postingan+Blog+AMP.jpg"
title="Contoh gambar menjadi webp"
layout="responsive"></amp-img>
</amp-img>
5. Sehingga hasilnya akan seperti berikut ini.
Cara ini hanya berlaku bagi image yang berformat .jpg dan .png, tidak berlaku bagi image yang berformat gif.
Ada dua cara yang bisa kamu gunakan untuk merubah gambar .jpg ke dalam format .webp. Silahkan pilih cara yang menurut kamu mudah. Selamat mencoba.
