Las imágenes suelen ser la parte más pesada de una página web. Las imágenes sobredimensionadas ralentizan la carga, consumen los datos móviles de los visitantes y pueden perjudicar las Core Web Vitals, las señales de rendimiento que Google usa en sus sistemas de clasificación. La solución suele ser sencilla y no requiere programas especiales.
Paso 1: redimensiona las imágenes al tamaño en que se muestran
Es la mejora más grande. Una foto de un móvil actual suele medir 4000 × 3000 píxeles. Si la columna de contenido de tu blog mide 800 píxeles de ancho, la mayoría de esos píxeles se descargan para nada.
Un enfoque práctico:
- Imágenes de cabecera a ancho completo: 1600–2000 px de ancho.
- Imágenes de contenido: unos 1200 px de ancho (suficiente para pantallas de alta densidad con 600–800 px de ancho visible).
- Miniaturas: 300–600 px.
Usa Redimensionar imágenes para cambiar el tamaño de una imagen o de un lote entero manteniendo las proporciones.
Paso 2: comprime con una calidad razonable
Después de redimensionar, comprime. En JPG y WebP, una calidad del 70–85 % suele ser visualmente idéntica al original en pantalla, pero mucho más ligera.
Con el Compresor de imágenes puedes:
- ajustar la calidad con el control deslizante,
- limitar el ancho o alto máximo en el mismo paso,
- comprimir muchas imágenes a la vez y comparar el ahorro.
No existe una regla universal, pero estos objetivos funcionan bien en la mayoría de webs:
| Tipo de imagen | Peso objetivo |
|---|---|
| Cabecera / banner | menos de ~200 KB |
| Imagen de contenido | menos de ~100 KB |
| Miniatura | menos de ~30 KB |
Paso 3: elige el formato adecuado
- Fotos → WebP (o JPG como alternativa).
- Gráficos con colores planos, texto o transparencia → PNG o WebP sin pérdida; usa SVG para logotipos e iconos siempre que puedas.
WebP suele pesar un 25–35 % menos que JPG con calidad similar y admite transparencia. Convierte tus imágenes con el Conversor WebP.
Paso 4: carga las imágenes con cabeza
La compresión reduce el peso de los archivos; un buen HTML se asegura de que se carguen de forma eficiente.
- Indica siempre el ancho y el alto con los atributos width y height (o aspect-ratio en CSS). Así se reserva el espacio y se evitan saltos de diseño (CLS).
- Carga diferida para las imágenes que no se ven al principio, con
loading="lazy". - No uses carga diferida en la imagen principal de la parte superior: suele ser el elemento Largest Contentful Paint (LCP) y debe cargarse de inmediato.
- Ofrece tamaños adaptables con
srcsetpara que los móviles descarguen archivos más pequeños que los ordenadores. - Escribe un texto alternativo descriptivo por accesibilidad y para la búsqueda de imágenes.
<img src="/images/equipo-1200.webp"
srcset="/images/equipo-600.webp 600w, /images/equipo-1200.webp 1200w"
sizes="(max-width: 700px) 100vw, 700px"
width="1200" height="800"
alt="Nuestro equipo de soporte en la oficina"
loading="lazy">
Lista de comprobación rápida
- Redimensiona al tamaño máximo en que se muestra la imagen.
- Comprime al 70–85 % de calidad.
- Usa WebP para las fotos.
- Indica el ancho y el alto.
- Aplica carga diferida a todo salvo a la imagen superior.
- Añade un texto alternativo con sentido.
Conclusión
No necesitas herramientas caras para que una web con muchas imágenes sea rápida. Primero redimensiona, después comprime, elige formatos modernos y carga las imágenes con cuidado. Comprueba el resultado con una herramienta como Google PageSpeed Insights para ver la diferencia.