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

25/02/2021
  • ¿Sabes que elegir bien el formato de tus imágenes tiene impacto directo en el SEO de tu página? Te contamos los que existen, incluyendo lo último: WebP de Google.

  • 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.

  • Formatos de imagen para web

  • 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.

  • #1 – GIF

  • 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.

    Aún así, sin ser óptima para SEO, sigue teniendo su uso en detalles como logos (o elementos similares con pocos colores) que “floten” sobre otras imágenes.
  • #2 - PNG

  • 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.

  • #3 - JPG o JPEG

  • 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.

  • #4 – WebP

  • 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.

  • ¿Te ha quedado alguna duda de qué formato de imagen utilizar para mejorar el SEO de tu eCommerce? ¡Pregunta, que estamos para ayudarte!

  • Imágenes | Unsplash, herramienta enlazada.

Jordi Ordoñez


Jordi Ordóñez és consultor eCommerce i SEO amb 16 anys d'experiència en projectes online. Ha assessorat a clients com Castañer, Textura, Acumbamail, Kartox o Casa Ametller. Escriu al blog oficial de Prestashop, BrainSINS, Marketing4ecommerce, Fotografía eCommerce, Socialancer, eCommerce-news.es i SEMRush entre d'altres. És redactor al blog d'Oleoshop.
comments powered by Disqus

Buscar entradas

Últimas entradas

Este sitio web almacena datos como cookies para habilitar la funcionalidad necesaria del sitio, incluidos análisis y personalización. Puede cambiar su configuración en cualquier momento o aceptar la configuración predeterminada.

política de cookies

Esenciales

Las cookies necesarias ayudan a hacer una página web utilizable activando funciones básicas como la navegación en la página y el acceso a áreas seguras de la página web. La página web no puede funcionar adecuadamente sin estas cookies.


Personalización

Las cookies de personalización permiten a la página web recordar información que cambia la forma en que la página se comporta o el aspecto que tiene, como su idioma preferido o la región en la que usted se encuentra.


Análisis

Las cookies estadísticas ayudan a los propietarios de páginas web a comprender cómo interactúan los visitantes con las páginas web reuniendo y proporcionando información de forma anónima.


Marketing

Las cookies de marketing se utilizan para rastrear a los visitantes en las páginas web. La intención es mostrar anuncios relevantes y atractivos para el usuario individual, y por lo tanto, más valiosos para los editores y terceros anunciantes.