De GIF a WebP: los formatos de imagen y el SEO

Cuando realizas optimizaciones SEO on page, una de las básicas en lo que se refiere a WPO o rendimiento de la página es el tamaño y el peso de las imágenes.

 No es un asunto que se deba pasar por alto, porque influye de manera directa en factores de ranking como la velocidad de carga y, en definitiva, en la experiencia de usuario.

 A lo largo de este post vamos a desentrañar los principales formatos de imagen que se utilizan habitualmente, cuándo es mejor usar cada uno de ellos y los nuevos formatos –capaces de ofrecer compresión con y sin pérdida– surgidos con la necesidad de mejorar el rendimiento SEO, como WebP o JPG2000.

En realidad, cualquiera que tenga un conocimiento básico de Internet está habituado a tratar con archivos .jpg o .gif, por poner un ejemplo. Pero... ¿Sabes cuáles son sus diferencias? ¿Cuándo conviene utilizar unos y otros?

 Veámoslo uno por uno.

Uno de los veteranos en lo tocante a imagen digital. Su nombre viene de las siglas Graphic Interchange Format  y se caracteriza por:

• Utilizar una paleta limitada de entre 2 y 256 colores.
• Ofrecer la posibilidad de emplear un fondo transparente.
• Es un formato que permite realizar animaciones básicas.

Sus principales virtudes pueden ser, al mismo tiempo, sus inconvenientes. La limitación de la paleta hace que las imágenes que representan la realidad (como un producto, un retrato, un paisaje…) no ofrezcan la calidad mínima exigible, quedando “posterizadas”.

Las animaciones, que se siguen utilizando habitualmente en social media o en la creación de banners para campañas de display, son bastante toscas para la web, y hay otras alternativas más interesantes al uso de GIFS animados.

Este formato, que nace de las siglas de Portable Network Graphics, comparte muchas características con GIF con ciertos matices, pero también tiene algunas que lo hacen único:

• Paleta de colores limitada pero con formatos específicos para 8 y 24 bits.
• Transparencias en fondos  más nítidas.
• Algoritmo de compresión sin pérdida.

Debemos utilizar PNG cuando queramos incorporar a la página pequeños gráficos sencillos o ilustraciones con una cantidad limitada de colores y que requieran de transparencia (logos, botones…).

No es el formato adecuado para fotografías porque, al igual que en el caso de GIF, no dará el resultado visual con una calidad mínima, y además tendrá un peso excesivo penalizando la velocidad de carga y, por extensión, el SEO de nuestro eCommerce.

En realidad, se escribe de ambas formas y su nombre proviene del Joint Photographic Experts Group.

 Se puede considerar como el estándar entre los formatos de imagen digital porque, como puedes imaginar, está especialmente pensado para la representación de imágenes con calidad fotográfica.

• Cuenta con un algoritmo que comprime la información.
• Permite elegir el nivel de compresión.
• Amplitud de paleta de colores 24 bits.

 A diferencia de GIF y PNG, es un formato idóneo para las fotografías detalladas de cualquier eCommerce. Aunque la compresión que utiliza es con pérdida, tenemos herramientas que optimizan las fotografías sin que su calidad se vea afectada.

Este es un formato, como todos los comentados, relativamente antiguo. Conscientes de la necesidad de actualizarse a la realidad de la nueva web y los diferentes soportes, lanzaron una versión llamada JPG 2000 realmente optimizada. Un nuevo formato que se diferencia del anterior en aspectos como:

• Capacidad de generar imagen comprimida con y sin pérdida en el mismo flujo del archivo.
• Elevada calidad incluso en compresión con pérdida si se compara con el JPG estándar.

 Básicamente, lo que nos aporta es una mayor relación de calidad con un peso contenido, lo que es ideal tanto desde el prisma del SEO como del diseño y la experiencia de usuario.

Si JPG 2000 es la evolución, podemos decir que WebP es la apuesta por un formato de imagen para web especialmente enfocado al SEO. En realidad, su nombre ya nos da una pista, pero es que cualquier duda se despeja de inmediato cuando te diga que Google es su flamante propietario.

• Al igual que JPEG2000, permite crear imágenes con y sin compresión en el mismo archivo.
• Es muy rápido tanto en la compresión como en la descompresión en el navegador.
• Soporta transiciones y animaciones.

 Si quieres trastear con WebP y hacer tus propias pruebas, tienes varios conversores online que puedes utilizar de manera gratuita como éste que, como ventaja adicional, te permite guardar los ajustes para transformar diferentes fotos con los mismos parámetros.

Visto así parece la mejor opción, ¿verdad? Seguramente lo sea en un corto plazo, pero ahora mismo tiene algunos inconvenientes, como el no ser 100% compatible con algunos navegadores como Safari (aunque en la actualización de iOS 14 ya se contempla el soporte a este nuevo formato).

 Otro problema que vas a encontrar es que no se pueden editar con PhotoShop directamente, necesitan un plugin para hacerlo.