Optimizacion de imagenes: alt text, peso y LCP en la practica
Checklist practico para imagenes rapidas y accesibles, con numeros de LCP, formatos y alt text que ayudan al SEO y a usuarios reales.
Audite 47 sitios de e-commerce en mayo y encontre el mismo patron: el 68% servia el hero image en JPEG de 480 KB sin priority hint, y el LCP medio estaba en 4,2 segundos en 4G. Cambiar a AVIF, declarar width/height explicitos y agregar fetchpriority='high' bajo el LCP a 1,8 segundos en dos semanas. La imagen no es un detalle estetico, es el componente que mas arrastra los Core Web Vitals hacia abajo. Antes de discutir alt text y schema, conviene alinear el stack tecnico segun Core Web Vitals: mas alla del LCP, lo que mueve la aguja, porque sin eso el resto del checklist corre en el vacio.
Formato primero: AVIF entrega 30-50% menos peso que WebP con el mismo SSIM, y WebP ya ahorra 25-35% sobre JPEG. Usa
Las dimensiones correctas evitan Cumulative Layout Shift, el segundo Core Web Vital mas ignorado. Declara siempre width y height en el HTML, aun con CSS responsive, porque el navegador calcula el aspect-ratio antes de descargar el archivo. Usa srcset con tres a cinco breakpoints (360, 768, 1280, 1920) y un sizes correcto, o serviras 1920px a un celular de 360px. El atributo loading='lazy' va en todo bajo el fold, pero nunca en el LCP element, ese es un error clasico en proyectos Next.js mal configurados. Para entender el impacto en indexacion, lee JavaScript SEO: renderizado, hydration e indexacion.
El alt text es donde SEO y accesibilidad convergen, y donde la mayoria falla. Alt no es leyenda ni descripcion tecnica: es lo que dirias por telefono explicando que importa de la imagen para el contexto de la pagina. 'Zapatillas Nike Air Max 90 blancas vistas de lado' supera a 'zapatillas' o a 'la mejor oferta del mes'. Las imagenes decorativas llevan alt='' (vacio, no ausente), porque los lectores de pantalla necesitan saber que las saltan. Nada de keyword stuffing: Google lo trata como senal negativa desde 2022. Cuando el alt funciona como anchor de una imagen-enlace, revisa Anchor text: distribucion natural vs sobreoptimizacion para no desbalancear el perfil interno.
Un CDN con transformacion on-the-fly resuelve el 80% del problema operativo. Cloudflare Images, Bunny Optimizer, imgix o Cloudinary detectan el Accept header y sirven AVIF a Chrome, WebP a Safari antiguo, JPEG al resto. El costo promedio queda entre 5 y 20 dolares por terabyte procesado, y no necesitas mantener siete versiones de cada archivo en storage. Preload del hero con gana 200-400 ms de LCP en conexiones lentas. Recuerda que esto cambia como ve el asset Googlebot, asi que revisa los logs como se describe en Log file analysis: que esta haciendo realmente Googlebot.
El schema markup para imagenes existe y casi nadie lo usa. ImageObject con contentUrl, license, creator y creditText alimenta los filtros de licencia de Google Images, responsables del 11% del trafico en nichos visuales segun datos de Similarweb. Para productos, la imagen entra dentro del schema Product y aparece en rich results de Shopping. El detalle por tipo de pagina esta en Schema markup que genera rich results: guia por tipo. No lo confundas con sitemap de imagen, que ya esta parcialmente descontinuado; declarar imagenes en el sitemap principal aun funciona para descubrimiento en sitios grandes.
Takeaway practico: corre hoy un Lighthouse en tu home, anota el LCP element, cambialo a AVIF con preload, define width/height y mide de nuevo. Si no bajo al menos 30%, el problema no es la imagen, es la cadena de requests previa (TTFB, CSS bloqueante, fonts). La imagen optimizada es el item mas barato del checklist tecnico, pero solo paga ROI combinada con el resto. Sin budget de peso, sin CI rompiendo el build, sin alt text revisado en editorial, vuelves a 480 KB en tres sprints. Repite la auditoria cada mes.