How To Use Image With WebP Format On Blog AMP
How To Use Image With WebP Format On Blog AMP - Image is one of the important elements of a web page. With the image then can explain something visually to the visitor, so then the visitors will be more clear. But in its use, we must be careful especially with the size of its image, because this image affects loading web / blog. The displayed image must first be downloaded from the source by the browser.
Well if the size is too large and heavy to download, then it will affect the loading blog so that the blog will be heavy loading too. For that we must create an image for this blog with the size as small as possible but must still have a good quality so it remains comfortable and nice to see.
One way to create images with small size but good quality is to use the image with webp format. But unfortunately for this webp format has not been widely supported by the blogging platform and browser. Browsers that support the image with this webp format is Google Chrome and Opera.
Webp is an image format that can have a smaller size than the original format but still has the same quality as the original image. Although the image with this webp format has not been widely supported by blogging platform like Blogger and not yet support all browsers but we can still use it, at least can reduce loading on browsers already support webp like Google Chrome and Opera.
Then how to display the image on a browser that does not support image with webp format?
Especially for AMP HTML, we can use fallback on 'amp-img' using other browser supported image formats such as jpg, png, and more. Here's the code to show webp with fallback on 'amp-img' so it can still display the image on all browsers.
To prove that this post using webp, if you use Google Chrome please right click on the image and Save image as ... Later will be saved as webp file. You can also test this page at page speed insight, there is no notification Optimize Images from post image, except from Adsense ads image.
Blogger does not currently support webp, so we can not upload webp image on Blogger. To upload webp image, we can use Github or Firebase or can use Google Photos. This webp image we can use to display images in the post or for banner ads and more. To get the webp format, we can use image to webp online converter.
That's the tips about Using Image With WebP Format On Blog AMP, hopefully with this short enough article, can be useful for us and good luck.
Well if the size is too large and heavy to download, then it will affect the loading blog so that the blog will be heavy loading too. For that we must create an image for this blog with the size as small as possible but must still have a good quality so it remains comfortable and nice to see.
One way to create images with small size but good quality is to use the image with webp format. But unfortunately for this webp format has not been widely supported by the blogging platform and browser. Browsers that support the image with this webp format is Google Chrome and Opera.
Webp is an image format that can have a smaller size than the original format but still has the same quality as the original image. Although the image with this webp format has not been widely supported by blogging platform like Blogger and not yet support all browsers but we can still use it, at least can reduce loading on browsers already support webp like Google Chrome and Opera.
Then how to display the image on a browser that does not support image with webp format?
Especially for AMP HTML, we can use fallback on 'amp-img' using other browser supported image formats such as jpg, png, and more. Here's the code to show webp with fallback on 'amp-img' so it can still display the image on all browsers.
<amp-img alt="Mountains"
width="550"
height="368"
src="images/mountains.webp">
<amp-img alt="Mountains"
fallback
width="550"
height="368"
src="images/mountains.jpg"></amp-img>
</amp-img>
To prove that this post using webp, if you use Google Chrome please right click on the image and Save image as ... Later will be saved as webp file. You can also test this page at page speed insight, there is no notification Optimize Images from post image, except from Adsense ads image.
Blogger does not currently support webp, so we can not upload webp image on Blogger. To upload webp image, we can use Github or Firebase or can use Google Photos. This webp image we can use to display images in the post or for banner ads and more. To get the webp format, we can use image to webp online converter.
That's the tips about Using Image With WebP Format On Blog AMP, hopefully with this short enough article, can be useful for us and good luck.
Post a Comment for "How To Use Image With WebP Format On Blog AMP"
Provide comments relevant to the posted articles and provide critiques and suggestions for the progress of the blog