WebP vs PNG vs JPG: ¿qué formato es mejor para el SEO?

Un punto de partida honesto

Ningún buscador premia a una página por servirse en WebP. El formato no es un factor de posicionamiento. Lo que sí se mide es cuánto tarda una página en ser útil para quien la ha abierto, y en la mayoría de las páginas las imágenes son lo más pesado que hay entre esos dos momentos. El formato importa porque los bytes importan, y por ningún otro motivo.

Este artículo trata de la entrega: qué formato servir, cómo servirlo y de qué puedes dejar de preocuparte. Si lo que de verdad quieres saber es qué formato va mejor con cada tipo de imagen, la guía sencilla sobre JPG, PNG y WebP responde directamente a esa pregunta y no tiene sentido repetirlo aquí.

Dónde afecta una imagen a las métricas de tu página

En la página de un artículo o de un producto, el elemento visible más grande cuando la página se muestra por primera vez suele ser una imagen. Eso hace que su tiempo de descarga forme parte de cómo se puntúa el rendimiento de carga, así que una imagen principal pesada lastra la medición aunque todo lo demás de la página sea rápido. Las imágenes que aparecen más abajo no afectan a ese número en concreto, pero siguen compitiendo por el ancho de banda mientras llega la importante.

Ten presente el orden de las cosas. Servir las dimensiones en píxeles adecuadas ahorra mucho más que cambiar de formato, y reservar el espacio en la maquetación para que nada salte mientras cargan las imágenes no cuesta nada. El formato es la tercera palanca, no la primera.

Lo que WebP te aporta de verdad

Dos cosas. WebP con pérdida suele generar un archivo más pequeño que JPEG con una calidad visual comparable, así que envías menos datos por la red para la misma imagen. Y, a diferencia de JPEG, admite canal alfa: un solo formato sirve tanto para las fotografías como para los gráficos con transparencia de una página, y dejas de mantener dos procesos distintos.

El precio es un paso de codificación más en tu flujo de trabajo y la cuestión del formato de respaldo. Las versiones actuales de todos los navegadores principales admiten WebP, así que el respaldo importa mucho menos que hace unos años, pero si tu tráfico incluye dispositivos antiguos o clientes embebidos, sigue valiendo la pena conservar un JPEG.

Cómo servirlo sin romper nada

Para esto existe el elemento picture. Envuelve la imagen, añade un elemento source con el tipo image/webp que apunte al archivo moderno y deja dentro una etiqueta img normal como respaldo, con el JPEG en su src. Los navegadores que entienden WebP se quedan con la primera coincidencia, los que no pasan a la img, y en los dos casos se ve una imagen que funciona. Los rastreadores de los buscadores siguen las mismas reglas que un navegador, así que no hay nada raro que configurar.

Ya que estás editando ese marcado, haz tres cosas más. Pon atributos width y height explícitos en la img para que el navegador pueda reservar el espacio correcto antes de que llegue el archivo. Añade un srcset para que un móvil no descargue un archivo con tamaño de escritorio. Y escribe un atributo alt de verdad, que es lo que realmente influye en que la imagen pueda aparecer en los resultados de búsqueda de imágenes.

Dónde siguen teniendo sitio PNG y JPG

PNG sigue siendo la opción correcta para capturas de pantalla, diagramas, elementos de interfaz y cualquier cosa con bordes nítidos y pocos colores. La compresión con pérdida destroza ese tipo de contenido, y un artículo de ayuda lleno de capturas emborronadas es una página peor por muy rápido que cargue. WebP sin pérdida hace el mismo trabajo con un archivo más pequeño, si tus herramientas pueden generarlo.

JPEG continúa siendo la opción segura para fotografías cuando necesitas algo que pueda abrir cualquier cliente del planeta, y todavía es lo que corresponde poner en el hueco de respaldo de un elemento picture. Lo que no deberías hacer es servir una fotografía como PNG. Es la forma más habitual de que una página acabe pesando varios megabytes más de lo necesario.

Una nota sobre AVIF

AVIF suele ganar a WebP en tamaño de archivo, sobre todo con contenido fotográfico, a cambio de una codificación más lenta y de una compatibilidad que es buena en los navegadores actuales, pero no tan universal. Si tu proceso de compilación puede generarlo, va primero en el elemento picture, con WebP detrás y JPEG al final. Los conversores de este sitio no generan AVIF, así que ese formato es cosa de tus herramientas de compilación y no de esta web.

Lo que cambiar de formato no va a arreglar

• Una imagen de 4000 píxeles de ancho mostrada en una columna de 700 píxeles. WebP la hace más pequeña, pero sigue siendo exageradamente grande. Redimensiónala y después conviértela.
• Una imagen principal que no empieza a descargarse hasta que terminan varios scripts que bloquean el renderizado. El formato da igual si la petición todavía no se ha hecho.
• La falta de texto alternativo, un nombre de archivo como IMG_4471 o una página sin nada útil escrito. La búsqueda de imágenes se basa en la página que rodea a la imagen, no en el códec con el que se codificó.

Convertir unos cuantos archivos ahora

Los conversores JPG a WebP y PNG a WebP de este sitio aceptan una cola de imágenes y te devuelven un ZIP, con la codificación hecha en tu navegador y no en el servidor de otra persona. El conversor universal añade un control deslizante de calidad si quieres ajustar tú mismo el equilibrio entre calidad y tamaño. Ten en cuenta que al codificar de nuevo se pierde el bloque EXIF, así que el WebP llega sin los datos de cámara que llevaba el original.

Aun así, en un sitio que publica con regularidad, este trabajo corresponde a tu proceso de compilación o a tu CDN. Un proceso que genere varios anchos y formatos por cada imagen subida siempre ganará a cualquier método manual, porque nunca se queda sin hacer en una semana complicada. Convierte a mano cuando estés arreglando una página concreta. Automatízalo cuando estés arreglando un sitio entero.