AMP Blogger Trik Tutorial

Merubah Gambar Menjadi WebP Pada Postingan Blog AMP - Untuk saat ini Blogger belum support untuk upload gambar dengan format webp, namun walaupun begitu, kita masih bisa mengakalinya dengan mengkonversi gambar agar menjadi webp pada postingan blog AMP HTML.

Google menganjurkan untuk menggunakan gambar dengan format webp. Kebetulan pada blog AMP HTML, untuk penggunaan gambar format webp lebih mudah, karena bisa menggunakan gambar fallback untuk browser-browser yang belum support format webp.

Jadi, dengan cara ini kita bisa optimalkan gambar untuk meningkatkan loading halaman postingan, setidaknya loading halaman pada browser-browser yang sudah mendukung gambar berformat webp seperti Google Chrome dan Opera. Namun kita tetap masih bisa menampilkan gambar pada browser-browser yang belum support webp.

Untuk cara mengkonversi gambar menjadi webp ini pun cukup mudah. Kita hanya menambahkan kode -rw pada URL gambar Blogger pada bagian size /s..../ (contoh: /s1600/).

Sebagai contoh, untuk merubah atau mengkonversi gambar menjadi webp akan terlihat seperti pada contoh URL image Blogger dibawah ini.

Ini adalah URL asli saat kita baru mengupload gambar pada blogger:

src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcQKtOhJpi8Chg9xLBWGYUmwewzUXUSbJb8OnsQ8I4zuXkYELswYdT0WN5pMVa2BKXNQPuz953TPGkUjlS6yZVze-5z66gjMuKSmYhNZBmLL0fh8V-PRR98vWtQ4MzuwWmm77YexuV0Q4/s1600/gambar-webp.png

Dan ini adalah url image Blogger yang akan kita rubah menjadi webp:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcQKtOhJpi8Chg9xLBWGYUmwewzUXUSbJb8OnsQ8I4zuXkYELswYdT0WN5pMVa2BKXNQPuz953TPGkUjlS6yZVze-5z66gjMuKSmYhNZBmLL0fh8V-PRR98vWtQ4MzuwWmm77YexuV0Q4/-rw/gambar-webp.png

Sehingga ketika digunakan pada amp-image dengan fallback untuk menampilkan gambar webp akan terlihat seperti url gambar berikut ini.

<amp-img alt="Contoh gambar blogger menjadi webp"
  width="1000"
  height="500"
  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcQKtOhJpi8Chg9xLBWGYUmwewzUXUSbJb8OnsQ8I4zuXkYELswYdT0WN5pMVa2BKXNQPuz953TPGkUjlS6yZVze-5z66gjMuKSmYhNZBmLL0fh8V-PRR98vWtQ4MzuwWmm77YexuV0Q4/-rw/gambar-webp.png"
  title="Contoh gambar blogger menjadi webp"
  layout="responsive">
  <amp-img alt="Contoh gambar blogger menjadi webp"
    fallback
    width="1000"
    height="500"
    src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcQKtOhJpi8Chg9xLBWGYUmwewzUXUSbJb8OnsQ8I4zuXkYELswYdT0WN5pMVa2BKXNQPuz953TPGkUjlS6yZVze-5z66gjMuKSmYhNZBmLL0fh8V-PRR98vWtQ4MzuwWmm77YexuV0Q4/s1600/gambar-webp.png"
    title="Contoh gambar blogger menjadi webp"
    layout="responsive"></amp-img>
</amp-img>

Dan penampakannya akan seperti gambar di bawah ini.

Note: Cara ini tidak berlaku untuk gambar dengan format *.gif.

Jika Anda menggunakan Google Chrome, coba klik kanan pada gambar di atas lalu Save image as... maka gambar akan disimpan dengan format file *.webp

Source: https://www.kompiajaib.com/2018/04/cara-mudah-mengkonversi-gambar-blogger.html

Diposkan oleh: Warim Pada:

Berlangganan Lewat Email

Kirim alamat email Anda untuk mendapatkan notifikasi artikel terbaru dari blog Website Mini secara GRATIS langsung di kotak masuk Anda.