Cómo Optimizar Blogger usando Formato de imágenes WEBP

Sirve tamaño de imágenes Webp en Blogger / HTML para relucir resultados en las pruebas de velocidad de tu sitio. ¿Es tan bueno esto?, claro que si, porque para conseguir excelentes puntuaciones en la carga de un blog se mide la compatibilidad de las fotos servidas en el formato adecuado.

como poner imágenes webp en blogger

En esta entrada revelo el tutorial completo para ofrecer el formato de imágenes Webp para tu Blog(Blogger / HTML). PageSpeed Google nos recomienda ofrecer imágenes de formato Webp porque una gran parte de los navegadores están incluyendo este formato para ofrecer más rápido el contenido visual a los usuarios que visitan una página. Por lo tanto, veamos cómo poner imágenes de formato Webp en nuestro blog creado en blogger.

Video Explicado: Añadir Imagen de formato WEBP en una entrada de Blogger


Convertir a formato WEBP

El primer paso es usar una herramienta online para convertir nuestra imagen jpg, png o gif a Webp. Antes de convertir a formato Webp tenemos que tener la imagen comprimida con nuestro editor de photoshop, paint, adobe u otro con las dimensiones de de nuestra preferencia. En mi caso, utilizo para el siguiente editor online para convertir imágenes a Webp.

convertidor online de imágenes a webp


Alojar imagen en mismo lugar

Cuando tengas tu imagen Webp, te recomiendo guardarlo en el mismo lugar donde tiene la otra imagen en versión jpg o png para llevar un orden y no te enredes. Yo uso dropbox para subir imágenes y conseguir resultados favorables en la carga de mi blog.

imágenes alojadas en dropbox webp jpg

Código para que Navegadores reconozcan formatos WEBP

Ahora, para usar correctamente nuestro formato de imágenes Webp es necesario agregar un código en Vista HTML para poner la dirección en donde están alojadas las fotos. Ya mencionado las tengo agregadas en dropbox para llamarlas desde ahi. La forma correcta de agregar formatos de imagen Webp es:

  • Comprimir la imagen con un editor
  • Colocar la Vista HTML
  • Pegar el código
  • Agregar la dirección donde están alojadas las imágenes

 
<picture>
  <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!">
</picture>

Cuando hayas realizado estos pasos vas a poder repetirlo una y otra vez o hacer los cambios en todo tu blog. Claro esto va tomar tiempo si tienes muchas entradas. Por lo menos añadir este formato de imágenes en tus entradas más populares para una mejor compatibilidad con todos los dispositivos.

Recomendación

Esta practica es buena para mejorar la carga de un sitio para obtener resultados SEO lo más cercano al 100%. De igual, forma en todas las plataformas se esta integrando este formato para entregar al usuario lo mejor posible. La velocidad de carga de un blog influye cuando alguien visita tu blog.

إرسال تعليق

Déjame un mensaje.

أحدث أقدم

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

// 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); js.id = id; js.src = "https://connect.facebook.net/es_ES/sdk.js#xfbml=1&version=v11.0&appId=570341645200786&autoLogAppEvents=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));