CONVERTIR JPG JPEG PNG A WEBP EN BLOGGER GRATIS

 

CONVIERTE TODAS LAS IMÁGENES DE TUS ENTRADAS A WEBP EN BLOGGER DE MANERA AUTOMATICA GRATIS

Hoy en día hay muchas herramientas que te permiten convertir automáticamente tus imágenes a formato WEBP sin comprometer su calidad. Esto significa que no tienes que perder tiempo y esfuerzo asociados con el proceso de conversión manual. Esta herramienta se basa en la última tecnología de compresión de imágenes y te ayudará a obtener el tamaño óptimo de archivo sin necesidad de sacrificar la calidad visual.

La mejor parte de convertir tus imágenes a formato WEBP sin preocuparte de realizar una configuración compleja es que no solo obtendrás un tamaño de archivo más pequeño sino que también tendrás la oportunidad de acelerar la velocidad de carga de tu página web. Esto es especialmente útil si quieres darle un empuje a tu SEO y atraer a más visitantes a tu sitio web. El formato WEBP también ofrece soporte completo para todas las plataformas modernas, como Firefox, Chrome, Safari y Edge.

No hay nada más satisfactorio que ver el cambio en la calidad de tus imágenes una vez que las has convertido a formato WEBP. Sin duda una herramienta formidable para aquellos que desean aprovechar la última tecnología de compresión de imágenes para conseguir los mejores resultados. Ahora puedes cambiar el formato de tus imágenes a WEBP de forma casi automática y disfrutar de una mejor calidad con un tamaño de archivo más pequeño. ¡No hay nada mejor que eso!

Te dejare dos Scripts para que lo uses de manera que te indicaremos a continuación:

SCRIPT 1: Cambia Formatos de imágenes contenidas en HTTP y HTTPS

1.   -  Inicie sesión en su cuenta de Blogger y vaya a la sección "Tema".

2.    - Haga clic en "Editar HTML" y agregue el siguiente código justo antes de la etiqueta </head>:

 

<script>

  function convertToWebp(){

    var images = document.querySelectorAll('img');

    for (var i = 0; i < images.length; i++) {

      var image = images[i];

      var src = image.getAttribute('src');

      if(src.indexOf(".jpg") > -1 || src.indexOf(".jpeg") > -1 || src.indexOf(".png") > -1){

        var webpSrc = src.replace(/\.jpg|\.jpeg|\.png/gi, ".webp");

        var newImage = new Image();

        newImage.src = webpSrc;

        newImage.onload = function(){

          image.src = webpSrc;

          image.classList.add('webp');

        };

      }

    }

  }

  document.addEventListener('DOMContentLoaded', convertToWebp);

 

  // Convert existing images to WebP

  function convertExistingImages(){

    var images = document.querySelectorAll('img');

    for (var i = 0; i < images.length; i++) {

      var image = images[i];

      var src = image.getAttribute('src');

      if(src.indexOf(".jpg") > -1 || src.indexOf(".jpeg") > -1 || src.indexOf(".png") > -1){

        var webpSrc = src.replace(/\.jpg|\.jpeg|\.png/gi, ".webp");

        image.src = webpSrc;

        image.classList.add('webp');

      }

    }

  }

  convertExistingImages();

 

  // Convert new images to WebP

  function convertNewImages(e) {

    if (e.target.tagName === "IMG") {

      var image = e.target;

      var src = image.getAttribute('src');

      if(src.indexOf(".jpg") > -1 || src.indexOf(".jpeg") > -1 || src.indexOf(".png") > -1){

        var webpSrc = src.replace(/\.jpg|\.jpeg|\.png/gi, ".webp");

        image.src = webpSrc;

        image.classList.add('webp');

      }

    }

    else if (e.target.tagName === "SOURCE") {

      var source = e.target;

      var srcset = source.getAttribute('srcset');

      if(srcset.indexOf(".jpg") > -1 || srcset.indexOf(".jpeg") > -1 || srcset.indexOf(".png") > -1){

        var webpSrcset = srcset.replace(/\.jpg|\.jpeg|\.png/gi, ".webp");

        source.setAttribute('srcset', webpSrcset);

        source.classList.add('webp');

      }

    }

  }

  document.addEventListener('DOMNodeInserted', convertNewImages);

</script>

 

SCRIPT 2: GADGET HTML

1.   -  Inicie sesión en su cuenta de Blogger y vaya a la sección "Diseño"

2.   -  Añadir Gadget y selecciona HTML/JavaScript

3.   -  Aceptar y Guardar cambios

 

<script>

// Convert existing images to WebP

function convertExistingImages(){

  var images = Array.from(document.querySelectorAll('img'));

  for (var i = 0; i < images.length; i++) {

    var image = images[i];

    var src = image.getAttribute('src');

    if(src.indexOf(".jpg") > -1 || src.indexOf(".jpeg") > -1 || src.indexOf(".png") > -1){

      var webpSrc = src.replace(/\.jpg|\.jpeg|\.png/gi, ".webp");

      image.src = webpSrc;

      image.classList.add('webp');

    }

  }

}

convertExistingImages();

</script>

 

Conclusión:  El Segundo método me funciono a mi, lo considero mas practico

 

Fuente:

https://developers.google.com/speed/webp/inspect

https://webpagetest.org/