Imágenes para Web: Formatos, Tamaños y Optimización [2026]

Las imágenes son el 50-80% del peso de una web. Una sola foto sin optimizar puede pesar más que todo el código de tu página. Y cada KB extra es tiempo de carga, usuarios que abandonan y posiciones que pierdes en Google.

El 39% de los usuarios deja de interactuar si las imágenes tardan demasiado en cargar.

Esta guía te enseña a elegir el formato correcto, el tamaño adecuado y las técnicas de optimización que reducen el peso sin sacrificar calidad.

Si estás creando tu página web profesional, las imágenes bien optimizadas marcan la diferencia entre una web rápida y una que frustra.

Por qué importa optimizar las imágenes

Impacto en velocidad

Escenario	Tiempo de carga	Experiencia
Imagen 3MB sin optimizar	+2-4 segundos	Terrible
Imagen 500KB comprimida	+0.5-1 segundo	Aceptable
Imagen 100KB optimizada	+0.1-0.2 segundos	Excelente

Impacto en SEO

Google considera la velocidad como factor de ranking. Las imágenes pesadas:

• Aumentan el LCP (Largest Contentful Paint)
• Penalizan en Core Web Vitals
• Afectan al posicionamiento móvil

Impacto en conversiones

Cada segundo de carga adicional reduce conversiones un 7%. Las imágenes son la causa más común de webs lentas.

Formatos de imagen: cuál usar

WebP (el estándar actual)

Qué es: Formato desarrollado por Google, combina lo mejor de JPEG y PNG.

Características:

• 25-35% más ligero que JPEG con misma calidad
• Soporta transparencia (como PNG)
• Soporta animaciones (como GIF)
• Compatible con todos los navegadores modernos

Usar para: Casi todo. Fotos, ilustraciones, iconos. Es el formato por defecto en 2026.

Ejemplo: Una foto JPEG de 200KB → WebP de 140KB (misma calidad visual).

JPEG (el clásico para fotos)

Qué es: Formato con compresión con pérdida, ideal para fotografías.

Características:

• Millones de colores
• Compresión ajustable (calidad vs peso)
• NO soporta transparencia
• Compatible con todo

Usar para: Fotografías cuando WebP no es opción (sistemas antiguos, emails).

Configuración óptima: Calidad 80-85% es el punto dulce.

PNG (transparencia perfecta)

Qué es: Formato sin pérdida con soporte de transparencia.

Características:

• Transparencia perfecta (canal alfa)
• Sin pérdida de calidad
• Archivos más pesados
• Ideal para gráficos, logos, capturas

Usar para: Logos, iconos con transparencia, capturas de pantalla, gráficos con texto.

Evitar para: Fotografías (usa WebP o JPEG, pesan mucho menos).

SVG (vectores escalables)

Qué es: Formato vectorial basado en XML. No es imagen de píxeles.

Características:

• Escalable sin pérdida (infinitamente)
• Muy ligero para gráficos simples
• Editable con CSS y JavaScript
• Ideal para iconos y logos

Usar para: Logos, iconos, ilustraciones simples, gráficos que necesitan escalar.

No usar para: Fotografías o imágenes complejas.

AVIF (el futuro)

Qué es: Formato de nueva generación, aún más eficiente que WebP.

Características:

• 30-50% más ligero que WebP
• Excelente calidad
• Soporte creciendo (Chrome, Firefox, Safari 16+)
• Compresión más lenta

Usar para: Si tu audiencia usa navegadores modernos y la compresión extra compensa.

GIF (solo para animaciones simples)

Qué es: Formato antiguo que soporta animaciones.

Características:

• Máximo 256 colores
• Animaciones sencillas
• Archivos pesados para animaciones

Usar para: Animaciones muy simples y cortas. Para el resto, usa WebP animado o vídeo.

Resumen de formatos

Formato	Mejor uso	Transparencia	Animación	Peso
WebP	Todo uso general	✅	✅	Bajo
JPEG	Fotos (fallback)	❌	❌	Medio
PNG	Logos, capturas	✅	❌	Alto
SVG	Iconos, logos	✅	✅	Muy bajo
AVIF	Máxima compresión	✅	✅	Muy bajo
GIF	Animaciones simples	✅	✅	Alto

---

Tamaños de imagen recomendados

Regla de oro: No subir más grande de lo necesario

Si tu imagen se muestra a 800px de ancho, no subas una de 4000px. El navegador la redimensiona, pero descarga todo el peso.

Tamaños según uso

Uso	Ancho recomendado	Peso objetivo
Hero/Banner full-width	1920px	<200KB
Imagen de contenido	800-1200px	<100KB
Thumbnail/Miniatura	300-400px	<30KB
Imagen de producto	600-800px	<80KB
Logo	200-400px	<20KB
Icono/Avatar	100-200px	<10KB
Open Graph (redes)	1200x630px	<100KB

Imágenes retina (2x)

Para pantallas de alta densidad (Retina, 4K), sirve imágenes al doble de resolución:

• Si se muestra a 400px → imagen de 800px
• El peso aumenta, úsalo solo donde importe (logos, hero)

Responsive images (srcset)

Sirve diferentes tamaños según el dispositivo:

<img 
  src="imagen-800.webp" 
  srcset="imagen-400.webp 400w,
          imagen-800.webp 800w,
          imagen-1200.webp 1200w"
  sizes="(max-width: 600px) 400px,
         (max-width: 1200px) 800px,
         1200px"
  alt="Descripción de la imagen">

El navegador elige automáticamente el tamaño más adecuado.

---

Cómo optimizar imágenes

Paso 1: Redimensionar al tamaño correcto

Antes de comprimir, ajusta las dimensiones. No tiene sentido comprimir una foto de 5000px si la mostrarás a 800px.

Herramientas:

• Photoshop / GIMP
• Squoosh (web)
• Preview en Mac
• Cualquier editor de imágenes

Paso 2: Elegir el formato correcto

• ¿Es una foto? → WebP (o JPEG como fallback)
• ¿Necesita transparencia? → WebP o PNG
• ¿Es un logo/icono? → SVG (si es vectorial) o WebP/PNG
• ¿Es una animación? → WebP animado o vídeo corto

Paso 3: Comprimir

Reducir el tamaño del archivo sin perder calidad perceptible.

Compresión con pérdida (lossy):

• Reduce más el tamaño
• Pérdida de detalle imperceptible a calidad 80-85%
• Ideal para fotos

Compresión sin pérdida (lossless):

• Mantiene calidad perfecta
• Reduce menos el tamaño
• Ideal para logos, gráficos con texto

Paso 4: Lazy loading

Cargar imágenes solo cuando el usuario hace scroll hasta ellas:

<img src="imagen.webp" loading="lazy" alt="Descripción">

Las imágenes above the fold (visibles sin scroll) NO deben tener lazy loading.

---

Herramientas de optimización

Herramientas online (gratis)

Herramienta	Función	URL
Squoosh	Compresión avanzada, comparación visual	squoosh.app
TinyPNG	Compresión PNG y JPEG	tinypng.com
Compressor.io	Múltiples formatos	compressor.io
SVGOMG	Optimizar SVG	svgomg.net
Convertio	Conversión de formatos	convertio.co

Herramientas de escritorio

Herramienta	Sistema	Características
ImageOptim	Mac	Compresión por lotes, gratuita
FileOptimizer	Windows	Múltiples formatos
GIMP	Todos	Editor completo, gratuito
Photoshop	Todos	”Exportar para web”

Plugins para WordPress

Plugin	Función
ShortPixel	Compresión automática, conversión WebP
Imagify	Optimización en la nube
Smush	Compresión sin pérdida
EWWW Image Optimizer	Optimización local

CDNs con optimización

Algunos CDNs optimizan imágenes automáticamente:

• Cloudflare (Polish, WebP automático)
• Cloudinary
• Imgix

---

Alt text: accesibilidad y SEO

El atributo alt describe la imagen para:

• Usuarios con lectores de pantalla
• Cuando la imagen no carga
• Google (SEO de imágenes)

Cómo escribir buen alt text

Reglas:

1. Describe lo que se ve en la imagen
2. Sé conciso (125 caracteres máximo)
3. No empieces con “Imagen de…” o “Foto de…”
4. Incluye palabras clave naturalmente (sin forzar)
5. Si es decorativa, usa alt vacío (alt="")

Ejemplos:

❌ Mal	✅ Bien
alt=“imagen”	alt=“Equipo de marketing reunido en sala de juntas”
alt=“foto-producto-123”	alt=“Zapatillas running Nike Air Zoom blancas”
alt=“banner ofertas enero descuento productos”	alt=“Descuentos de hasta el 50% en electrónica”
(sin alt)	alt="" (si es decorativa)

---

Errores comunes con imágenes

Error 1: Subir fotos directamente de la cámara

Problema: Fotos de 3-10MB cada una. Una página con 5 fotos = 15-50MB.

Solución: Siempre redimensionar y comprimir antes de subir. Objetivo: menos de 200KB por imagen.

Error 2: Usar PNG para todo

Problema: PNG pesa 3-5 veces más que WebP/JPEG para fotos.

Solución: PNG solo para gráficos con transparencia o texto nítido. Para fotos, WebP.

Error 3: No usar lazy loading

Problema: Todas las imágenes cargan a la vez, aunque no sean visibles.

Solución: loading="lazy" en imágenes below the fold.

Error 4: Imágenes sin dimensiones

Problema: Sin width/height, el navegador no reserva espacio → saltos de contenido (CLS).

Solución: Siempre especificar dimensiones:

<img src="foto.webp" width="800" height="450" alt="...">

Error 5: Un solo tamaño para todo

Problema: Servir imagen de 1920px a un móvil de 375px.

Solución: Usar srcset para servir tamaños apropiados.

Error 6: Alt text ausente o malo

Problema: Ni accesibilidad ni SEO de imágenes.

Solución: Alt descriptivo en todas las imágenes (excepto decorativas).

---

Imágenes y velocidad web

Las imágenes afectan directamente a los Core Web Vitals:

LCP (Largest Contentful Paint)

Si tu imagen hero es el elemento más grande, determina el LCP. Optimiza especialmente:

• La imagen principal de cada página
• Usa preload para imágenes críticas:

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

CLS (Cumulative Layout Shift)

Imágenes sin dimensiones causan saltos. Siempre incluir width y height.

FCP (First Contentful Paint)

Imágenes pesadas bloquean el renderizado. Lazy loading ayuda.

---

Dónde conseguir imágenes

Bancos de imágenes gratuitos

Sitio	Licencia	Características
Unsplash	Gratis, sin atribución	Alta calidad, variedad
Pexels	Gratis, sin atribución	Fotos y vídeos
Pixabay	Gratis, sin atribución	Fotos, ilustraciones, vectores
Freepik	Gratis con atribución	Vectores, PSD, fotos

Bancos de pago

Para uso comercial sin limitaciones:

• Shutterstock
• Adobe Stock
• iStock
• Getty Images

Crear tus propias imágenes

• Fotos reales de tu negocio (más auténticas)
• Canva para gráficos y diseños
• Herramientas IA (Midjourney, DALL-E) con precaución sobre derechos

---

Preguntas frecuentes

¿WebP funciona en todos los navegadores?

Sí, desde 2020 todos los navegadores modernos soportan WebP (Chrome, Firefox, Safari, Edge). Solo IE11 no lo soporta, pero su uso es casi nulo.

¿Cuánto deben pesar mis imágenes?

Como regla general: menos de 200KB para imágenes grandes (hero), menos de 100KB para contenido, menos de 30KB para thumbnails. El total de imágenes de una página no debería superar 500KB-1MB.

¿Pierdo calidad al comprimir?

Con compresión inteligente (80-85% calidad), la diferencia es imperceptible para el ojo humano pero el ahorro de peso es significativo (30-50%).

¿Debo convertir todas mis imágenes a WebP?

Sí, es la mejor opción para la mayoría de casos. Mantén un fallback JPEG/PNG solo si necesitas compatibilidad con sistemas muy antiguos.

¿Lazy loading afecta al SEO?

No negativamente. Google soporta lazy loading. Solo asegúrate de que las imágenes importantes (hero, producto) se carguen inmediatamente.

¿Cómo sé si mis imágenes están bien optimizadas?

Usa PageSpeed Insights. Te indicará si hay imágenes que comprimir, redimensionar o convertir a formatos modernos.

---

Conclusión: Imágenes ligeras, web rápida

Las imágenes son la principal causa de webs lentas. Optimizarlas bien es el cambio con mayor impacto en velocidad y experiencia de usuario.

Checklist de optimización de imágenes:

1. ✅ Formato correcto (WebP por defecto)
2. ✅ Tamaño adecuado (no más grande de lo necesario)
3. ✅ Compresión aplicada (80-85% calidad)
4. ✅ Lazy loading activado
5. ✅ Dimensiones especificadas (width/height)
6. ✅ Alt text descriptivo
7. ✅ Responsive images (srcset) si procede

¿Quieres que tus imágenes se optimicen automáticamente? El constructor de Avantys comprime y convierte imágenes a WebP automáticamente al subirlas.

Continúa con nuestra guía completa para crear tu página web profesional.

---

Artículos relacionados del cluster

Sigue optimizando tu web:

• Cómo mejorar la velocidad de tu web
• Diseño responsive: adaptar tu web a móvil
• Principios de diseño web para no diseñadores
• Cómo elegir colores para tu página web
• Errores comunes al crear una página web
• Checklist para lanzar tu web

---