"El diseño es el embajador silencioso de tu marca"
- Paul Brand

Formato WebP

Las imágenes normalmente suponen más del 70% de la información que el navegador necesita descargar para que veamos una pagina web, por lo que su peso es crucial para la optimizacion de nuestra pagina, webp es un nuevo formato de compresion de imagenes que pretende reducir ese peso sin que se pierda la calidad.

Ya que estamos hablando de incorporar nuevos formatos de compresion de imagenes a nuestra web, veamos cual es la ventaja de este frente a los tradicionales jpg o png.

 

 

WebP es un formato creado por Google para reemplazar a todos los demás, usa código predictivo para codificar las imágenes, al igual que el motor Javascript V8 que emplea Chrome. El método de compresión que emplea lo han bautizado como VP8L.

Google asegura que este nuevo formato permite ahorrar un 35% más de espacio en cada web, y un tiempo estimado de 140,000 horas diarias para los usuarios de Google en conjunto, y es que este formato mejora tanto el nivel como la velocidad de compresion, y tambien es mas rápido descomprimiendo (cargando la imagen en el navegador), analicemos sus características…

Profundidad de color

¿En que se va a notar la profundidad de color? Pues en la cantidad de colores que la imagen es capaz de mostrar, para que lo entendamos 8 bits de profundidad de color equivale a 2 elevado a 8 colores (2*2*2*2*2*2*2*2) o lo que es lo mismo a 256 colores (podeis hacer la cuenta si no me creeis), por esta regla, 24 bits de profunidad sera 2 elevado a 24, es decir, que puede representar 16.777.216 colores.

Cuantos mas colores mas calidad tendrá la imagen, lo que pudieramos preguntarnos es entonces si tuviera una profundidad de color mas grande, por ejemplo 64 bits, aun se veria mejor!

Pues depende, depende de cuantos colores son capaces de distinguir nuestros ojos, no existe consenso entre los científicos respecto al numero exacto, sin embargo se estima que una persona promedio puede percibir un millón de variaciones cromáticas, es decir que no vamos a ver diferencia entre los formatos actuales de 24 bits y otros que tengan mas, porque nuestros ojos no van a apreciarla…

Tiene una profundidad de color de 24 bits al igual que jpg.

png-24 tiene una profundidad de 32 bits de los cuales 24 son para el color y 8 para la opacidad.

Por otra parte gif y png-8 tienen una profundidad de color de 8 bits.

En terminos de calidad que pueden alcanzar tanto en jpg como png-24 y WebP deberia ser parecida.

Transparencias

El que la imagen pueda tener un fondo transparente es una capacidad tanto de WebP como de png y gif.

Sin embargo png-24 es el formato que mas ocupa, y el menos recomendable para usar salvo que sea necesario, que necesitemos transparecia y webm no este soportado.

Por otra parte png-8 y gif ocupan menos pero solo representan como vimos 8 bits de color, png-8 en terminos de calidad es mejor que gif porque aplica correccion de gama a los colores y además es el formato mas liviano de manera que lo podemos usar para dibujos, iconos y logotipos (Pero no para una imagen de calidad).

Animaciones

Las animaciones solo están soportadas por webm y por gif, pero como vemos gif tiene muchisima menos calidad (imagenes con 256 colores), por lo que si está soportado es mucho mejor webm.

Compresion

Hablando de formatos con alta calidad de imagen, no incluyo formatos con colores indexados como png-8 y gif, webm es el que mejor compresion proporciona, le gana de calle a jpg y png-24, si fuera capaz de incluir color indexado (8 bits) seria sin duda el formato definitivo.

Tambien puede usarse con pérdida o sin pérdida de calidad.

La conclusion es que el problema de webm para ser usado en nuestras páginas es que sólo es compatible con los navegadores Chrome y Opera, además de que hay pocas herramientas para manejarlo, pero comparativamente con el resto de los formatos hay que decir.

  • Si necesitas usar trasparecia el resultado es igual que png-24
  • Si necesitas usar animaciones es mejor que gif
  • En terminos de calidad ofrece la misma que png-24 y jpg
  • En terminos de compresion es el mejor salvo para imagenes con color indexado (que tengan solo 256 colores) en el que es superado por png-8.

Asi que usalo para todo salvo para dibujos, iconos y logotipos donde no necesitas precision en la gama de colores.

The following two tabs change content below.
Especialista en diseño web responsive, programador html5, css3, jquery, php y java.

Latest posts by Óscar Lijó (see all)