Las imágenes son el recurso más pesado en la mayoría de páginas web. Según HTTP Archive, las imágenes representan en promedio el 45% del peso total de una página. Sin una optimización adecuada, cada imagen puede pesar varios megabytes, multiplicando los tiempos de carga y desperdiciando el ancho de banda de tus visitantes.
La buena noticia es que optimizar imágenes es una de las acciones con mayor retorno: en muchos casos se puede reducir el peso de una página en un 60-80% solo tratando correctamente las imágenes. Esta guía te muestra cómo hacerlo sin sacrificar la calidad visual.
Formatos de imagen modernos: WebP y AVIF
Los formatos tradicionales como JPEG y PNG siguen siendo válidos, pero los formatos de nueva generación ofrecen una compresión muy superior manteniendo la misma calidad visual. WebP, desarrollado por Google, reduce el tamaño entre un 25% y un 35% respecto a JPEG con la misma calidad.
AVIF va un paso más allá, con reducciones de hasta un 50% respecto a JPEG. Sin embargo, su compatibilidad con navegadores aún no es universal. La estrategia recomendada es usar la etiqueta
- WebP: soportado por el 97% de navegadores, excelente equilibrio calidad/peso
- AVIF: mejor compresión pero soporte del 92%, ideal como primera opción con fallback
- JPEG: sigue siendo el estándar para fotografías cuando no se puede usar WebP
- PNG: necesario solo cuando se requiere transparencia y no se puede usar WebP
- SVG: ideal para iconos, logos y gráficos vectoriales (no es un formato raster)
Dimensiones correctas e imágenes responsive
Uno de los errores más comunes es servir imágenes con dimensiones mucho mayores a las que realmente se muestran. Una imagen de 4000x3000 píxeles que se muestra en un contenedor de 800x600 está desperdiciando un 95% del ancho de banda.
Las imágenes responsive con el atributo srcset permiten servir diferentes tamaños según el dispositivo y la resolución de pantalla. Esto asegura que un móvil no descargue la misma imagen que un monitor 4K.
- Generar múltiples tamaños de cada imagen (ej: 400px, 800px, 1200px, 1600px)
- Usar el atributo srcset junto con sizes para indicar al navegador qué imagen cargar
- Especificar siempre width y height en el HTML para evitar layout shifts
- Considerar la densidad de píxeles (1x, 2x) para pantallas retina
Técnicas de compresión eficaces
La compresión es el proceso de reducir el tamaño del archivo eliminando datos redundantes. En imágenes existen dos tipos: compresión con pérdida (lossy) que sacrifica algo de calidad, y sin pérdida (lossless) que mantiene la calidad original.
Para fotografías, una compresión lossy con calidad del 80-85% es prácticamente indistinguible del original para el ojo humano, pero puede reducir el peso del archivo entre un 40% y un 70%. Herramientas como Squoosh de Google permiten comparar visualmente la calidad antes de comprimir.
- Squoosh (squoosh.app): herramienta gratuita de Google con comparación visual
- TinyPNG/TinyJPG: compresión online por lotes, excelente calidad
- ShortPixel: plugin de WordPress que comprime automáticamente al subir
- ImageOptim (macOS): compresión local sin pérdida de calidad
- Sharp (Node.js): librería para automatizar compresión en el build
Lazy loading: carga diferida de imágenes
El lazy loading retrasa la carga de imágenes que no son visibles en la pantalla inicial. En lugar de cargar todas las imágenes al abrir la página, solo se descargan cuando el usuario se desplaza hacia ellas. Esto puede reducir el tiempo de carga inicial de forma significativa.
Desde 2020, los navegadores modernos soportan lazy loading nativo con el atributo loading="lazy". Es la forma más sencilla de implementarlo y no requiere JavaScript adicional. Sin embargo, es importante no aplicarlo a las imágenes que están en la parte visible inicial (above the fold), ya que retrasaría su aparición.
- Usar loading="lazy" en todas las imágenes fuera del viewport inicial
- No aplicar lazy loading al hero ni a imágenes above the fold
- Añadir decoding="async" para que la decodificación no bloquee el hilo principal
- Incluir un placeholder o color de fondo para evitar saltos de contenido
Automatización de la optimización de imágenes
Optimizar imágenes manualmente es tedioso y propenso a errores. La mejor estrategia es automatizar el proceso para que cada imagen que se suba a la web se optimice automáticamente.
Si usas WordPress, plugins como ShortPixel o Imagify comprimen las imágenes automáticamente al subirlas al gestor de medios. Para proyectos con build process, herramientas como Sharp o imagemin se integran en el pipeline y procesan todas las imágenes durante la compilación.
Errores comunes al trabajar con imágenes
Incluso con buenas intenciones, hay errores frecuentes que anulan los beneficios de la optimización. Conocerlos te ayudará a evitarlos y a mantener tu web rápida a largo plazo.
- Subir imágenes directamente desde la cámara sin redimensionar (5-15 MB cada una)
- Usar PNG para fotografías cuando JPEG/WebP serían mucho más ligeros
- No especificar width y height, causando Cumulative Layout Shift (CLS)
- Aplicar lazy loading a la imagen hero, retrasando el Largest Contentful Paint (LCP)
- Olvidar el texto alternativo (alt), perjudicando la accesibilidad y el SEO
- Usar GIF animados en lugar de vídeo MP4, que es hasta 10x más ligero
Puntos clave
- Convertir imágenes a WebP puede reducir su peso entre un 25% y un 35% sin pérdida de calidad perceptible
- Servir imágenes en el tamaño exacto que necesita cada dispositivo con srcset evita descargas innecesarias
- El lazy loading nativo (loading="lazy") es fácil de implementar y ahorra ancho de banda
- Automatizar la compresión garantiza que ninguna imagen se suba sin optimizar
- Siempre especificar width y height para evitar saltos de contenido (CLS)
¿Las imágenes de tu web pesan demasiado?
Analizamos tu sitio, optimizamos todas las imágenes existentes y configuramos un sistema automático para que cada nueva imagen se comprima al subirla. Mejora la velocidad de tu web sin esfuerzo.
Solicitar presupuesto