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.
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.
Te Recomiendo
Plantilla MagPress de Blogger: Descarga este Tema
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.
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.