Imágenes y SEO: peso, formato y texto alternativo para posicionar mejor

El SEO de imágenes depende de tres cosas: que pesen poco para no frenar la carga, que estén en un formato que Google y los navegadores entiendan, y que tengan un nombre y un texto alternativo que describan lo que muestran. Ninguna de las tres es difícil. Lo que pasa es que se hacen al final, con prisa, subiendo la foto tal cual sale de la cámara o del celular.

Esta guía es para quien lleva una web o una tienda online y quiere que sus imágenes ayuden al posicionamiento. Al final hay herramientas para convertir y optimizar sin instalar nada.

Cómo afecta el peso de las imágenes a la velocidad de carga

Según la guía de imágenes de Google Search Central, las imágenes suelen ser lo que más contribuye al tamaño total de una página. Una foto de producto de varios megas en la portada de una tienda es tiempo de descarga que el visitante paga antes de ver nada.

Google mide esa experiencia con las Core Web Vitals. Según su documentación, son tres métricas: Largest Contentful Paint (LCP), Interaction to Next Paint (INP) y Cumulative Layout Shift (CLS). Google recomienda lograr buenas Core Web Vitals "para tener éxito en la Búsqueda", y dice que eso se alinea con lo que sus sistemas de ranking buscan premiar (la traducción es mía). La misma página las presenta junto a otros aspectos de la experiencia de página: pesan, pero no deciden solas.

LCP: la imagen grande de arriba

El LCP mide cuánto tarda en pintarse el elemento más grande visible al cargar la página. web.dev fija el umbral bueno en 2,5 segundos o menos, medido en el percentil 75 de las cargas. Entre los elementos que cuentan como candidatos están las etiquetas <img>, las imágenes de fondo cargadas con url() en CSS y el póster de un <video>.

En una tienda o un blog, el elemento LCP suele ser una imagen: el banner de portada, la foto principal del producto, la imagen destacada del artículo. Si esa imagen pesa de más, el LCP sale mal aunque el resto de la página sea liviano.

CLS: imágenes que empujan el contenido

El CLS mide cuánto se mueve el contenido mientras carga. El umbral bueno es 0,1 o menos, y la propia guía de web.dev lista las imágenes sin dimensiones como una de las causas. Es ese salto molesto en el que vas a tocar un botón y se baja porque terminó de cargar una foto encima. Se arregla con width y height, que vemos más abajo.

La lección: la imagen más visible de cada plantilla (portada, ficha de producto, artículo) es la que más te conviene aligerar primero.

Qué formato usar: JPG, PNG, WebP o AVIF

El formato decide cuánto pesa una imagen a igual calidad y qué cosas puede guardar (transparencia, animación). Google Search admite, según su guía de imágenes, BMP, GIF, JPEG, PNG, WebP, SVG y AVIF. Con cualquiera de los cuatro de esta sección estás cubierto en indexación; la diferencia está en el peso y la compatibilidad.

Esto es lo que dice la guía de formatos de imagen de MDN de cada uno:

WebP y AVIF admiten compresión con y sin pérdida y transparencia, así que sirven tanto para fotos como para gráficos. Hoy los soportan las versiones actuales de Chrome, Firefox, Edge y Safari, según caniuse para WebP y AVIF. Para una web, son la primera opción.

Cuándo conviene convertir a JPG

Convertir a JPG tiene sentido cuando la imagen tiene que abrirse fuera de tu web: en otro programa, en un CMS viejo o en un formulario de carga. JPEG es, según MDN, el formato con pérdida más usado para imágenes fijas, y por eso es el que menos sorpresas da cuando no sabes qué hay del otro lado.

Los casos típicos:

• Fotos HEIC del iPhone que tu CMS, tu plataforma de ecommerce o el programa de un proveedor no acepta.
• Imágenes WebP o AVIF descargadas que necesitas editar o reenviar, cuando el programa de destino no las abre.
• Formularios de carga que solo admiten JPG o PNG.
• Fotos guardadas como PNG: pesan de más porque PNG comprime sin descartar información, y pasarlas a JPG las aligera.

Un aviso antes de convertir: JPEG no tiene canal alfa, así que un PNG con fondo transparente pierde la transparencia al pasar a JPG. Para logos e iconos, quédate en PNG, WebP o SVG.

La lección: WebP o AVIF para lo que se publica en tu web; JPG cuando la imagen tiene que viajar a otro programa o plataforma.

Nombre de archivo, texto alternativo y dimensiones

El nombre, el alt y las dimensiones son el contexto que acompaña a la imagen: ayudan a Google a entender qué muestra y al navegador a reservarle el espacio correcto.

Nombre de archivo descriptivo

El nombre del archivo le da a Google, en palabras de su guía, "pistas muy ligeras" sobre el tema de la imagen, y ponerle un buen nombre no cuesta nada. Google recomienda nombres cortos y descriptivos, y pone de ejemplo my-new-black-kitten.jpg frente a IMG00023.JPG.

En español sería algo como zapatillas-running-mujer-azul.jpg en lugar de DSC_4821.jpg. Minúsculas, palabras separadas por guiones, sin tildes ni eñes si quieres evitar problemas de codificación en la URL, y con la extensión que corresponde al formato real del archivo, que Google también recomienda.

Texto alternativo (alt) bien escrito

El atributo alt es, según Google, el atributo más importante para describir una imagen. Sirve a la vez para la accesibilidad, porque es lo que leen los lectores de pantalla, y para que Google entienda el contenido. Si la imagen es un enlace, el alt funciona además como texto del enlace.

Google pone una escala de ejemplos en su guía, que traduzco con el mismo ejemplo de un cachorro:

<!-- Mal: sin alt -->
<img src="cachorro.jpg">
 
<!-- Mal: relleno de palabras clave -->
<img src="cachorro.jpg" alt="cachorro perro cachorro pequeño perrito cachorros perros comprar cachorro">
 
<!-- Mejor -->
<img src="cachorro.jpg" alt="cachorro">
 
<!-- Lo mejor -->
<img src="cachorro.jpg" alt="Cachorro dálmata jugando a buscar la pelota">

Llenar el alt de palabras clave es keyword stuffing, y Google advierte que puede hacer que tu sitio se vea como spam. La regla práctica: escribe lo que le dirías a alguien que no puede ver la imagen. En una ficha de producto, eso suele incluir el nombre del producto de forma natural.

Dos detalles más de la misma guía: coloca las imágenes cerca del texto que trata sobre ellas, y usa etiquetas <img> para las imágenes que quieres que se indexen, porque Google no indexa las imágenes puestas como fondo con CSS.

Dimensiones: width y height

Las dimensiones evitan que la página salte mientras carga. web.dev lo dice sin matices en su guía para optimizar el CLS: incluye siempre los atributos width y height en tus imágenes, o reserva el espacio con aspect-ratio en CSS. Los navegadores modernos usan esos dos atributos para calcular la proporción antes de que llegue la imagen.

<img src="zapatillas-running-mujer-azul.webp"
     alt="Zapatillas de running para mujer en azul, vista lateral"
     width="1200" height="800">

img {
  max-width: 100%;
  height: auto;
}

Con eso la imagen sigue siendo responsive y el navegador le guarda el hueco desde el principio.

Sobre la carga diferida, una advertencia de web.dev: no uses loading="lazy" en imágenes que se ven al cargar la página, y menos en la imagen LCP. Ponlo solo en las que quedan más abajo. Para la imagen principal, la misma guía sugiere fetchpriority="high".

Herramientas online para convertir y optimizar imágenes sin instalar nada

Una herramienta online resuelve el caso más común: tienes un puñado de imágenes, no quieres instalar un editor ni aprender un programa de línea de comandos, y necesitas que salgan convertidas, más livianas o al tamaño correcto.

Convertir imágenes a JPG online con Pictulab

Si lo que necesitas es convertir imágenes a JPG con Pictulab, el conversor funciona desde el navegador: arrastras las imágenes, o las pegas con Ctrl/⌘ + V, y descargas el JPG. Según su página, acepta PNG, WebP, AVIF, HEIC, BMP, TIFF y SVG, permite convertir varias imágenes a la vez y descargarlas en lote, y es gratis, sin registro y sin marcas de agua.

La misma página indica que los archivos se procesan en tu navegador, sin subirlos a ningún servidor, así que las fotos de clientes o de productos que todavía no salieron se quedan en tu computadora.

Encaja en los casos de la sección anterior: las fotos HEIC del iPhone (tiene además una página específica, HEIC a JPG), los WebP que un programa no abre o los PNG de fotos que pesan de más.

Comprimir, redimensionar y pasar a WebP

Además de convertir, el SEO de imágenes pide comprimir, redimensionar y publicar en formatos modernos. Pictulab tiene una herramienta para cada paso:

• Comprimir imagen reduce el peso manteniendo el formato.
• Redimensionar imagen deja la foto en las dimensiones exactas que vas a usar. Subir una foto de 4000 píxeles de ancho para mostrarla a 800 es descargar píxeles que nadie ve.
• Convertir a WebP pasa a WebP lo que vas a publicar en tu web.

Medir antes y después

PageSpeed Insights, que Google recomienda en su guía de imágenes, te dice cuál es el elemento LCP de la página y qué imágenes conviene aligerar. Pásale la URL antes de tocar nada y otra vez después: si el LCP baja y desaparecen los avisos de imágenes, el trabajo sirvió.

Por dónde empezar con el SEO de imágenes

Todo lo de esta guía se decide una vez por imagen, al subirla: nombre, alt, dimensiones, formato y peso. Hacerlo en ese momento es fácil; corregirlo después en cientos de fichas de producto ya publicadas es un proyecto.

Si tienes que empezar por algo, empieza por la imagen más grande de tu portada y de tu plantilla de producto o artículo. Pásala por PageSpeed Insights, redúcela al ancho real que se muestra, conviértela a WebP o comprímela, y ponle width, height y un alt que la describa.

Preguntas frecuentes

Fuentes

• Image SEO Best Practices (Google Search Central: formatos admitidos, nombre de archivo, alt, imágenes CSS)
• Understanding Core Web Vitals and Google search results (Google Search Central: las tres métricas y su relación con la Búsqueda)
• Largest Contentful Paint (LCP) (web.dev: umbral y elementos candidatos)
• Cumulative Layout Shift (CLS) (web.dev: umbral)
• Optimize Cumulative Layout Shift (web.dev: imágenes sin dimensiones)
• Browser-level image lazy loading for the web (web.dev: no diferir la imagen LCP)
• Image file type and format guide (MDN: características de JPEG, PNG, WebP y AVIF)
• Can I use: WebP y Can I use: AVIF (soporte en navegadores)
• Convertir imagen a JPG (Pictulab: formatos, conversión en lote y procesamiento en el navegador)