Optimización de imágenes web: errores y buenas prácticas

La optimización de imágenes para web consiste en reducir el tamaño de archivo de cada imagen al mínimo posible sin que el visitante perciba pérdida de calidad. Las imágenes son, en promedio, el 50 % del peso total de una página web, y los errores en su manejo son la causa número uno de sitios lentos.

En este artículo repasamos los errores más frecuentes que cometen desarrolladores y dueños de sitios, y las buenas prácticas concretas que debes aplicar desde hoy.

Por qué importa la optimización de imágenes

Google incluye la velocidad de carga como señal de posicionamiento. Los Core Web Vitals — LCP, CLS e INP — se ven afectados directamente por imágenes mal optimizadas:

LCP (Largest Contentful Paint): casi siempre lo dispara una imagen hero o de portada.
CLS (Cumulative Layout Shift): imágenes sin dimensiones declaradas provocan saltos de contenido.
INP: el hilo principal se satura decodificando imágenes enormes en móviles de gama baja.

Una mejora en la optimización de imágenes es la intervención con mayor impacto inmediato en el rendimiento de casi cualquier sitio. Puedes explorar más técnicas en la sección de rendimiento web de nuestro blog.

Errores frecuentes que debes evitar

1. Subir imágenes en el tamaño y resolución original

Una foto directa de cámara puede pesar 8-20 MB y medir 6 000 × 4 000 px. Si tu columna de contenido mide 800 px, el navegador descarga 20 MB para mostrar 800 px: un desperdicio brutal.

Buena práctica: redimensiona siempre antes de exportar. La imagen debe tener el doble del ancho CSS máximo en el que aparecerá (para pantallas retina), pero nunca más.

2. Usar JPEG o PNG cuando WebP (o AVIF) es mejor

WebP ofrece entre un 25 % y 35 % menos de peso que JPEG con calidad visual equivalente. AVIF puede ahorrar hasta un 50 % adicional, aunque el soporte de browsers aún no es universal.

Fotografías → WebP (con fallback JPEG para IE11, si aplica).
Logotipos, iconos, ilustraciones con transparencia → SVG o WebP con alpha.
Animaciones → WebP animado o video <video> corto en lugar de GIF.

3. No declarar atributos `width` y `height`

Cuando el navegador no sabe cuánto espacio reservar para una imagen antes de cargarla, el contenido se "salta" al llegar — eso es CLS. Añadir width y height en el HTML permite al navegador reservar espacio y eliminar el salto.

<!-- Mal -->
<img src="hero.webp" alt="Banner principal">

<!-- Bien -->
<img src="hero.webp" alt="Banner principal" width="1200" height="630">

4. No usar lazy loading en imágenes fuera del viewport

El atributo loading="lazy" hace que el navegador difiera la descarga de imágenes que no se ven en pantalla. Es nativo, cero dependencias y reduce drásticamente el peso inicial de la página.

Excepción importante: la imagen hero o cualquier imagen visible al cargar (above the fold) NO debe tener loading="lazy" — retrasaría el LCP.

5. Ignorar el atributo `srcset` y las imágenes responsivas

Servir una imagen de 1 400 px a un móvil con pantalla de 390 px es un desperdicio. El atributo srcset permite ofrecer varias versiones y que el navegador elija la adecuada.

<img
  src="producto-800.webp"
  srcset="producto-400.webp 400w, producto-800.webp 800w, producto-1200.webp 1200w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="Producto en vista frontal"
  width="800" height="600"
  loading="lazy">

6. Olvidar el texto alternativo (alt)

El atributo alt no es solo accesibilidad — Google lo usa para entender de qué trata la imagen. Un alt vacío o genérico ("imagen1.jpg") desperdicia una oportunidad de posicionamiento.

Buenas prácticas de compresión

La compresión puede ser sin pérdida (lossless) o con pérdida (lossy):

Tipo	Cuándo usarlo	Herramientas
Lossless	Logotipos, texto, capturas	OptiPNG, SVGO, Squoosh
Lossy	Fotografías, banners, fondos	Squoosh, Sharp, ImageMagick

Para la mayoría de fotografías, una calidad de exportación entre 75-85 % en WebP es imperceptible al ojo humano y recorta el peso a la mitad.

Flujo de trabajo recomendado

Redimensiona al tamaño máximo de visualización × 2 (retina).
Convierte a WebP (o AVIF + WebP como fallback).
Comprime con calidad 80 para fotos; lossless para gráficos.
Nombra con intención SEO: consultor-seo-cdmx.webp, no DSC00445.webp.
Añade width, height, alt y loading="lazy" (excepto hero).
Sirve desde CDN para reducir latencia geográfica.

Si tu sitio corre en WordPress, un plugin como ShortPixel o Imagify automatiza los pasos 1-3. Para sitios PHP a medida, la librería Sharp (Node) o ImageMagick (PHP) hacen el trabajo sin intervención manual. Los expertos de elenlace.com pueden configurar este flujo de manera profesional adaptado a tu stack.

Herramientas para auditar tus imágenes

PageSpeed Insights / Lighthouse: señala imágenes sin redimensionar, sin formato moderno y sin lazy loading.
Squoosh.app: comparador visual online; ideal para encontrar el balance calidad/peso antes de publicar.
GTmetrix: muestra el tamaño real transferido de cada imagen en la cascada de red.
WebP Converter (CLI): conversión masiva con cwebp en un único script bash.

Conclusiones clave

Las imágenes representan la mitad del peso de una página; optimizarlas es la mejora de rendimiento con mayor retorno.
Usa WebP como formato por defecto para fotografías; SVG para gráficos vectoriales.
Declara siempre width y height para evitar CLS.
Aplica loading="lazy" a toda imagen que no sea visible al cargar la página.
Usa srcset + sizes para servir la versión adecuada a cada dispositivo.
Nombra los archivos con palabras clave descriptivas; rellena el atributo alt siempre.
Automatiza el proceso con un plugin o un script de build para no depender de la disciplina manual.

¿Quieres que un profesional audite y optimice las imágenes de tu sitio? El equipo de elenlace.com realiza auditorías de rendimiento completas y te entrega un plan de acción priorizado.

Preguntas frecuentes

¿Cuál es el mejor formato de imagen para web en 2025?

WebP es el estándar recomendado: soportado por todos los navegadores modernos, entre 25-35 % más ligero que JPEG y compatible con transparencia. Para casos donde se requiere máxima compresión y el soporte no es crítico, AVIF es la siguiente evolución.

¿Cuánto debo comprimir una fotografía para web?

En WebP, una calidad de exportación entre 75-85 % es imperceptible para el visitante promedio y reduce el peso a la mitad respecto al JPEG original. Para imágenes de producto donde el detalle importa, usa 85 %; para fondos decorativos, 70-75 % es suficiente.

¿El lazy loading afecta el SEO?

No afecta negativamente al SEO cuando se implementa con el atributo HTML nativo loading="lazy". Googlebot soporta lazy loading estándar. Lo que sí perjudica el SEO es aplicar lazy loading a la imagen hero o principal, ya que retrasa el LCP.

¿Debo optimizar imágenes si ya uso un CDN?

Sí. Un CDN reduce la latencia geográfica, pero no reduce el tamaño del archivo. Una imagen de 3 MB servida desde el CDN más rápido sigue siendo 3 MB. La optimización y el CDN son complementarios, no sustitutos.

Recursos útiles

Otros proveedores y guías que vale la pena comparar: