Optimizar imágenes web: buenas prácticas 2026

Optimizar imágenes web es lo que separa una página que vuela de una que se arrastra. Las imágenes suelen ser el elemento más pesado de una web. Si no las cuidas, tu diseño se ve genial pero tarda una eternidad en cargar. Y tú lo sabes: cada segundo de espera manda visitas a la competencia.

Te voy a contar cómo dejo las imágenes ligeras sin sacrificar calidad. Vas a ver qué formato usar en cada caso, cómo comprimir bien, cómo evitar los saltos de maquetación que penalizan las Core Web Vitals y cómo servir imágenes responsive con srcset y <picture>. Todo con ejemplos de código listos para copiar.

Elige el formato correcto

El primer paso para optimizar imágenes web es no equivocarte de formato. Cada uno sirve para un tipo de imagen. Usar el que no toca infla el peso sin motivo.

JPG

El clásico para fotografías. Comprime muy bien las imágenes con muchos colores y degradados suaves. Su punto débil: no admite transparencia y pierde calidad en cada guardado. Úsalo para fotos cuando no puedas servir formatos modernos.

PNG

Mi opción para gráficos con zonas planas, capturas de pantalla y todo lo que necesite transparencia. Un logo sobre fondo transparente pide PNG. Para una fotografía, en cambio, pesa demasiado.

WebP

WebP es hoy el formato por defecto que te recomiendo. Ofrece compresión con y sin pérdida, admite transparencia y animación, y pesa bastante menos que un JPG o un PNG con calidad similar. Lo soportan todos los navegadores actuales. Si tuviera que elegir un solo formato para casi todo, sería este.

AVIF

AVIF va un paso más allá. Comprime todavía mejor que WebP, sobre todo en fotografías, y mantiene muy buena calidad a pesos bajísimos. El soporte ya es amplio en navegadores modernos, aunque conviene dejar un fallback. La pega: codificar en AVIF es más lento. Lo uso para las imágenes grandes donde el ahorro de peso compensa.

SVG

Para logos, iconos e ilustraciones vectoriales, nada gana al SVG. Es código, así que escala sin pixelarse y suele pesar muy poco. No sirve para fotografías. Un consejo: pasa siempre tus SVG por un limpiador para quitar metadatos y código sobrante.

Formato	Mejor para	Transparencia	Peso
JPG	Fotos (fallback)	No	Medio
PNG	Gráficos planos, transparencia	Sí	Alto
WebP	Casi todo	Sí	Bajo
AVIF	Fotos grandes	Sí	Muy bajo
SVG	Logos, iconos, vectores	Sí	Mínimo

Puedes profundizar en cómo funciona cada formato en la guía de imágenes de web.dev, una referencia técnica muy sólida.

Comprime sin perder calidad

Elegir el formato es media batalla. La otra media es la compresión. La buena noticia: puedes bajar mucho el peso sin que el ojo note la diferencia. La clave está en ajustar el nivel de calidad y probar.

Estas son las herramientas gratuitas que uso a diario:

• Squoosh: app en el navegador que convierte a WebP o AVIF y te muestra la comparación antes/después en tiempo real. Ideal para afinar imagen a imagen.
• TinyPNG: compresión inteligente de PNG y JPG sin apenas pérdida visible. Perfecto para lotes rápidos.

Mi flujo es sencillo. Para una foto, exporto a WebP con calidad entre 75 y 85 y comparo con el original. Si no veo diferencia, bajo un poco más. Para AVIF suelo poder bajar aún más manteniendo calidad. En WordPress, un buen plugin de optimización hace este trabajo al subir cada imagen, pero conviene entender qué pasa por debajo.

Regla práctica: si una imagen de contenido pesa más de 150-200 KB, casi siempre se puede comprimir más.

Un extra: si trabajas con productos o retratos, quitar el fondo antes de exportar reduce ruido y peso. Te dejo mi selección de herramientas online para borrar el fondo de una imagen.

Tamaño y dimensiones correctas: evita el CLS

Aquí está uno de los fallos más comunes. Subes una foto de 4000 px de ancho para mostrarla en un hueco de 700 px. El navegador descarga toda esa información y luego la reduce. Peso desperdiciado.

Redimensiona la imagen a las dimensiones reales en las que se va a ver, con un pequeño margen para pantallas de alta densidad. En este blog las imágenes de contenido no pasan de 700 px de ancho, así que no tiene sentido servir más.

Y ahora lo importante para las Core Web Vitals: declara siempre width y height en el HTML. Así el navegador reserva el espacio antes de cargar la imagen y no se produce ese salto molesto cuando aparece de golpe. Ese salto es el CLS (Cumulative Layout Shift), y Google lo penaliza.

<img src="foto-700.webp" width="700" height="394" alt="...">

Con el ancho y el alto puestos, el navegador calcula la proporción y reserva el hueco desde el principio. Tienes la explicación oficial en la guía de web.dev sobre CLS.

Imágenes responsive con srcset y picture

Un móvil no necesita la misma imagen que un monitor de 27 pulgadas. Servir la versión grande a todo el mundo es tirar datos. La solución son las imágenes responsive: ofreces varios tamaños y el navegador elige el mejor según la pantalla.

srcset y sizes para el mismo formato

Con srcset listas varias resoluciones de la misma imagen y con sizes le dices al navegador qué ancho ocupará según el viewport. Él descarga solo la que necesita.

<img
  src="foto-800.webp"
  srcset="foto-400.webp 400w,
          foto-800.webp 800w,
          foto-1200.webp 1200w"
  sizes="(max-width: 600px) 100vw, 700px"
  width="1200" height="675"
  alt="Descripción real de la imagen"
  loading="lazy" decoding="async">

El atributo 400w no es un tamaño en pantalla, es el ancho real en píxeles de cada archivo. El navegador cruza esa información con sizes y la densidad de la pantalla para elegir. Lo bueno: WordPress ya genera este srcset automáticamente al insertar imágenes desde la Biblioteca de Medios.

picture para servir AVIF y WebP con fallback

Cuando quieres ofrecer AVIF y WebP pero asegurarte de que los navegadores antiguos vean algo, usa <picture>. Listas las fuentes por orden de preferencia y el navegador toma la primera que entiende. El <img> final es el respaldo obligatorio.

<picture>
  <source type="image/avif" srcset="foto.avif">
  <source type="image/webp" srcset="foto.webp">
  <img src="foto.jpg" width="1200" height="675"
       alt="Descripción real de la imagen"
       loading="lazy" decoding="async">
</picture>

Tienes la referencia completa del elemento en MDN. Y si aún no dominas el diseño adaptable, échale un ojo a mi guía de cómo hacer una página web responsive.

Lazy loading y decoding async

No tiene sentido cargar de golpe imágenes que el usuario todavía no ve. El lazy loading retrasa la carga de las imágenes que están fuera de pantalla hasta que el usuario se acerca a ellas. Se activa con un atributo:

<img src="foto.webp" width="700" height="394"
     alt="..." loading="lazy" decoding="async">

Un matiz clave: no apliques loading="lazy" a la imagen principal que se ve nada más entrar (la del hero o la imagen destacada). Esa la quieres cuanto antes, porque suele ser tu elemento LCP. El lazy loading es para lo que viene después.

El atributo decoding="async" permite que el navegador decodifique la imagen sin bloquear el pintado del resto de la página. Es un extra sencillo que ayuda a que todo se sienta más fluido.

Todo esto forma parte de una estrategia mayor de velocidad. Si tu prioridad es el móvil, te va a venir bien mi artículo sobre mejorar el rendimiento de tu sitio móvil con CSS.

Imágenes y SEO

Una imagen bien optimizada también trabaja para tu posicionamiento. Dos detalles marcan la diferencia y muchos los pasan por alto.

El texto alternativo (alt)

El atributo alt describe la imagen para quien no puede verla: lectores de pantalla y también los buscadores. Escríbelo pensando en la persona, no en engañar a Google. Describe lo que se ve de forma natural e incluye tu palabra clave solo si encaja.

• Mal: alt="IMG_2043"
• Regular: alt="imagen"
• Bien: alt="Comparación de peso entre JPG y WebP en Squoosh"

El nombre del archivo

El nombre del archivo es una señal más. optimizar-imagenes-web.webp le dice mucho más a Google que captura-final-v3.webp. Usa palabras en minúscula, separadas por guiones y sin acentos ni caracteres raros. Renómbralo antes de subirlo, no después.

Las imágenes son una pieza dentro de un SEO técnico bien hecho. Para ver el cuadro completo, tienes mis mejores prácticas de diseño web para optimizar el SEO.

Checklist rápido para optimizar imágenes web

• Elegir el formato según el contenido: WebP o AVIF por defecto, SVG para vectores, PNG solo con transparencia.
• Redimensionar a las dimensiones reales de uso, sin excederse.
• Comprimir con Squoosh o TinyPNG y comparar antes/después.
• Declarar siempre width y height para evitar el CLS.
• Servir imágenes responsive con srcset y sizes.
• Usar <picture> cuando ofrezcas AVIF o WebP con fallback.
• Aplicar loading="lazy" salvo a la imagen principal.
• Añadir decoding="async".
• Rellenar el alt con una descripción real.
• Nombrar el archivo con palabras clave y guiones.

Preguntas frecuentes

¿WebP o AVIF, cuál elijo?

Si quieres una sola opción sencilla y compatible con todo, WebP. Si buscas el mínimo peso posible en fotografías grandes y no te importa codificar un poco más lento, AVIF. Lo ideal es servir AVIF con fallback a WebP mediante <picture>, así aprovechas lo mejor de cada uno.

¿Cómo comprimir imágenes web sin perder calidad?

Exporta a WebP o AVIF con un nivel de calidad entre 75 y 85 y compara el resultado con el original en Squoosh. Baja la calidad hasta que empieces a notar la diferencia y sube un punto. Casi siempre puedes recortar la mitad del peso sin que el ojo lo perciba.

¿El lazy loading afecta al SEO?

Bien usado, ayuda: acelera la carga y mejora las Core Web Vitals, que sí influyen en el posicionamiento. El único cuidado es no aplicarlo a la imagen principal visible al entrar, porque retrasarías tu LCP. Para el resto de imágenes, adelante.

¿Qué son las imágenes responsive?

Son imágenes servidas en varios tamaños para que cada dispositivo descargue el que le conviene. Se implementan con los atributos srcset y sizes, o con el elemento <picture>. Un móvil recibe una versión ligera y una pantalla grande una más nítida, sin desperdiciar datos.

¿Por qué mi web da saltos al cargar las imágenes?

Porque no has declarado width y height en el HTML. Sin esos datos, el navegador no reserva el espacio y la maquetación se recoloca cuando la imagen aparece. Ese salto es el CLS. Añade siempre el ancho y el alto y desaparece.

Con estas prácticas tus imágenes dejarán de ser el freno de tu web. Empieza por el formato y la compresión, que es donde más se nota, y ve puliendo el resto. Si te ha servido, compártelo con quien pelee con webs lentas.