JPEG 2000, JPEG XR y WebP, los formatos de imagen de próxima generación

Las imágenes de nuestros ecommerce o websites en general, suponen una gran porción del peso total de las páginas, y por lo tanto son en buena medida responsables de su velocidad de carga

Es importante y necesario el correcto tratamiento y compresión de estas imágenes.
Una tienda excesivamente pesada cargará de forma mas lenta, perjudicando así la libre navegación de sus usuarios.

Por este motivo, nos está llegando un creciente interés en el asesoramiento sobre el correcto procesado de imágenes y parte de este interés va dirigido a estos tres formatos; aparentemente nuevos y tan desconocidos hasta ahora.

Hoy nos centraremos en hablar de ellos y concretamente sobre WebP, que bien podría ser el próximo estándar para imágenes en internet.

Pero antes de nada vamos a hacer un breve repaso a estos 3  formatos, para saber que son y que nos pueden ofrecer.

Formatos de próxima generación

JPEG 2000

Creado en el año  2000 por el grupo Joint Photographic Experts Group,  JPEG 2000 nació con el objetivo de superar al propio JPEG, ofreciendo una mejor compresión de imagen, con o sin perdida de calidad.

Este formato está soportado por buena parte del software de edición de imágenes, y su popularidad varia entre sectores del entorno offline.

No obstante en el entorno online, este formato solamente lo soportan los navegadores Safari de Apple, tanto en MacOS como en IOS.

Fuente: www.caniuse.com

JPEG XR

Creado por Microsoft en el año 2009, y con la misma intención de aportar una mayor calidad de imagen en un menor tamaño de archivo que el formato JPEG. su soporte en entornos Online queda reducido a los navegadores de Microsoft: Edge y Explorer.

Fuente: www.caniuse.com

WebP

Por último, tenemos el formato WebP creado en el año 2010 por Google, con la idea de aportar un formato específico para la web.
Al igual que los otros dos formatos, WebP, ofrece una mejor calidad de compresión de imagen que el formato JPEG; siendo soportado por la mayoría de navegadores, llegando así a un 77% de los usuarios.

Por este motivo, el formato WebP, es un buen candidato a ser el próximo estándar de compresión imágenes en internet.

Fuente: www.caniuse.com

¿Entonces usamos ya el formato WebP?

Este formato de imagen goza de una buena compatibilidad entre navegadores, no obstante los navegadores de Apple aún no lo soportan y esto afecta a un 19% de los usuarios.

Por este motivo, para poder usar este formato  (o cualquier otro) es necesario añadir fallbacks en nuestro código HTML / CSS, con el fin de garantizar que ningún navegador se queda sin poder mostrar las imágenes.

Por ejemplo hasta ahora, si queremos insertar una imagen en nuestro código HTML, lo haremos mas o menos de esta forma:

HTML
<img alt=»This is my face» src=»images/mypicture.jpg»>

Mientras que si usamos el formato WebP, deberemos invocar a la imagen de la siguiente manera:

HTML

<picture>

  <source srcset=»images/mypicture.webp» type=»image/webp»>
  <source srcset=»images/mypicture.jpg» type=»image/jpeg»>
  <img alt=»This is my face» src=»images/mypicture.jpg»>
</picture>

Como podéis ver, tenemos que disponer de dos copias de la imagen; una en formato  WebP, y otra en JPEG para el fallback, además de añadir varias líneas de código adicionales.

Con las imágenes insertadas a través del código CSS, deberemos crear una clase especifica para ambos formatos, y mediante javaScript, con el uso de algún plug-in como Modernizr. aplicar una u otra clase en nuestros HTML en función de si el navegador del cliente es o no compatible con el nuevo formato, quedando  mas o menos así:

CSS
.no-webp .container {     background-image: url(«mypicture.jpg»); }
.webp .container {     background-image: url(«mypicture.webp»); }

El uso del nuevo formato, aún requiere un volumen adicional de trabajo que conviene valorar, y es por este motivo que aún no lo recomendamos al 100%.

Hay algunas webs que deben mostrar cantidades abismales de imágenes, como seria el caso de Shutterstock y ya han invertido en la automatización del proceso de implementación.

Con el tiempo, el soporte de este nuevo formato sé ira extendiendo a todos los navegadores, y sera entonces – cuando podamos invocar a un archivo WebP, del mismo modo que lo haríamos con un JPEG o un PNG – que recomendaremos su uso.

Hasta entonces, los formatos clásicos de JPEG y PNG, son los que tienen un soporte completo en todos los navegadores, y que aplicando una buena compresión de imagen desde vuestro editor de imágenes preferido o a través de herramientas online como tinypng.com, podremos ofrecer una navegación rápida, acorde con las expectativas de los usuarios.

Related Posts

Háblanos
de tu proyecto
Estaremos encantados de ayudarte
Suscríbete
a nuestro newsletter

He leído y acepto la política de privacidad
INFORMACIÓN PROTECCIÓN DE DATOS DE SOLUTIONS TRILOGI, S.L.
Finalidades: Responder a sus solicitudes y remitirle información comercial de nuestros productos y servicios, incluso por correo electrónico. Legitimación: Consentimiento del interesado. Destinatarios: No están previstas cesiones de datos. Derechos: Puede retirar su consentimiento en cualquier momento, así como acceder, rectificar, suprimir sus datos y demás derechos en hola@tlgcommerce.com. Información Adicional: Puede ampliar la información en el enlace de Avisos Legales.
igualada
Milà i Fontanals, 3 · 08700 Igualada
barcelona
Passeig de Gracia, 54 3ro. · 08007 Barcelona
hong kong
Room 3, Smart-Space 3C, Cyberport 3
100 Cyberport Road · Hong Kong
shanghai
Room 216, 555 Wu Ding Road, Jing’an District · Shanghai
上海市静安区武定路555号216室 中国