Imágenes web: WebP, AVIF y alt para que tu sitio cargue rápido

Publicaste el catálogo nuevo, las fotos quedaron hermosas y el cliente abre la página desde el celular, en la calle. Ve un recuadro gris durante cuatro segundos, mira hacia otro lado y escribe a la competencia. La foto que más te costó producir puede ser justo la que te quita la venta.

¿Qué formato de imagen debo usar en mi web?

Usa WebP o AVIF como formato principal y deja JPEG o PNG solo como respaldo. Según web.dev, estos formatos modernos generalmente comprimen mejor que los antiguos y funcionan en todos los navegadores modernos. Sus versiones con pérdida son una buena alternativa al JPEG para fotos, y el WebP sin pérdida puede ser más eficiente que el PNG.

Formato	Mejor para	Transparencia
JPEG	Fotos, compatibilidad total	No
PNG	Logos y capturas nítidas	Sí
WebP	Fotos y gráficos en general	Sí
AVIF	Fotos con buena compresión	Sí

La contrapartida es que la compresión con pérdida descarta información, y algunos colores pueden no coincidir con el JPEG equivalente. Revisa siempre el resultado antes de subir.

¿Google puede indexar mis imágenes WebP y AVIF?

Sí, Google las entiende sin problema. La guía de imágenes de Google Search Central lista como formatos compatibles BMP, GIF, JPEG, PNG, WebP, SVG y AVIF. También recomienda que la extensión del archivo coincida con su tipo real y que el nombre sea corto y descriptivo, por ejemplo zapatos-cuero-negro.webp y no img1.jpg.

Error común: subir fotos directas de la cámara o del celular, de varios megabytes, y confiar en que el navegador las “encoge”. Se descargan completas igual. Redimensiona y comprime antes de publicar.

¿Qué escribo en el texto alternativo (alt)?

Describe lo que se ve, de forma útil y específica para esa página. Google lo llama el atributo más importante de una imagen. Su ejemplo es claro: “cachorro” es mejor que nada, pero “cachorro dálmata jugando a buscar la pelota” es mejor aún. Usa palabras clave solo si salen de forma natural: la guía advierte que rellenar el alt de palabras clave da mala experiencia y puede parecer spam.

Si usas versiones para distintos tamaños de pantalla, Google indica que puedes servirlas con picture o srcset, siempre con un src de respaldo. Y si tu sitio tiene varios idiomas, traduce también los nombres de archivo y los alt, como explicamos en hreflang para sitios en varios idiomas.

¿Cuándo no debo usar carga diferida?

En la imagen principal de la página, la que aparece al abrirla. web.dev es tajante: “nunca cargues de forma diferida tu imagen LCP”, porque añade un retraso innecesario. Para esa imagen, considera fetchpriority="high", pero con medida: darle prioridad alta a más de una o dos imágenes deja de ayudar.

La meta, según la misma fuente, es un LCP de 2,5 segundos o menos en al menos el 75 % de las visitas. Si quieres entender las tres métricas completas, lee velocidad web y Core Web Vitals.

¿Qué checklist sigo antes de publicar una imagen?

Cinco revisiones rápidas evitan casi todos los problemas:

1. Formato moderno (WebP o AVIF) y peso razonable.
2. Nombre de archivo corto y descriptivo, sin img1.
3. Alt útil y específico, sin relleno de palabras clave.
4. Ancho y alto definidos, para que la página no salte al cargar.
5. Carga diferida en las imágenes de abajo, nunca en la principal.

Además, la imagen que se ve al compartir tu enlace en redes tiene sus propias reglas: las contamos en Open Graph, cómo se ve tu enlace al compartirlo. Y cuando publiques páginas nuevas, avisa a Google como explicamos en Search Console y sitemap.

En resumen

Una foto lenta o sin descripción desperdicia el trabajo de quien la tomó y la paciencia de quien la espera. Elige WebP o AVIF, escribe un alt honesto, no difieras la imagen principal y vuelve a medir. Si quieres que revisemos tu sitio de punta a punta, mira nuestro servicio de desarrollo web.