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

Una foto sacada con el móvil puede pesar 4 o 5 MB y medir 4000 píxeles de ancho. Si la subes así a tu web, el visitante descarga esos megas aunque la imagen se muestre en un recuadro de 600 px. Multiplicado por todas las imágenes de una página, el resultado es una web lenta, un LCP malo y más datos móviles consumidos. Optimizar imágenes es la mejora de velocidad con mejor relación esfuerzo/resultado: no hace falta tocar código y el ahorro suele ser enorme.

Elegir el formato adecuado

Regla práctica: fotos en AVIF o WebP; logos e iconos en SVG; PNG solo cuando sea imprescindible. Con el conversor a WebP puedes pasar JPEG y PNG a WebP directamente en el navegador.

Elegir el tamaño (dimensiones)

El navegador no necesita más píxeles de los que va a mostrar. Mira a qué anchura aparece la imagen en tu diseño y súbela a esa anchura (o al doble para pantallas retina):

El redimensionador de imágenes te permite reducirlas antes de subirlas. En WordPress, el propio sistema genera varios tamaños, pero conviene no subir originales gigantes.

Comprimir sin perder calidad visible

La compresión con pérdida elimina información que el ojo apenas percibe. Para fotos web, una calidad de 75–85 en JPEG o WebP suele ser el punto óptimo: por encima apenas mejora y el peso se dispara.

• Usa el compresor de imágenes y compara el antes y el después a tamaño real.
• Elimina los metadatos EXIF (modelo de cámara, ubicación GPS): no sirven en la web y pueden revelar datos privados.
• Para PNG con pocos colores (capturas, gráficos), la cuantización de color reduce mucho el peso.

Objetivos orientativos: una foto de cabecera de 1600 px puede quedar en 150–300 KB; una miniatura de 600 px, en 30–70 KB.

Imágenes responsive: srcset y sizes

Un móvil no debería descargar la versión de 2000 px. Con srcset ofreces varias versiones y el navegador elige:

<img src="/img/taller-800.webp"
     srcset="/img/taller-400.webp 400w,
             /img/taller-800.webp 800w,
             /img/taller-1600.webp 1600w"
     sizes="(max-width: 700px) 100vw, 700px"
     width="1600" height="1067"
     alt="Interior del taller con bancos de trabajo">

Y con <picture> puedes servir AVIF con respaldo:

<picture>
  <source srcset="/img/producto.avif" type="image/avif">
  <source srcset="/img/producto.webp" type="image/webp">
  <img src="/img/producto.jpg" width="800" height="800" alt="Silla de roble">
</picture>

Lazy loading y prioridad

• loading="lazy" en las imágenes que están debajo del primer pantallazo: solo se descargan cuando el usuario se acerca a ellas.
• Nunca en la imagen principal (logo, cabecera, primera foto de producto). Esa debe llevar fetchpriority="high" para que el navegador la pida antes.
• width y height siempre, para que el navegador reserve el espacio y no haya saltos de diseño (CLS). Explicamos por qué en la guía de Core Web Vitals.

El texto alternativo (alt)

El atributo alt describe la imagen para lectores de pantalla y para Google. Escríbelo como se lo contarías a alguien por teléfono: «Silla de roble macizo con respaldo curvo», no «silla silla comprar silla barata». Las imágenes decorativas llevan alt="". Nombra los archivos de forma descriptiva (silla-roble-macizo.webp mejor que IMG_2381.jpg).

Flujo de trabajo recomendado

1. Exporta o recorta la imagen a la proporción que necesitas.
2. Redimensiona a la anchura máxima de uso (y una versión 2× si hace falta).
3. Convierte a WebP o AVIF y comprime con calidad 75–85.
4. Revisa a tamaño real que no haya artefactos visibles en caras o degradados.
5. Sube, añade alt, width y height, y decide si lleva lazy loading.
6. Comprueba el resultado con un test de velocidad.

Errores frecuentes

• Subir fotos directamente del móvil o de la cámara.
• Usar PNG para fotografías (pesan varias veces más que un JPEG o WebP).
• Escalar con CSS una imagen enorme a un tamaño pequeño.
• Lazy loading en la imagen principal.
• Sliders de cinco imágenes a pantalla completa en la portada.
• Olvidar las dimensiones y provocar saltos al cargar.

Imágenes en WordPress y tiendas online

• WordPress genera automáticamente varios tamaños de cada imagen y añade srcset y loading="lazy". Aun así, sube originales de como máximo 2000–2500 px y comprimidos: la biblioteca de medios no reduce el peso del original.
• Desde la versión 5.8 WordPress admite WebP, y desde la 6.5, AVIF (si el servidor lo soporta). Un plugin de optimización puede convertir las imágenes existentes por lotes.
• En WooCommerce, Shopify o PrestaShop, usa la misma proporción (por ejemplo, cuadrada 1:1) en todas las fotos de producto: el listado queda ordenado y no hay recortes raros.
• En fichas con galerías de 8 o 10 fotos, carga a prioridad solo la primera y deja el resto en lazy loading.
• Revisa los banners del slider de la portada: suelen ser las imágenes más pesadas del sitio y a menudo nadie pasa de la primera.

Lista de comprobación

• Formato moderno (WebP/AVIF) para fotos y SVG para logos.
• Dimensiones ajustadas al uso real, con srcset en las imágenes grandes.
• Compresión de calidad 75–85 y metadatos eliminados.
• width, height y alt en todas las imágenes.
• Lazy loading solo por debajo del primer pantallazo.
• Imagen principal con fetchpriority="high".

Para el resto de mejoras de rendimiento, consulta cómo acelerar una web.