Home Blogger

Cara Mengubah Gambar di Postingan Blog AMP Menjadi Webp

ANDD
ANDD
Updated: • 0 • min read
Table of Contents
Cara Mengubah Gambar di Postingan Blog AMP Menjadi Webp

Perlu diketahui bahwa Google chrome dan mozilla sudah mendukung format WebP. Dan berikut adalah cara dan tutorial membuat gambar pada blog menjadi format WebP untuk pengguna blog AMP.

Sebenarnya cara mengkonversi gambar menjadi WebP hampir sama seperti tutorial sebelumnya yaitu menambahkan kode -rw. Namun perlu diketahui bahwa ada sebagian browser yang tidak mendukung format WebP ini.

Membuat gambar di blogger menjadi format WebP untuk pengguna blog AMP

  1. Buka menu blogger
  2. Buat postingan atau new page
  3. Siapkan gambar yang akan diubah formatnya menjadi WebP
  4. Ikuti format seperti dibawah ini:
  <amp-img
  	alt="JUDUL"
  	height="675"
  	width="1200"
  	src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCx_ggfZipIaIADwM-iU_NzxVfP5n_U_aC6VavvG3iOVe1ifW-HQ99gi5dBBWOcFcvjmFNQ27BuOPmvomvXdK8FV2o-sYcePJ9vouXntaoYMbN4YAFC9uyC6o9eaF0hmNKSmhWEKgfQWS8A2ZKkgs_POROrgoxg_iqvS92dJm48YE2b-NsxujOXq16hg/s16000/Cara%20Membuat%20Tabel%20di%20Excel%20Lengkap%20dengan%20Gambarnya.png"
  	title="JUDUL"
  	layout="responsive">
  <amp-img
  	fallback
  	alt="JUDUL"
  	height="675"
  	width="1200"
  	src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCx_ggfZipIaIADwM-iU_NzxVfP5n_U_aC6VavvG3iOVe1ifW-HQ99gi5dBBWOcFcvjmFNQ27BuOPmvomvXdK8FV2o-sYcePJ9vouXntaoYMbN4YAFC9uyC6o9eaF0hmNKSmhWEKgfQWS8A2ZKkgs_POROrgoxg_iqvS92dJm48YE2b-NsxujOXq16hg/s16000/Cara%20Membuat%20Tabel%20di%20Excel%20Lengkap%20dengan%20Gambarnya.png"
  	title="JUDUL"
  	layout="responsive">
  </amp-img>
  </amp-img>

Selanjutnya, Anda hanya perlu menambahkan kode -rw pada kode size. Misalnya s16000-rw ,tambahkan fallback jika pada browser tertentu tidak mendukung format WebP.

Oleh karena itu kode gambar AMP harus disalin dan dibagi menjadi dua (sama) dengan tambahan kode fallback, agar browser yang tidak mendukung format WebP dapat membaca gambar dengan format seperti aslinya.

Selanjutnya tambahan kode yang ditambahkan seperti contoh dibawah ini:

width="1200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCx_ggfZipIaIADwM-iU_NzxVfP5n_U_aC6VavvG3iOVe1ifW-HQ99gi5dBBWOcFcvjmFNQ27BuOPmvomvXdK8FV2o-sYcePJ9vouXntaoYMbN4YAFC9uyC6o9eaF0hmNKSmhWEKgfQWS8A2ZKkgs_POROrgoxg_iqvS92dJm48YE2b-NsxujOXq16hg/s16000-rw/Cara%20Membuat%20Tabel%20di%20Excel%20Lengkap%20dengan%20Gambarnya.png" title="JUDUL" layout="responsive"> <amp-img fallback alt="JUDUL" height="675" width="1200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCx_ggfZipIaIADwM-iU_NzxVfP5n_U_aC6VavvG3iOVe1ifW-HQ99gi5dBBWOcFcvjmFNQ27BuOPmvomvXdK8FV2o-sYcePJ9vouXntaoYMbN4YAFC9uyC6o9eaF0hmNKSmhWEKgfQWS8A2ZKkgs_POROrgoxg_iqvS92dJm48YE2b-NsxujOXq16hg/s16000/Cara%20Membuat%20Tabel%20di%20Excel%20Lengkap%20dengan%20Gambarnya.png" title="JUDUL" layout="responsive"></amp-img></amp-img>

Salah satu cara yang bisa Anda lakukan untuk mempercepat loading blog yang Anda miliki adalah dengan mengoptimasi gambar postingan dengan ukuran yang lebih kecil.

Selain itu, Anda juga bisa mengoptimasi gambar dengan cara mengubah formatnya menjadi WebP. Walaupun format PNG memiliki ukuran yang lebih kecil.

Google PageSpeed Insights menyarankan untuk menggunakan gambar dengan format WebP. Karena format ini memiliki ukuran yang lebih kecil sehingga proses loading data menjadi lebih sedikit daripada menggunakan format JPEG ataupun PNG.

ANDD
ANDD Daily workers

Post a Comment