Una imagen principal tiene una función sencilla: respaldar el mensaje de la página. Si retrasa la página u oculta el tema útil en el móvil, el pulido visual por sí solo no es suficiente.
Elige la imagen y su entrega juntos. Esto evita el ciclo común de cargar un recurso grande, notar una página lenta y comprimirla hasta que se vea pobre.
Decide qué agrega la imagen
Pregunte si la imagen explica el servicio, muestra un producto o establece un contexto útil. Es posible que una foto genérica de oficina no ocupe un gran espacio en todas las páginas.
Si la imagen es principalmente decorativa, mantén el mensaje principal disponible en texto. No incluya detalles de servicios esenciales dentro de la imagen.
Elija un cultivo con espacio para adaptarse
Deje suficiente espacio alrededor del sujeto para pantallas más pequeñas. Pruebe el título y los botones planificados al lado o sobre la imagen.
Evite colocar detalles importantes en los bordes extremos. Una composición de escritorio puede perder su significado cuando un diseño móvil utiliza un recorte más estrecho.
Verifique el tamaño real entregado
Revisar la imagen solicitada por la página en diferentes anchos. La entrega excesiva desperdicia recursos; una imagen de tamaño insuficiente puede parecer suave.
El guía de optimización de imágenes web.dev Es una referencia técnica útil. Haga coincidir las opciones de implementación con la plantilla real en lugar de copiar la configuración a ciegas.
Pon estas ideas en práctica.
Desde una mejora puntual hasta una web completa, te ayudamos a definir el alcance y llevarlo a cabo.
Hablemos de mi webOptimización de velocidad profesional de WordPressCuéntanos tus objetivos. Normalmente respondemos en un día laborable con preguntas y próximos pasos concretos.
Prueba toda la pantalla de apertura
Observe cuándo aparecen el título, la imagen y la acción principal. Compruebe si el contenido cambia a medida que se carga la imagen.
Nuestro WordPress guía de optimización de velocidad cubre la evaluación más amplia. Un héroe es sólo una parte del comportamiento de carga de la página.
Mantenga una comparación de calidad
Compare la versión optimizada con el original en el tamaño de visualización previsto. Pregunte si se han perdido detalles importantes para el mensaje.
Para obtener ayuda con la implementación, explore optimización de la velocidad del sitio web y WordPress desarrollo. Tome nota del recorte y la ubicación elegidos para que las actualizaciones de contenido posteriores no deshagan el trabajo.
La imagen de héroe más fuerte no es necesariamente la más grande ni la más dramática. Es el que aclara la página sin estorbar al visitante.
Preguntas frecuentes
¿Cada página necesita una imagen principal grande?
No. Utilice una imagen grande cuando ayude a explicar la página. Una apertura más sencilla puede ser mejor para algunas tareas.
¿Debería incluirse texto esencial en la imagen principal?
Prefiera texto de página real para obtener información esencial para que siga siendo legible, adaptable y accesible.
¿Cómo elijo la configuración de calidad de imagen?
Compare el resultado en su tamaño de visualización real y pruebe la entrega de la página. Evite aplicar una única configuración a ciegas a cada imagen.
