How to Optimize Blogger using WEBP Image Format

Serve webp image size in Blogger / HTML to shine results in speed tests of your site. Is this so good? Of course it is, because to get excellent scores when loading a blog, the compatibility of the photos served in the appropriate format is measured.

how to put webp images in blogger

In this post I reveal the complete tutorial to offer the Webp image format for your Blog (Blogger / HTML). PageSpeed ​​Google recommends us to offer images in Webp format because a large number of browsers are including this format to offer faster visual content to users who visit a page. So let's see how to put Webp format images on our blog created in blogger.

Video Explained: Add WEBP Format Image in a Blogger Post

Convert to WEBP format

The first step is to use an online tool to convert our jpg, png or gif image to Webp. Before converting to Webp format we have to have the image compressed with our photoshop, paint, adobe or other editor with the dimensions of our preference. In my case, I use the following online editor to convert images to Webp.

online image to webp converter

Host image in same place

When you have your Webp image, I recommend you save it in the same place where you have the other image in jpg or png version to maintain order and not get tangled up. I use dropbox to upload images and get favorable results in loading my blog.

images hosted on dropbox webp jpg

Code for Browsers to recognize WEBP formats

Now, to correctly use our Webp image format, it is necessary to add a code in HTML View to put the address where the photos are hosted. Already mentioned I have them added in dropbox to call them from there. The correct way to add Webp image formats is:

  • Compress the image with an editor
  • Place the HTML View
  • paste the code
  • Add the address where the images are hosted

  <source srcset="url-imagen.webp" type="image/webp"></source>
  <source srcset="url-imagen.jpg" type="image/jpeg"></source> 
  <img src="url-imagen.jpg" alt="Alt Text!">

When you have done these steps you will be able to repeat it over and over again or make the changes throughout your blog. Of course this will take time if you have many entries. At least add this image format to your most popular posts for better compatibility with all devices.


This practice is good to improve the loading of a site to obtain SEO results as close to 100%. Likewise, this format is being integrated into all platforms to deliver the best possible to the user. The loading speed of a blog influences when someone visits your blog.

Publicar un comentario

Déjame un mensaje.

Artículo Anterior Artículo Siguiente

نموذج الاتصال

// Cargamos el SDK de Facebook window.fbAsyncInit = function() { FB.init({ appId : '570341645200786', cookie : true, xfbml : true, version : 'v11.0' }); // Evento que se ejecuta al dar clic en el botón Me Gusta FB.Event.subscribe('edge.create', function(response) { document.getElementById("contenido").style.display = "block"; document.getElementById("boton-fb").style.display = "none"; }); }; (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); = id; js.src = ""; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));