Una hero de 4 MB arruina cualquier presupuesto de performance. El pipeline de imágenes correcto es de las victorias más rápidas en Core Web Vitals.
Formatos
- AVIF: mejor compresión; buen soporte en 2026 con fallback.
- WebP: estándar seguro para fotos.
- PNG solo si necesitas transparencia fina; SVG para iconos.
- JPEG de baja calidad solo como último fallback.
Responsive de verdad
Usa srcset + sizes según el layout (no sirve de nada tener 1600w si en móvil se renderiza a 400px). Genera 2–4 variantes por asset clave.
Carga
- Hero: fetchpriority="high", sin lazy, dimensiones explícitas.
- Resto: loading="lazy" + width/height o aspect-ratio.
- Preload selectivo de la imagen LCP, no de todo el carrusel.
- CDN con transform on-the-fly (o build-time si el stack es estático).
Alt y SEO de imagen
Alt descriptivo con contexto, filenames legibles y sitemap de imágenes si el tráfico de Google Images importa (moda, recetas, productos).
Auditiza con Coverage en DevTools: casi siempre hay 1–2 MB de imágenes “de adorno” listas para eliminar.
