2 feb 2021

Formatos de imagen de última generación. ¿Merecen la pena?

Por el 2 feb 2021 con 0 comentarios

Desde hace muchos años y hasta hoy día, se siguen utilizando formatos de imagen mejorables en el entorno web. A pesar de existir herramientas de compresión de imágenes, todos nos hemos visto con el problema de que las imágenes de nuestro sitio web sean demasiado pesadas y, por ende, ralenticen la carga de esta.

Esto ha mejorado mucho y han salido nuevos formatos de imagen, aunque en este caso hablaremos sobre uno concreto, por ser el que más compatibilidad ofrece y por estar respaldado por Google.

WebP

WebP format compatibility

Errores comunes

A pesar de no tener una total compatibilidad con todos los navegadores y sus versiones, existen soluciones para conseguir la mayor compatibilidad posible y poder aprovechar los nuevos formatos de imagen.

A continuación, veréis dos casos prácticos del problema y su solución:

  • La utilización de etiquetas de HTML <img> podría ser sustituido por el elemento picture de HTML5, donde nos permite añadir diferentes sources.

  • La utilización de CSS para la aplicación de background podría ser solucionado con la ayuda de Modernizr para mostrar una imagen diferente en caso de la no compatibilidad con WebP del navegador.

  • Soluciones adhoc sobre Javascript, fichero htaccess y módulos de terceros.

Resultados

Hemos realizado varias pruebas para evaluar el potencial de WebP y sin duda, es un gran cambio. En las pruebas realizadas hemos conseguido reducir el peso hasta en un 1162.2% sin pérdida de calidad en imágenes no optimizadas. Esta optimización reduciría también el posible impacto en ataques de tipo DDoS.


Imagen

Peso PNG

Peso WebP

Reducción %



655KB

67KB

877.61%



2.070KB

164KB

1162.2%



698KB

70KB

884.29%

 

Por último, hay que tener muy en cuenta que además de aumentar la velocidad de carga de tu sitio web, mejorarás el posicionamiento en Google 😊


¡Ponedlo en práctica y contadnos cómo os ha ido!

      editar

0 comentarios:

Publicar un comentario

< >