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!
No hay comentarios:
Publicar un comentario