Por qué las imágenes dominan el peso de la página
Un documento HTML típico con CSS y JavaScript podría transferir 200–500 KB. Una sola fotografía sin optimizar puede ser de 5–15 MB. En una conexión móvil que promedia 10–20 Mbps, una imagen de 10 MB tarda 4–8 segundos en descargarse. La mayoría de los visitantes no esperarán.
Las imágenes también afectan a las Core Web Vitals — las métricas de Google para la experiencia de página que influyen en el posicionamiento. Largest Contentful Paint (LCP) mide cuánto tarda en renderizarse el elemento visible más grande. Si ese elemento es una imagen hero, su tiempo de descarga determina directamente tu puntuación LCP. Un LCP lento perjudica tanto la experiencia del usuario como el posicionamiento.
Los sospechosos habituales, y la solución para cada uno
La carga lenta de imágenes casi siempre se reduce a uno de estos. Cada uno tiene una solución rápida y un beneficio significativo:
| Causa | Solución | Ahorro típico |
|---|---|---|
| Formato equivocado (foto PNG) | Convertir a WebP o JPG | 80% o más |
| Subida a resolución completa | Redimensionar a unas 2× el ancho de visualización | 70–80% |
| Compresión débil u omitida | Exportar a calidad 75–85 | 3–5× vs calidad 95 |
| Sin carga diferida | Añadir loading=lazy bajo el pliegue | Menos datos en la primera carga |
| HEIC servido sin convertir | Convertir a WebP o JPG primero | Evita imágenes rotas |
El formato equivocado para el tipo de contenido
Usar PNG para fotografías es uno de los errores de imagen más comunes en la web. PNG es sin pérdida y preserva cada píxel, lo que importa para logos y capturas pero no para fotos. Una fotografía guardada como PNG puede ser de 15–25 MB. La misma foto como JPEG en alta calidad es de 2–5 MB. Como WebP puede estar bajo 2 MB con una calidad visible idéntica.
Lo contrario también es un error: usar JPEG para capturas, diagramas o imágenes con texto. JPEG introduce artefactos visibles en bordes duros y áreas de color plano, lo que exige ajustes de calidad altos que producen archivos grandes. PNG o WebP maneja este contenido más pequeño y más limpio.
Subir imágenes a la resolución completa de la cámara
Una foto de un smartphone moderno tiene 12–50 megapíxeles y 3000–8000 píxeles de ancho. La mayoría de las páginas web muestran imágenes de contenido a 600–1600 píxeles de ancho. Cuando subes el archivo de la cámara a resolución completa a tu sitio, el navegador descarga los 8000 píxeles y los escala a 800 píxeles para mostrarlos. Estás transfiriendo 10× más datos de lo necesario.
Redimensionar la imagen al mayor ancho al que se mostrará alguna vez — aproximadamente el doble del ancho de visualización CSS para pantallas de alta densidad — antes de subir es a menudo la mayor reducción de tamaño disponible por sí sola. Una imagen de 4000 píxeles redimensionada a 1600 píxeles suele ser un 70–80% más pequeña antes de aplicar cualquier compresión de calidad.
Saltarse la compresión o usar el ajuste de calidad equivocado
Muchos sistemas de gestión de contenidos aceptan y almacenan las imágenes subidas sin compresión. WordPress, Squarespace, Shopify y plataformas similares pueden aplicar algo de compresión por defecto, pero los ajustes varían y suelen ser conservadores. El original subido puede ser mucho más grande de lo necesario.
Para JPEG y WebP, un ajuste de calidad de 75–85 es apropiado para la mayoría de las fotografías mostradas en una página web. Por debajo de 75, los artefactos de compresión se vuelven visibles. Por encima de 85, el tamaño de archivo aumenta significativamente con una mejora visual decreciente. Muchos desarrolladores ponen por defecto calidad 95 o 100, lo que produce archivos 3–5× más grandes que calidad 80 sin diferencia visible a tamaños de visualización normales.
Sin carga diferida en imágenes bajo el pliegue
Por defecto, los navegadores intentan cargar todas las imágenes de una página durante el renderizado inicial, incluidas las imágenes que están muy por debajo del área visible (el pliegue). Para una página de artículo larga con 10 imágenes, el navegador intenta descargar las 10 simultáneamente aunque el lector quizá nunca se desplace para ver la mayoría.
El atributo loading="lazy" en una etiqueta <img> indica al navegador que aplace la carga de la imagen hasta que esté a punto de entrar en el viewport, lo que reduce significativamente los datos transferidos en la carga inicial de la página. Aplícalo a todas las imágenes que no son visibles en el primer viewport. No lo apliques a la imagen hero ni a ninguna imagen sobre el pliegue — esas necesitan cargar lo más rápido posible para una buena puntuación LCP.
Para la imagen hero específicamente, añade fetchpriority="high" para que el navegador la obtenga antes que los scripts y otras imágenes. Úsalo en solo una imagen por página — el elemento LCP — y deja el resto en el valor por defecto.
<img src="photo.webp" loading="lazy" alt="description" /><img src="hero.webp" fetchpriority="high" width="1200" height="675" alt="hero" />
Atributos width y height ausentes
Cuando un navegador empieza a renderizar una página, todavía no conoce las dimensiones de las imágenes que no ha descargado. Sin atributos width y height explícitos en el HTML, el navegador no puede reservar el espacio correcto, y el diseño de la página se desplaza a medida que cargan las imágenes — un salto visual molesto conocido como Cumulative Layout Shift (CLS). Añadir dimensiones explícitas evita el desplazamiento del diseño y permite al navegador empezar el diseño sin esperar a que la imagen se descargue:
<img src="photo.webp" width="800" height="533" alt="description" />
HEIC o formatos inusuales subidos directamente
Los iPhones disparan en HEIC por defecto. Si se suben archivos HEIC a un sitio web y se sirven sin conversión, no se mostrarán en Chrome, Firefox y Edge. Los visitantes en Windows y Android ven un icono de imagen rota. Convierte siempre el HEIC a JPEG o WebP antes de publicar.
Una lista de verificación práctica de optimización
PhotoTools se encarga de los pasos de conversión de formato, redimensionado y compresión en tu navegador sin subir nada a un servidor. Procesa las imágenes antes de subir para mantener tus páginas rápidas, y repasa esta lista:
- Usa WebP para fotografías y la mayoría de imágenes web. Usa PNG para gráficos con texto o transparencia.
- Redimensiona las imágenes al mayor ancho al que realmente se mostrarán, aproximadamente 2× el ancho de visualización CSS para pantallas retina.
- Comprime JPEG y WebP a calidad 75–85 para imágenes web estándar.
- Añade loading="lazy" a todas las imágenes bajo el pliegue.
- Añade atributos width y height explícitos a todas las imágenes.
- Convierte los archivos HEIC a JPEG o WebP antes de subir.
- Verifica los tamaños finales de archivo: una imagen web mostrada a 800 píxeles CSS de ancho debería estar bajo 200 KB en la mayoría de los casos.