Tenemos una guerra tecnológica delante de nuestras narices. Esta particular guerra de formatos nos involucra a todos, y lo más probable es que hayas visto a sus combatientes sin siquiera saberlo. Hablamos de la próxima generación de formatos de imagen web, y de momento WebP lleva la delantera. Pero eso sólo plantea más preguntas, a saber, «¿qué es WebP?» y «¿qué tienen de malo el formato JPEG?».
Gracias a su creador, Google, el formato de imagen WebP se ha convertido últimamente en una tendencia. Cada vez se acepta en más dispositivos -para disgusto de sus competidores PNG, JPEG XR, JPEG 2000 – y va camino de convertirse en el nuevo formato de imagen web por defecto. Y a pesar de todos los enrevesados detalles técnicos, para cualquiera que publique fotos en Internet, es muy importante tener en cuenta el WebP.
En esta guía te explicamos todo lo que necesitas saber: qué es, cómo se usa y por qué deberías darle importancia. Te explicaremos los pros y los contras de WebP y luego te mostraremos cómo convertir tus otros formatos de imagen.
¿Qué es WebP?
Para empezar, WebP fue anunciado por primera vez en 2010, y desde entonces se ha ido actualizando y mejorando hasta su estado actual. Se ha convertido en un tema popular últimamente, ya que se adelantó en la guerra de formatos de imagen de nueva generación: en el momento de escribir este artículo, es compatible con Chrome, Microsoft Edge, Firefox, Opera y, más recientemente, Safari.
Para entender realmente lo que hace que WebP sea único, vamos a hablar directamente del punto más importante, la compresión de archivos.
Si no estás familiarizado con el término, la compresión se refiere a la codificación de los datos del archivo en menos bits, o piezas de datos digitales, que el original. Hay dos tipos principales de compresión: sin pérdidas (la calidad de la imagen se mantiene igual a medida que disminuye el tamaño de los datos) y con pérdidas (la calidad de la imagen disminuye ligeramente a medida que el tamaño de los datos disminuye significativamente). Si quieres conocer la «magia» de cómo puedes reducir el tamaño de un archivo sin afectar a la calidad, sigue leyendo, esta guía lo explica muy bien.
En pocas palabras, las imágenes WebP suelen ser más pequeñas que sus homólogas, pero con la misma calidad, gracias a su compresión superior. Te podemos decir comn toda confianza que utilizar imágenes WebP para tu propia web o proyecto hará que funcione más rápido además de reducir el peso de almacenamiento en tu servidor.
Este rendimiento estelar, combinado con la apuesta de Google, allana el camino para que WebP se convierta en el nuevo formato de archivo web por defecto de los próximos años.
Ventajas e inconvenientes de WebP
Por impresionante que sea, WebP aún no está listo para ser «el elegido». Por ahora, echa un vistazo a los pros y contras de WebP y comprueba si es adecuado para ti y tus necesidades.
Ventajas
- Tiempos de carga más rápidos. Debido al menor tamaño de los archivos, las páginas con imágenes WebP se cargan más rápido. Según SemRush, Amazon tiene estudiado que por cada 100 ms más de carga, pierde un 1% del total de sus ventas. Cada segundo de retraso en la carga reduce la satisfacción del visitante, y uno de cada cuatro visitantes te abandonará por completo si no se carga en menos de 4 segundos.
- Menos almacenamiento multimedia: la compresión mejorada de WebP también implica menos espacio de almacenamiento en tu servidor. Esto es crucial para los sitios que alojan una gran cantidad de imágenes, esto podría ahorrarte dinero en tu alojamiento web.
- Transparencia y animación. Como mencionamos anteriormente, WebP es el único formato de imagen que soporta los fondos transparentes de PNG y las capacidades de animación de GIF, sin mencionar que supera la compresión de JPEG. Te recomendamos probar de convertir tus imágenes de PNG a WebP.
- Muchos CMS ya lo soportan: por ejemplo, WordPress el CMS más popular, ya soporta desde su versión 5.8 y sin plugins necesarios el formato WebP. Esto es un claro simbolo de su prospero futuro.
Contras
- No es soportado por todos los navegadores. Aunque WebP tiene la mayor parte de los navegadores, todavía hay algunos que no lo soportan (Internet Explorer es lento en adoptarlo, lo cual es marca de la casa para Internet Explorer).
- La calidad sigue siendo reducida. No es para tando, pero debe mencionarse que este formato conlleva a una perdida de calidad de imagen. Eso sí, para la mayoría de la gente esta reducción de calidad es invisible.
- Herramientas de edición limitadas: Algunas herramientas de edición de imágenes pueden no ser compatibles con WebP o tener funcionalidades limitadas en comparación con otros formatos más establecidos.
Comparación entre imagen JPG y WebP
A continuación os mostramos una comparación entre una imagen JPG y WebP. La diferencia principal es la compresión de tamaño, donde la diferencia de peso es drásticamente notable. De forma evidente el formato de imagen WebP de alta compresión és el ganador, sin duda facilita resultados de velocidad prometedores.
En esta comparación observamos que, a simple vista, no hay diferencia entre ambas imágenes, sólo una minúscula variación de color y calidad. ¿Parece que vale la pena, no? Vamos a enseñaros como podéis hacerlo ahora vosotros mismos:
¿Cómo se convierte a formato de imagen WebP?
Si ya te convence el menor tamaño de los archivos, naturalmente necesitarás un conversor de imágenes WebP para cambiar todas tus imágenes. Muchos programas son compatibles con WebP, por lo que puedes crearlas directamente desde la fuente (Adobe Photoshop y Sketch, por nombrar algunos), pero si tienes imágenes preexistentes o proceden de un lugar que no es compatible con WebP, necesitarás un conversor de imágenes.
Hay muchos para elegir, y de hecho la mayoría tienen éxito en la tarea básica de convertir un archivo a WebP. Un ejemplo que usamos en Responsive es XnConvert.
XnConvert funciona para Windows, Mac y Linux. También es gratuito para uso personal, aunque hay que comprar una licencia para uso empresarial. Además de WebP, admite JPEG, JPEG 2000, PNG, TIFF, GIF, OpenEXR, datos de cámara sin procesar y cientos de formatos más. También tiene muchas más funciones: conversiones por lotes, rotar, añadir marcas de agua, añadir texto y ajustes ligeros de la imagen, como retocar las sombras y el brillo, además de ser un excelente compresor de imágenes.
Conclusión: WebP es el camino
Teniendo en cuenta el gran efecto sobre los tiempos de carga, prácticamente cualquier pagina web o software puede beneficiarse del formato WebP. Como hemos mencionado en los pros y los contras de WebP, la única bandera roja que puede asustarnos es que no todos los navegadores son compatibles, al menos, de momento. Te recomendamos que compruebes bien la compatibilidad antes de usar el formato en todo tu proyecto, sólo te llevara unos minutos.
Si aún no está seguro de qué formato de imagen es el adecuado para ti, siempre puede contratar a un diseñador web profesional para que se encargue de ello. Un desarrollador profesional ya debería saberlo, y sólo tienes que mencionarle que la velocidad del sitio y los tiempos de carga son una prioridad para tu proyecto.
