Imagen hero de web — el tamaño correcto
Suelta tu foto de cabecera — everyimg la recorta a 1920 × 1080 px (16:9), la convierte a WebP y la comprime bajo 200 KB. Nítida en escritorio, rápida en móvil.
Arrastra imágenes aquí o haz clic para elegir
La imagen hero es la velocidad de tu página
Google mide el Largest Contentful Paint (LCP) — cuánto tarda en renderizarse el elemento más grande del primer viewport. En la mayoría de webs ese elemento es la imagen hero. El umbral de Google para “bueno” es 2,5 segundos; una sola foto sin optimizar de 4–8 MB lo revienta por sí sola. Eso perjudica el posicionamiento y cuesta visitantes: la mayoría abandona páginas que tardan más de unos 3 segundos en cargar.
Los números que funcionan
- 1920 px de ancho — cubre pantallas de escritorio Full-HD 1:1. Ve a 2560 px solo si tus analíticas muestran una proporción significativa de pantallas más grandes.
- Formato WebP — 25–35% más pequeño que JPG con calidad visible idéntica, compatible con todos los navegadores actuales.
- Bajo 200 KB — realista para casi cualquier foto de 1920 px en WebP sin pérdida visible.
Retina, móvil y la trampa del “se ve borroso”
Un hero de 1920 px mostrado a ancho completo se ve nítido en pantallas estándar y aceptable en pantallas Retina (que teóricamente querrían el doble de píxeles — pero en fotos grandes la diferencia apenas se nota, y duplicar píxeles cuadruplica el peso). Lo que de verdad provoca heros borrosos es subir imágenes más pequeñas que el ancho de visualización, que el navegador luego amplía. everyimg te avisa cuando tu original es demasiado pequeño en lugar de estirarlo en silencio.
Preguntas frecuentes
¿Qué tamaño debe tener una imagen hero de web?
1920 px de ancho (16:9, es decir 1920 × 1080 px) cubre con nitidez las pantallas de escritorio estándar. Para diseños muy grandes, 2560 px es el máximo sensato — más ancho no ayuda a nadie y ralentiza tu página.
¿Cuánto debe pesar la imagen hero en KB?
Bajo 200 KB es un buen objetivo para WebP, bajo 500 KB el máximo absoluto. La imagen hero suele ser el elemento más grande de la página y determina directamente tu puntuación de Core Web Vitals de Google (LCP).
¿Por qué mi imagen de cabecera ralentiza mi web?
Porque casi siempre es el elemento LCP — lo más grande en el primer viewport. Una foto de móvil de 4 MB como hero añade segundos a tu tiempo de carga. Redimensiona a 1920 px, convierte a WebP, mantenla bajo 200 KB y el problema desaparece.
¿Qué relación de aspecto para una imagen hero?
No hay respuesta universal — depende de tu plantilla. 16:9 es el punto de partida más seguro; muchas plantillas recortan a banners de aprox. 2:1 o 3:1. Comprueba lo que muestra tu plantilla y recorta a esa relación antes de subir, para controlar qué se corta.