How to Change Images in AMP Blogger Posts to Webp - TAMASEO

Actually, the way to convert images to webp is almost the same as the previous tutorial, namely by adding the -rw code. But please note that there are some browsers that do not support this WebP format.

Please note that Google Chrome and Mozilla already support this WebP format. The following is a tutorial on how to make images on Blogger into WebP format for AMP blog users.

How to make images on blogger into webp format for AMP blog users.

1. Open the blogger menu.
2. Create a new post or page.
3. Prepare the image that will be converted to WebP format.
4. Then, follow the format as below:

<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-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>

You only need to add the -rw code to the size code, for example s16000-rw. Add a fallback if on if certain browsers don't support WebP.

Therefore the AMP image code must be copied and divided into two (equal) pieces with additional fallback code, so that browsers that do not support WebP can read images in their original format.

The following is an example of additional code added as below:

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>

One way to speed up the loading of your blog is to optimize the post image with a smaller size. Apart from that, you can also optimize images by changing the format to WebP.

Although the PNG format has a smaller size, Google PageSpeed ​​Insights recommends using images in the WebP format. Because this format has a smaller size, the data loading process is smaller than using JPEG or PNG formats.