Cómo optimizar imágenes para web sin perder calidad

La respuesta directa: convierte tus imágenes a WebP o AVIF, apunta a un tamaño de archivo entre 50 y 150 KB para imágenes de contenido, y usa compresión "lossy" a 75–85 % de calidad; el ojo humano rara vez nota la diferencia. Con eso ya ganas la mayor parte del rendimiento.

Las imágenes representan, en promedio, entre el 50 y el 70 % del peso total de una página web. Cuando no están optimizadas, tu sitio tarda más en cargar, tu puntuación en Core Web Vitals cae y pierdes posiciones en Google. La buena noticia: optimizar imágenes no significa publicar fotos borrosas. Significa elegir el formato correcto, el nivel de compresión adecuado y servirlas de la manera inteligente.

En esta guía cubrimos todo lo que necesitas: formatos modernos, herramientas gratuitas y de pago, técnicas de implementación y los errores más comunes. Sigue los pasos en orden y notarás resultados desde el primer día.

1. Elige el formato de imagen correcto

El formato es la decisión más importante. Usar JPEG donde debería ir PNG —o viceversa— puede triplicar el peso del archivo innecesariamente.

Formatos modernos recomendados

• WebP: Soportado en todos los navegadores modernos desde 2020. Ofrece 25–35 % menos peso que JPEG a calidad equivalente. Úsalo como tu formato predeterminado para fotos y gráficos con muchos colores.
• AVIF: Hasta 50 % más ligero que JPEG. Soporte creciente (Chrome, Firefox, Safari 16+). Ideal para sitios que priorizan máximo rendimiento.
• SVG: Para logotipos, íconos y gráficos vectoriales. Escala sin pérdida a cualquier resolución y pesa muy poco.
• PNG: Reserva para imágenes que requieren transparencia y donde SVG no aplica. Evítalo para fotografías.

Cuándo seguir usando JPEG

Si tu entorno de hosting o CMS no soporta conversión automática y necesitas compatibilidad universal, JPEG sigue siendo una opción válida para fotos. Apunta a 80 % de calidad como punto de equilibrio.

2. Compresión: lossy vs. lossless

La compresión lossy (con pérdida) descarta datos de imagen que el ojo humano no percibe fácilmente. La lossless (sin pérdida) reorganiza los datos sin eliminar nada. Para la web, la compresión lossy casi siempre es la elección correcta para fotografías.

Niveles de calidad recomendados

• 75–80 % de calidad en JPEG/WebP: para imágenes de contenido general (artículos, portadas).
• 85 %: para imágenes de producto en tiendas en línea donde el detalle importa.
• 90 %+: solo si la imagen es el producto central (fotografía artística, portafolio).

Una imagen de 2 MB convertida a WebP al 80 % de calidad puede bajar fácilmente a 180–250 KB, con una diferencia prácticamente imperceptible a simple vista.

Herramientas de compresión gratuitas

• Squoosh.app (Google): comparador visual en tiempo real en el navegador. El más didáctico para aprender.
• TinyPNG / TinyJPG: drag-and-drop, optimiza hasta 20 imágenes a la vez de forma gratuita.
• ImageOptim (macOS): compresión lossless para PNG y JPEG sin tocar la calidad visual.
• cwebp / avifenc: herramientas de línea de comandos para automatizar la conversión en servidores.

3. Redimensiona antes de comprimir

El error más frecuente: subir una foto de 4000 × 3000 px y dejar que HTML la muestre a 800 × 600 px. El navegador descarga los 4 MB completos aunque los muestre pequeños.

Regla práctica de dimensiones

• Imágenes de encabezado/hero: máximo 1600 px de ancho.
• Imágenes de artículos: 800–1000 px de ancho es suficiente en la mayoría de los diseños.
• Miniaturas/thumbnails: 400 px o menos.
• Fotos de producto en e-commerce: 1000–1200 px, con zoom opcional al hacer clic.

Si usas WordPress, activa la generación de tamaños adicionales en functions.php con add_image_size() y sirve el tamaño correcto con el atributo srcset.

Imágenes responsivas con srcset

<img
  src="foto-800.webp"
  srcset="foto-400.webp 400w, foto-800.webp 800w, foto-1200.webp 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
  alt="Fotografía de producto mostrando detalle del tejido"
  width="800"
  height="600"
>

Con srcset, el navegador descarga solo la versión que necesita según el dispositivo. En móviles, esto puede significar cargar imágenes 3–4 veces más pequeñas.

4. Lazy loading: carga solo lo visible

El atributo loading="lazy" le indica al navegador que posponga la carga de imágenes hasta que el usuario se acerque a ellas. Es nativo en todos los navegadores modernos y no requiere JavaScript.

<img src="foto.webp" alt="Descripción de la imagen" loading="lazy" width="800" height="400">

Importante: no apliques lazy loading a la imagen principal visible en pantalla (above the fold). Eso penaliza el LCP (Largest Contentful Paint). Reserva loading="lazy" para imágenes que están debajo del fold.

Para la imagen hero o primera imagen visible, usa el atributo opuesto:

<link rel="preload" as="image" href="hero.webp">

Puedes explorar más técnicas de rendimiento en nuestra sección de optimización web.

5. Plugins y automatización para WordPress

Si tu sitio corre en WordPress, la optimización manual imagen por imagen no escala. Usa un plugin que automatice la conversión, compresión y lazy loading.

Para sitios con alto volumen de imágenes, un servicio de optimización web profesional puede encargarse de la configuración del plugin, la conversión masiva de imágenes existentes y la integración con CDN.

Conclusiones clave

• Convierte tus imágenes a WebP como mínimo; considera AVIF para máximo rendimiento.
• Usa compresión lossy a 75–85 % de calidad; la diferencia visual es mínima y el ahorro de peso es grande.
• Redimensiona las imágenes al tamaño real que se mostrarán — nunca subas imágenes de 4K para mostrarlas a 800 px.
• Implementa srcset para servir tamaños diferentes según el dispositivo del visitante.
• Aplica loading="lazy" a imágenes bajo el fold; usa preload para la imagen hero.
• En WordPress, un plugin de optimización de imágenes automatiza el proceso desde el primer día.
• Incluye siempre atributos width y height para evitar saltos de layout (CLS).

Si quieres que alguien lo haga por ti, el equipo de elenlace.com puede auditar y optimizar todas las imágenes de tu sitio, integrando CDN y automatización para que no tengas que volver a pensar en esto.

Preguntas frecuentes

¿WebP siempre es mejor que JPEG?

Para la mayoría de los casos, sí. WebP ofrece menor tamaño de archivo a calidad equivalente y es compatible con todos los navegadores modernos. La única razón para preferir JPEG hoy en día es compatibilidad con clientes o sistemas muy antiguos que no soporten WebP.

¿Cuánto puedo comprimir una imagen sin que se note?

Depende del contenido. Para fotografías de paisajes o personas, bajar a 75–80 % de calidad en WebP es prácticamente imperceptible. Para imágenes con texto o gráficos con bordes nítidos (como capturas de pantalla), baja solo a 85–90 % para evitar artefactos visibles.

¿El lazy loading afecta el SEO?

No, siempre que implementes correctamente los atributos alt, width y height. Googlebot procesa el lazy loading nativo de HTML sin problemas. Lo que sí afecta el SEO es tener imágenes sin texto alternativo descriptivo.

¿Necesito reoptimizar las imágenes que ya subí a mi sitio?

Sí. Las imágenes subidas antes de implementar tu estrategia de optimización quedan con su peso original. Plugins como ShortPixel o EWWW tienen función de "optimización masiva" que reprocesa todas las imágenes existentes en tu biblioteca de medios.

Para saber más

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

• Hostinger
• HubSpot
• IONOS