Cómo hacer que las imágenes carguen más rápido en una web
Los cinco cambios que reducen el peso de las imágenes en cualquier web, por orden de impacto.
En la mayoría de las webs, las imágenes son la mayor parte de lo que descarga un visitante. Una sola foto de móvil sin optimizar puede pesar más que el resto de la página junta. Arreglar las imágenes suele ser la mejora de velocidad más grande y más barata que existe, y las páginas rápidas posicionan mejor, retienen más al visitante y convierten más.
1. Sube las imágenes al tamaño en que se ven
Una foto recién salida del móvil mide 4000 píxeles de ancho o más. Una columna de contenido en una web rara vez pasa de 1200 píxeles, y una tarjeta o miniatura mucho menos. Cada píxel de más se descarga y luego el navegador lo tira. Redimensiona antes de subir: unos 2000 píxeles de ancho para banners a todo lo ancho (para que se vean nítidos en pantallas de alta densidad), de 1200 a 1600 para imágenes de contenido y de 600 a 800 para tarjetas. La herramienta de redimensionar procesa una carpeta entera de una vez.
2. Comprime
Con las dimensiones correctas, la compresión hace el resto. Una foto guardada con calidad 80 se ve igual que una con calidad 100 en una página web y suele ocupar un tercio. El compresor de imágenes procesa lotes y muestra el ahorro de cada archivo.
3. Usa WebP
WebP funciona en todos los navegadores actuales y suele ser entre un 25 y un 35 por ciento más pequeño que el JPG con la misma calidad visible, y su soporte de transparencia lo convierte además en sustituto de muchos PNG. Convierte con JPG a WebP o PNG a WebP. AVIF es aún más pequeño, pero se codifica más despacio y lo aceptan menos sistemas de subida, así que la opción práctica por defecto es WebP.
4. Elige el formato adecuado para cada contenido
| Contenido | Mejor formato |
|---|---|
| Fotos | WebP, o JPG donde no se acepte WebP |
| Logos e iconos | SVG si lo tienes, si no PNG o WebP |
| Capturas de pantalla con texto | PNG o WebP sin pérdida |
| Animaciones sencillas | Un vídeo corto en lugar de un GIF |
5. Ayuda al navegador a cargarlas con cabeza
- Carga diferida. Las imágenes por debajo de la primera pantalla solo deberían cargarse cuando el visitante se acerca a ellas al desplazarse. La mayoría de plataformas lo hacen solas; en HTML puro, añade loading="lazy" a las etiquetas img que no se ven al principio.
- Dimensiones. Da a cada imagen un ancho y un alto para que la página no dé saltos según van llegando. El desplazamiento de diseño es una de las Core Web Vitals de Google.
- La imagen principal primero. La imagen grande de la parte superior, que normalmente cuenta como Largest Contentful Paint, nunca debe cargarse de forma diferida. Tiene que cargar cuanto antes.
Cuánta diferencia supone
Una página típica con diez fotos recién salidas del móvil puede pesar 30 MB. Redimensionada a anchos sensatos y comprimida, esa misma página suele quedarse en unos 2 MB. Convertida a WebP, cerca de 1,4 MB. En una conexión móvil, esa es la diferencia entre una página que aparece en un segundo y otra que mucha gente abandona.
Comprobar los resultados
PageSpeed Insights de Google y el panel Lighthouse de las herramientas para desarrolladores de Chrome enumeran las imágenes demasiado grandes, las que deberían estar en WebP y el elemento del Largest Contentful Paint. Mide antes y después, y empieza por las páginas con más tráfico.