Lista de comprobación para optimizar las imágenes de tu web: 10 pasos para páginas más rápidas
·
Las imágenes suelen representar más de la mitad del peso de una página. Si tu web va lenta, es lo primero que hay que revisar, y arreglarlas suele ser más rápido que cualquier otra mejora de velocidad. Esta lista te guía por diez pasos, ordenados para que puedas parar cuando la página ya sea lo bastante rápida.
Por qué las imágenes ralentizan las páginas
Las imágenes pesan mucho, normalmente hay muchas y el navegador tiene que descargarlas antes de que la página parezca terminada. Las imágenes pesadas perjudican a quienes tienen conexiones lentas, aumentan la tasa de rebote y pesan en las puntuaciones de experiencia de página, como el Largest Contentful Paint.
La buena noticia es que las imágenes responden muy bien a arreglos sencillos. Unos pocos cambios pueden reducir el peso de una página a la mitad o más.
Las soluciones, ordenadas por esfuerzo e impacto
| Solución | Esfuerzo | Impacto |
|---|---|---|
| Ajustar al tamaño con el que se muestra | Bajo | Muy alto |
| Comprimir con calidad 75–85 | Bajo | Alto |
| Usar un formato moderno (WebP o AVIF) | Bajo a medio | Alto |
| Servir tamaños distintos según la pantalla | Medio | Medio a alto |
| Añadir ancho y alto | Bajo | Evita saltos en el diseño |
| Carga diferida fuera de la primera pantalla | Bajo | Medio |
| Caché larga y CDN | Medio | Medio |
Empieza por arriba. Los tres primeros suelen dar la mayor parte de la mejora con muy poco trabajo.
Paso a paso: la lista de 10 pasos
- 1Redimensiona cada imagen al mayor tamaño con el que realmente se muestra. Una foto de 4000 píxeles en un hueco de 800 desperdicia más del 90 por ciento de sus datos. Redimensionar imagen lo hace, y la guía de tamaños ideales trae cifras de referencia.
- 2Elige el formato adecuado. WebP o AVIF para fotos, SVG para logotipos, PNG para gráficos sin pérdida. Consulta la guía de formatos.
- 3Comprime con una calidad de entre 75 y 85 y comprueba el resultado con el máximo zoom. Comprimir imagen te muestra antes el ahorro.
- 4Sirve tamaños distintos a cada pantalla con
srcsetysizes. La guía de imágenes adaptables explica cómo. - 5Define
widthyheighten cada imagen para que el navegador reserve el espacio antes de que llegue el archivo, lo que evita que la página salte. - 6Aplica carga diferida a las imágenes que están más allá de la primera pantalla con
loading="lazy". La guía de carga diferida explica cuándo usarla. - 7No apliques carga diferida a la imagen principal. La imagen más grande de la parte superior suele ser el elemento del Largest Contentful Paint. Cárgala de inmediato y valora usar
fetchpriority="high". - 8Guarda las imágenes en caché durante mucho tiempo, por ejemplo un año, y añade un hash del contenido al nombre del archivo para poder sustituirlas sin riesgo.
- 9Usa una CDN, que coloca copias de tus imágenes cerca de los visitantes y a menudo convierte los formatos automáticamente.
- 10Mide con PageSpeed Insights o Lighthouse antes y después, y fíjate en el tiempo del Largest Contentful Paint.
Pros y contras de los cambios más grandes
Pasar a WebP o AVIF
- Ventajas: archivos notablemente más pequeños y páginas más rápidas.
- Inconvenientes: requiere formatos de respaldo y algo de pruebas. Consulta cómo pasar a WebP.
Usar una CDN o un servicio de imágenes
- Ventajas: formatos y tamaños automáticos y entrega rápida.
- Inconvenientes: cuesta dinero y añade una dependencia.
Carga diferida
- Ventajas: menos datos al principio y una primera vista más rápida.
- Inconvenientes: perjudica a la página si se aplica a la imagen principal o si olvidas las dimensiones.
Cómo medir el resultado
Pasa las mismas páginas por PageSpeed Insights o Lighthouse antes y después. Compara el peso total de las imágenes y el tiempo del Largest Contentful Paint, y lee las listas de imágenes demasiado grandes o sin optimizar, que te indican exactamente qué archivos corregir a continuación. El informe de Core Web Vitals de Search Console muestra la experiencia de los visitantes reales, pero tarda semanas en actualizarse. Para profundizar en estas cifras, lee cómo afectan las imágenes a los Core Web Vitals.
Errores frecuentes
- Optimizar imágenes decorativas y pasar por alto la más grande de la parte superior.
- Aplicar carga diferida a todo, incluida la primera imagen.
- Comprimir el mismo archivo una y otra vez en lugar de trabajar desde el original.
- Olvidar las dimensiones, lo que hace que la página salte.
- Probar una sola vez con una conexión rápida. Prueba también con un móvil y una red más lenta.
Preguntas frecuentes
¿Cuál es la forma más rápida de acelerar las imágenes de una web?
Ajústalas al tamaño con el que realmente se muestran y después comprímelas. Esos dos pasos suelen dar la mayor parte de la mejora con muy poco trabajo.
¿Qué formato de imagen es mejor para la velocidad de la página?
WebP es una buena opción por defecto para fotos, con AVIF como alternativa y JPG como respaldo. Usa SVG para logotipos e iconos.
¿Debo aplicar carga diferida a todas las imágenes?
No. Aplícala a las imágenes que quedan por debajo de la primera pantalla, pero carga con normalidad la imagen principal de la parte superior, porque suele ser el elemento del Largest Contentful Paint.
¿De qué tamaño deben ser las imágenes de una web?
Tan anchas como se muestran, hasta aproximadamente el doble para pantallas nítidas. Una imagen de cabecera suele medir entre 1600 y 2000 píxeles y pesar menos de 200 a 300 KB, y una imagen de contenido, entre 800 y 1200 píxeles.
¿Cómo sé si la optimización de imágenes ha funcionado?
Pasa la misma página por PageSpeed Insights antes y después, y compara el peso total de las imágenes y el tiempo del Largest Contentful Paint.