Al mencionar formato de imágenes para un sitio web tenemos presentes las opciones más comunes JPG/JPEG y PNG. Estos formatos llevan años con nosotros y son los que todos tenemos en el ordenador o en el navegador. Pero la realidad es que, al hacer una página web, estos formatos se están quedando obsoletos, principalmente por las exigencias de los buscadores como Google, que cada vez exigen webs más rápidas y menos tiempo de carga.

JPG y PNG, al ser de los primeros formatos, su objetivo era simple. Cuanta mayor calidad, mayor el peso. Pero esto no beneficiaba a la página web en cuestión, puesto que al momento de ejecutar la página web, Google tenía posibilidades de descartarla para los primeros puestos si no cargaba lo suficientemente rápido.

Para este problema existen las imágenes de próxima generación. Son un nuevo formato de imágenes cuyo objetivo es ayudar en cuanto el page speed (más adelante te hablamos de esto) y el core web vitals debido a su buena calidad y poco peso.

Objetivo de las imágenes de próxima generación

Como mencionamos en el párrafo anterior, el objetivo que cumple este nuevo formato es optimizar tu página web. Esto ayuda a tener un mejor posicionamiento. En Google, si una web tarda más de 3 segundos en cargar esta perderá posicionamiento vital.

La nueva generación tiene 3 formatos de imágenes, JPG XR, JPG 2000 y WEBP. Cada uno tiene su respectivo navegador (esto debido a problemas generados por la compra de su matrícula para el uso en dichos navegadores web).

Si bien el principal buscador recomienda este formato, no hay una obligación de usar uno u otro.

Tendremos que medir cuál es el que mejor resultado brinda y al final se convertirá en estándar por su uso generalizado.

Especificaciones de los formatos de imágenes de nueva generación

JPG XR

Sus orígenes se encuentran en Microsoft.

Nos da la opción de guardar las imágenes con pérdida o sin pérdida.

¿A qué nos referimos con esto? Las imágenes sin pérdida conservan todas las características que la original, por consecuencia un mayor peso (sin superar el peso de un JPG). Las imágenes con pérdida por otro lado ofrece la pérdida de algunos detalles, pero su peso baja considerablemente.

Este formato es ideal para dispositivos portátiles, puesto que no ocupan mucho espacio.

En resumidas cuentas, este formato permite crear imágenes con la misma calidad que un JPG, pero con la mitad del peso.

JPG 2000

Es creado por el comité de “Joint Photographic Experts Group” (creadores de JPG) con la intención de sustituir y mejorar el formato original. Su extensión es “JP2”.

Tiene una compresión sin pérdidas y con pérdidas. Posee un formato de archivos flexible los cuales nos permiten manipular la información del espacio color y los metadatos.

Para ayudar, tiene una capacidad de recuperación de errores. Este formato se puede encontrar en los navegadores Opera (via QuickTime), Mozilla Firefox 3 (vía Extensión) y Safari.

WebP

Fue creado por Google en el año 2010. Tiene una compresión con pérdida. Se puede decir que es un directo competidor de JPG.
Algunos de los navegadores que son compatibles con este formato son Chrome 9, Opera 10 y 11, Edge, Mini, Firefox, Opera Mobile, etc., a excepción de Safari (se cree que por una rivalidad económica).

Actualmente los navegadores web reciben más búsquedas desde teléfonos móviles que de ordenadores convencionales. Esto se debe a que tenemos toda la información que necesitamos al instante desde cualquier lugar.

Pero aquí es donde llega el problema de las extensiones JPG y PNG, puesto que sus imágenes tienen un peso mayor, estas afectan negativamente al Page Speed o tiempo de carga y a los Core Web Vitals.

Imágenes de próxima generación y Page Speed

El factor tiempo de carga de una web es de desde hace años un factor de posicionamiento que el principal buscador que tenemos (Google) así establece.

Para ello nos pone a disposición una herramienta para poder medir el tiempo de carga tanto para móvil como para ordenador: PageSpeed Insights

Luego de la medición, la herramienta brinda recomendaciones de posibles soluciones y una de ellas es: “utilizar imágenes de próxima generación”.

Es decir, que es el propio Google quien realiza la recomendación porque es mejor seguir sus pautas a la hora de la carga de la web.

Imágenes de próxima generación y Core web Vitals

Core web vitals

Es un nuevo factor implementado por Google para la creación de páginas web. Se encarga de evaluar la velocidad de carga, la capacidad de respuesta, la interacción y la experiencia de usuario, entre otros.

Al momento de evaluar una página, Google tiene en cuenta 3 factores:  la carga de contenidos (LCP / Largest Contentful Paint), la interactividad (FID / First Input Delay) y la estabilidad visual (CLS / Comulative Layout Shift).

Google evaluará tu web con los aspectos esenciales anteriormente mencionados. Cuanto mejor puntúen estos aspectos, mejor será el posicionamiento otorgado a la web.

LCP o Largest Contentful Paint (Velocidad de carga)

Es el encargado de calcular cuánto tiempo tarda la página en cargar sus elementos más pesados, desde la imagen más pesada (por eso la importancia del nuevo formato de imágenes) hasta el texto más pesado.

Podemos identificar un LCP alto si, por ejemplo vemos, aparecer el título de la página (generalmente un elemento menos pesado) y posteriormente la imagen principal o la más pesada. Eso desfavorece a la página web. En caso contrario, si es que la imagen carga primero y luego vemos aparecer la información complementaria. A esto se le identificará como un LCP bajo, ayudando al posicionamiento web.

FID o First Input Delay (la interacción)

Este elemento se encuentra relacionado con el anterior, ya que mide el tiempo de relación de una página con base en la interacción que tenga el usuario con esta. Por ejemplo, si en plena carga presionamos un link de esta web que continuaba cargando, Google medirá cuánto tiempo tarda en redirigirnos a ese link.

CLS o Cumulative Layout Shift (la estabilidad visual)

Este también guarda relación con los 2 puntos anteriores, puesto que mide el desplazamiento de los elementos que se generan mientras van cargando. Por ejemplo: supongamos que iniciamos la página y los elementos se están cargando. Vemos cómo aparece el subtítulo, el encabezado, la página y segundos después, es desplazado hacia abajo y vemos aparecer el título, eso es lo que mide el CLS.

¡Si necesitas optimizar el peso de tu página web para que pueda tener un buen posicionamiento y cargue rápidamente, podemos ayudarte! ¡Contáctanos!