SEO y rendimiento web
Optimizar imágenes web sin perder calidad perceptible
WebP y AVIF, dimensiones responsivas, lazy loading y compresión client-side: guía para diseñadores y equipos dev que reducen LCP y ancho de banda.
12 min de lectura · Actualizado 2026-07-22
Peso de imagen = tiempo = conversión
En landings B2B, imágenes suelen ser 60–80 % del peso total de página. Un hero PNG de 2.5 MB en móvil 4G añade segundos de LCP aunque el HTML sea perfecto.
Google usa CWV en ranking; usuarios abandonan si el contenido principal tarda > 3 s. Optimizar imágenes es el ROI más alto en performance web.
Calidad perceptible ≠ resolución máxima. 1200px ancho suficiente para retina en mayoría heroes desktop; thumbnails 400px.
El compresor de imágenes del Toolbox procesa en navegador (WebAssembly) — archivos no suben a servidor Conecta, útil para agencias con política de confidencialidad.
Formatos modernos: WebP y AVIF
JPEG/PNG legacy para compatibilidad fallback; servir WebP/AVIF vía picture o next/image con negociación Accept.
AVIF ~30–50 % más pequeño que WebP a calidad similar; costo encode mayor — ideal assets estáticos pre-generados en build.
WebP lossy quality 75–85 suele ser indistinguible de JPEG 90 en fotos corporativas. PNG solo para gráficos con transparencia sharp — si no, WebP lossless.
SVG para logos e iconos — escala infinita, peso mínimo. No rasterices logo SVG a PNG 4000px.
Dimensiones correctas y responsive
Nunca sirvas width=4000 img en contenedor max-width 800 CSS. Genera srcset 400w, 800w, 1200w, 1600w; browser elige según DPR y viewport.
next/image y similar generan automáticamente; WordPress con plugin offload + CDN resize on the fly.
Art direction: crop distinto mobile vs desktop con picture media queries en heroes donde composición importa.
Lazy loading native loading=lazy en below-fold; above-fold LCP sin lazy + dimensions explícitas anti-CLS.
Workflow diseño → producción
Export Figma/Photoshop a sRGB, sin metadata EXIF innecesaria. Batch compress con compresor Toolbox antes de subir CMS.
Naming y carpetas: /heroes/home-1200.webp, /team/alvaro-400.webp — evita IMG_8843.jpg en prod.
CDN cache immutable 1 año para assets hash en filename; purge solo al cambiar contenido.
Política: máximo 150 KB hero mobile, 350 KB desktop hero — límites en CI Lighthouse budget opcional.
Casos especiales y auditoría
OG images y email newsletters: JPG ancho fijo, texto legible en thumbnail. AVIF no siempre soportado en clientes correo.
E-commerce catálogo 5k SKUs: pipeline automático upload → resize → WebP en worker; manual inviable.
Lazy + SEO: Google rastrea lazy images si están en HTML con src o data-src estándar; evita infinite scroll sin paginación crawlable.
Hosting LiteSpeed con WebP convert automático ayuda WordPress legacy; Conecta combina compresión front con cache servidor en planes administrados.
Ponlo en práctica ahora
Usa las herramientas gratuitas del Toolbox para validar tu configuración en minutos.
¿Necesitas que lo resolvamos contigo?
Un ingeniero de Conecta puede aplicar esto en tu operación: servicio relacionado o conversación directa.