Una persona entra en una web desde el móvil mientras espera que termine de cargar una página. La conexión funciona, pero la fotografía principal aparece tarde, el texto cambia de posición y cada desplazamiento revela otro recurso visual que aún no está listo. Para ese usuario, la web no se siente lenta por una sola causa. Se siente lenta porque la página ha priorizado mal sus imágenes.
Optimizar imagenes para web no consiste en reducir archivos sin criterio. Consiste en decidir qué imagen debe llegar primero, con qué dimensiones, en qué formato y con qué calidad, especialmente cuando una misma página debe funcionar en fibra, Wi‑Fi y redes móviles 4G o 5G. El test de velocidad de la CNMC permite comprobar la calidad real de distintas conexiones en España, un contexto que obliga a diseñar para condiciones variables, no solo para el entorno rápido del equipo de desarrollo.
Por qué las imágenes determinan el rendimiento de tu web
Una fotografía de portada, una imagen de producto o una captura de pantalla puede decidir si la página parece lista o todavía está cargando. El navegador debe descargar, decodificar y pintar ese recurso antes de que el usuario perciba completa la zona visible. Si el archivo pesa demasiado, aumenta el tiempo hasta que aparece el contenido principal y también el trabajo que debe realizar el dispositivo móvil.
Google utiliza métricas como Largest Contentful Paint, Speed Index, Cumulative Layout Shift y Total Blocking Time en PageSpeed Insights para analizar distintas partes de la carga. El rendimiento visual necesita métricas, no solo una revisión subjetiva en un ordenador rápido.
👉Descubre aqui nuestra guía practica para una Auditoría SEO técnico
El problema cambia según la conexión
Una web puede responder bien en la oficina y tardar demasiado en un móvil conectado a una red congestionada. España reúne condiciones de conectividad variadas, y la información oficial sobre la calidad de las telecomunicaciones en España ayuda a entender por qué el mismo archivo produce experiencias distintas según el visitante. Diseñar solo con fibra y Wi-Fi oculta problemas que aparecen en redes móviles.
La decisión tampoco depende únicamente del peso total. Una imagen hero sobredimensionada retrasa el mensaje, el formulario y la llamada a la acción de una landing. En una ficha de producto, reservar tarde el espacio visual puede desplazar el precio o el botón de compra justo cuando el usuario intenta interactuar.
En una conexión variable, unos cientos de kilobytes pueden retrasar la primera impresión. Por eso conviene revisar qué recurso llega primero, qué imágenes pueden esperar y qué tamaño necesita cada componente, en lugar de aplicar la misma compresión a toda la página.
Regla práctica: una imagen está optimizada cuando mantiene su función visual bajo las condiciones reales de los usuarios, no solo cuando se ve bien en el equipo del desarrollador.
Empieza identificando qué recurso define el LCP. Después, separa las imágenes visibles de las que quedan fuera de pantalla y comprueba que cada una tenga dimensiones acordes con su contenedor.
Elegir el formato correcto para cada tipo de imagen
El formato depende del contenido y del papel que desempeña la imagen en la página. WebP y AVIF suelen funcionar bien con fotografías y gráficos complejos. JPEG sigue siendo una opción compatible con prácticamente cualquier navegador, mientras que PNG resulta adecuado para transparencias, capturas con texto y gráficos que necesitan bordes precisos. Usar PNG para todo suele aumentar el peso sin mejorar la experiencia visual.
| Formato | Mejor para | Peso típico | Compatibilidad | Transparencia |
|---|---|---|---|---|
| WebP | Fotografías, miniaturas, gráficos web y recursos con transparencia | Variable, normalmente contenido | Amplia en navegadores actuales | Sí |
| AVIF | Fotografías y recursos donde se busca una compresión más agresiva | Variable, a menudo muy reducido | Buena en navegadores modernos, conviene ofrecer respaldo | Sí |
| JPEG optimizado | Fotografías y fondos sin transparencia | Variable | Muy amplia | No |
| PNG | Logos rasterizados, capturas con texto, gráficos y transparencia | Variable, puede crecer bastante | Muy amplia | Sí |
Una regla de decisión útil
Para la fotografía de un catálogo, WebP suele ofrecer un equilibrio práctico entre calidad, tamaño y compatibilidad. AVIF puede reducir más el archivo cuando el sistema de entrega genera variantes de forma automática, pero debe incluir una alternativa para los navegadores que no lo interpretan correctamente. En páginas con tráfico móvil y conexiones cambiantes, esta elección afecta directamente al tiempo que tarda en aparecer el contenido principal.
Un logo con transparencia puede encajar mejor como SVG si es vectorial. Un icono pequeño necesita un recurso ligero, no una fotografía comprimida. Por su parte, una captura de interfaz con texto fino puede perder legibilidad si se comprime demasiado. El formato debe conservar la información que el usuario necesita distinguir, especialmente cuando la imagen participa en el contenido visible del LCP.
El respaldo evita decisiones arriesgadas
El elemento picture permite ofrecer primero un formato moderno y mantener recursos alternativos:
<picture>
<source srcset="/img/producto.avif" type="image/avif">
<source srcset="/img/producto.webp" type="image/webp">
<img src="/img/producto.jpg"
width="1200"
height="800"
alt="Producto sobre una mesa">
</picture>
El navegador selecciona la primera opción compatible. Así puedes adoptar AVIF o WebP sin depender de un único formato ni servir siempre el mismo archivo a todos los visitantes.
Evita exportar cada recurso como PNG “por calidad” y conservar fotografías originales de una cámara para que el navegador las reduzca con CSS. El tamaño visual en pantalla no elimina los bytes descargados. Cada archivo debe llegar al HTML con un formato adecuado para su contenido y su función, antes de aplicar el trabajo de carga responsive y priorización.
Redimensionar y comprimir sin perder calidad visible
La optimización empieza en el layout. Antes de abrir Squoosh o ImageMagick, mide el ancho máximo real del contenedor y define qué detalle debe conservar la imagen. La guía de SE Digital sobre cómo redimensionar y comprimir imágenes para Core Web Vitals recomienda preparar el archivo antes de subirlo, crear variantes y declarar siempre width y height.
Si una imagen ocupa 800 píxeles, una variante de 1600 puede ser útil en pantallas Retina. No conviene servirla a todos los móviles españoles con conexiones variables. El navegador debe recibir después la versión que corresponda a su viewport y al espacio disponible.
Un proceso repetible
-
Medir el contenedor. Usa las herramientas de desarrollo para comprobar el ancho ocupado en escritorio y móvil. El CSS ajusta la presentación, pero no compensa un original sobredimensionado ni evita descargar sus bytes.
-
Crear la dimensión máxima. Prepara la variante de mayor densidad que necesite el componente y genera tamaños menores para tarjetas, listados y pantallas estrechas. Guarda los originales fuera del flujo de publicación.
-
Comprimir con revisión visual. Squoosh, ImageMagick y las herramientas de exportación web permiten comparar el original con el resultado. En fotografía, una referencia práctica es mantener cada archivo por debajo de 150–200 KB, según la documentación de OpenImages sobre compresión y Core Web Vitals. Ese umbral debe ceder si elimina detalles que ayudan a vender, explicar o identificar un producto.
-
Comprobar bordes y texto. Revisa cabello, hojas, texturas, degradados y capturas con letras pequeñas. En una conexión móvil irregular, reducir unos bytes no compensa una imagen que parece defectuosa o dificulta leer la información.
Criterio de calidad: ajusta la compresión a la función de la imagen. Una foto decorativa admite más pérdida que una captura instructiva o una fotografía de producto que el cliente necesita inspeccionar.
Redimensionar antes de publicar reduce el trabajo del servidor y evita transferir píxeles que nunca serán visibles. Conserva también el ancho y el alto en el marcado, aunque CSS escale la imagen. El navegador puede reservar su espacio y evitar reflujo, mientras la estrategia responsive se ocupa de elegir el archivo adecuado.
Implementar responsive images y lazy loading correctamente
Un único src obliga al navegador a trabajar con una decisión limitada. La combinación de srcset y sizes describe varias versiones del mismo recurso y ayuda a que el navegador seleccione una opción coherente con el viewport y el ancho previsto.
<img
src="/img/chaqueta-800.webp"
srcset="
/img/chaqueta-400.webp 400w,
/img/chaqueta-800.webp 800w,
/img/chaqueta-1200.webp 1200w
"
sizes="(max-width: 640px) 100vw, (max-width: 1100px) 70vw, 800px"
width="800"
height="1000"
alt="Chaqueta impermeable azul">
El atributo sizes debe describir el ancho que la imagen ocupa realmente. Si se declara 100vw para una imagen que vive en una columna estrecha, el navegador puede elegir una variante mayor de la necesaria. Si se declara un tamaño inferior al real, la imagen puede verse blanda en pantallas densas.
picture sirve para cambiar la composición
srcset cambia la resolución. picture también permite cambiar la dirección artística:
<picture>
<source
media="(max-width: 640px)"
srcset="/img/hero-movil.webp">
<source
media="(min-width: 641px)"
srcset="/img/hero-escritorio.webp">
<img
src="/img/hero-escritorio.webp"
width="1600"
height="700"
alt="Equipo trabajando en una oficina">
</picture>
Una composición panorámica puede funcionar en escritorio y perder el sujeto principal en móvil. En ese caso, recortar una imagen específica para pantallas pequeñas mejora la comprensión sin obligar a descargar una fotografía enorme.
Lazy loading con una frontera clara
Las imágenes que aparecen fuera de la pantalla inicial suelen beneficiarse de loading="lazy":
<img
src="/img/testimonio-600.webp"
width="600"
height="450"
loading="lazy"
decoding="async"
alt="Cliente utilizando el producto">
La imagen hero, en cambio, no debe llevar loading="lazy" si participa en el LCP. El navegador necesita descubrirla pronto. Aplicar lazy loading a todas las imágenes por una regla global es un error habitual, porque retrasa precisamente el recurso que debe pintar primero.
También conviene evitar loading="lazy" en una imagen que aparece inmediatamente después de la cabecera si sigue siendo parte de la primera experiencia visible. La decisión debe basarse en la posición real del recurso, no solo en el tipo de componente.
Gestionar el LCP y priorizar la imagen principal
La imagen principal de una landing puede determinar cuándo el usuario percibe que la página está lista. Para gestionar el LCP, identifica esa imagen en cada plantilla, prepara una variante adecuada para móvil y evita que recursos secundarios se descarguen antes. En España, donde el tráfico móvil y la calidad de conexión pueden variar mucho, esta decisión pesa más que aplicar una regla genérica de compresión.
La recomendación práctica combina tres acciones: precargar la imagen crítica, asignarle fetchpriority="high" y no usar loading="lazy" en el recurso principal. El código puede quedar así:
<link
rel="preload"
as="image"
href="/img/hero-movil.webp"
fetchpriority="high"
type="image/webp">
<img
src="/img/hero-movil.webp"
width="800"
height="900"
fetchpriority="high"
alt="Persona consultando una plataforma digital">
Prioridad no significa tamaño máximo
Dar prioridad a una imagen demasiado grande no soluciona el rendimiento. Hace que ese archivo compita con más fuerza por la red. La prioridad debe acompañar a dimensiones razonables, compresión revisada y una URL coherente con la variante que el navegador terminará mostrando.
En móvil, una imagen vertical o recortada puede comunicar mejor que una panorámica reducida. Si el sujeto queda pequeño, aumentar la calidad o el ancho no corrige la composición. Un encuadre móvil específico puede reducir el peso y acelerar la lectura sin sacrificar el mensaje.
width y height deben reflejar la proporción real de cada variante. Si el navegador no reserva ese espacio, el contenido puede desplazarse al terminar la descarga, lo que perjudica el CLS. El objetivo no es minimizar todos los archivos. Es conseguir que la imagen que construye la primera impresión llegue pronto, mantenga estable el diseño y conserve la calidad necesaria.
Automatizar la optimización en tu flujo de trabajo
La optimización manual se degrada cuando varias personas suben archivos desde distintos sistemas. Un flujo automatizado debe redimensionar, convertir, comprimir y conservar metadatos relevantes antes de publicar. La revisión humana sigue siendo necesaria para imágenes comerciales, pero no debería encargarse de tareas repetitivas.
En un proyecto con Node.js, Sharp permite generar variantes desde un directorio de entrada:
import sharp from 'sharp';
const widths = [400, 800, 1200];
for (const width of widths) {
await sharp('src/images/hero.jpg')
.resize({ width, withoutEnlargement: true })
.webp({ quality: 80 })
.toFile(`public/images/hero-${width}.webp`);
}
Los valores de calidad deben validarse con el contenido. Una fotografía con fondos suaves puede admitir una compresión distinta a una captura con texto. El script debe producir nombres previsibles para que las plantillas puedan construir srcset sin intervención adicional.
Automatización según el stack
WordPress puede centralizar conversiones y tamaños mediante plugins de optimización, siempre que se revisen sus reglas para no duplicar transformaciones del servidor y del CDN. El equipo debe comprobar qué archivo termina sirviéndose, no asumir que la instalación del plugin basta.
En un proyecto con Vite o webpack, loaders y plugins pueden convertir recursos durante el build. Astro, por su parte, ofrece los componentes Image y Picture para procesar imágenes locales y generar variantes, según su documentación oficial de imágenes. Las imágenes almacenadas en src/ pueden entrar en ese procesamiento, mientras que los recursos de public/ se sirven sin transformación, una diferencia que debe formar parte de la revisión técnica.
Un CDN especializado puede generar formatos modernos y tamaños según la petición. Esta opción reduce lógica en el repositorio, pero añade dependencia de configuración, caché y costes operativos. Para equipos que mantienen un proceso de creación de sitio web, la decisión debe considerar quién controla los assets, cómo se invalidan y cómo se comprueba la salida final.
Medir el impacto con Lighthouse y métricas reales
La optimización termina cuando la medición confirma que la página entrega mejor los recursos, no cuando el archivo parece pequeño en una carpeta. Lighthouse y PageSpeed Insights permiten localizar imágenes sobredimensionadas, formatos mejorables, recursos que bloquean la percepción inicial y cambios de layout relacionados con dimensiones ausentes.
Qué revisar en cada ejecución
- LCP: identifica qué elemento aparece como recurso principal y comprueba si es una imagen hero, un bloque de texto o un componente diferente.
- CLS: revisa si cada imagen reserva espacio mediante
width,heighto una proporción equivalente en CSS. - Peso de imágenes: observa la transferencia total y localiza archivos que se descargan aunque se muestren en un tamaño menor.
- Caché y formato: verifica que el navegador recibe la variante moderna prevista y que no existe una cadena de redirecciones o transformaciones duplicadas.
Conviene guardar una línea base antes de cambiar el marcado. Después, cada modificación debe probarse por separado, primero en móvil y luego en escritorio, con una revisión visual de la calidad. La guía para realizar una auditoría SEO puede servir como marco para integrar estas comprobaciones dentro de una revisión técnica más amplia, sin tratar las imágenes como un asunto aislado.
Una imagen está suficientemente optimizada cuando conserva su propósito, llega con prioridad adecuada, no provoca desplazamientos y se entrega en una dimensión coherente con el contenedor. Perseguir el archivo más pequeño posible puede empeorar la percepción si introduce artefactos, recortes incorrectos o una espera adicional por una estrategia de carga mal planteada.
BUZZALYZE ayuda a empresas y equipos de marketing a mejorar webs, SEO, campañas y medición con un enfoque centrado en rendimiento y captación cualificada. Para detectar problemas de imágenes, LCP, conversión y seguimiento dentro del ecosistema digital completo, visita BUZZALYZE y solicita un diagnóstico adaptado a tu proyecto.
