Cómo crear una imagen principal de alto impacto para tu sitio web

Lo primero que alguien ve cuando visita tu sitio web es una imagen principal.

Las personas se ven influenciadas por la forma en que las imágenes les hacen sentir. De hecho, probablemente hayas notado que tus sitios web y marcas favoritas usan imágenes para captar y motivar a sus usuarios. Al fin y al cabo, una imagen vale más que mil palabras… ¿verdad? ¡Así que la imagen principal adecuada podría valer millones de dólares!

Esto es muy cierto para las empresas modernas, que usan este tipo de imágenes para convertir clientes potenciales en clientes. ¿Cómo es esto posible?

Una imagen, ya sea una sola imagen o una serie de imágenes principales, te ayuda a transmitir tu mensaje y el concepto general de tu marca. ¿Pero por qué es importante transmitir tu mensaje mediante una imagen? Pues, sencillamente, ayuda a influir en cómo se siente alguien respecto a tu marca. Puede hacer que se sientan entusiasmados, confiados, enfadados, felices, etc.

Por eso vamos a hablar sobre imágenes principales. Revisaremos algunos datos sobre las imágenes principales que conviene conocer, algunos conceptos relacionados con la conversión mediante imágenes e incluso veremos un par de ejemplos. Vamos a profundizar en cómo puedes persuadir a los usuarios con una sola imagen.

Antes de entrar de lleno en lo bueno, volvamos a lo básico y expliquemos qué es realmente un hero image.

En pocas palabras, un hero image es la gran fotografía o el gráfico que algunos sitios usan en la parte superior de su sitio web. Más formalmente, es una imagen promocional grande situada por encima del pliegue (la mitad superior del sitio web) que se usa para captar la atención de alguien.

La buena noticia es que son bastante fáciles de implementar dentro del diseño de tu sitio web. Puedes añadir un pequeño fragmento de HTML o CSS a tu página para crear una imagen responsive. También puedes probar un hero image con Bootstrap, donde creas un gran recuadro, un encabezado de página o un ‘jumbotron’ que muestre contenido especial.

Muchas veces estos hero images contendrán texto, CTAs o estarán compuestos por una serie de imágenes. Pero estos elementos añadidos a menudo presentan problemas para los diseños web responsive. Afortunadamente, hay maneras de sortear estos problemas, lo que significa que crear un hero image responsive es posible para empresas de todos los tamaños.

Una imagen responsiva es una imagen que puede mostrarse adecuadamente en una variedad de pantallas y plataformas, ya sea que eso implique sustituir una imagen por otra de distinto tamaño para un dispositivo diferente, o cambiar el texto o las superposiciones para que se ajusten correctamente a cada caso de uso.

Así, una imagen hero responsiva es simplemente la imagen principal del sitio que está optimizada para adaptarse a una variedad de condiciones de visualización.

Ahora que entiendes qué es un hero image, hablemos de algunas buenas prácticas y requisitos para el hero image. Aunque parezca relativamente sencillo, un hero image debe crearse de manera que te beneficie, en lugar de molestar o confundir a los clientes potenciales.

Piénsalo como una página de destino: está ahí para hacer un trabajo — transmitir tu mensaje y atraer nuevos clientes potenciales. Esto también puede aumentar el reconocimiento de tu marca y, potencialmente, convertirse en lo que la gente mencione cuando hable de tu marca.

Así que aquí tienes algunos de los mejores consejos a considerar al configurar tu hero image:

Las personas responden y recuerdan las cosas de forma mucho más significativa cuando hay emoción de por medio. Eso no quiere decir que tengas que exagerar, pero si puedes introducir sutilmente algo que haga sentir bien a la gente, o que les provoque sentimientos intensos hacia algo, tu imagen principal tendrá impacto.

Tu imagen principal puede reforzar cualquier emoción o sensación que intentes transmitir.

Pampers, una popular marca de pañales, utiliza al famoso cantante John Legend y capta un momento auténtico de los padres (la expresión que ponen al cambiar un pañal sucio). Esto añade un nivel de confianza a la marca. Saber que alguien famoso elige Pampers y cambia pañales hace que la marca resulte más atractiva.

Además, realmente se siente el momento que captaron, lo que facilita la conexión para la mayoría de los padres.

¿Sabes qué resulta confuso? Llegar a un sitio web y ver una imagen que no tiene nada que ver con lo que venden. Te hace dudar de si has escrito la dirección web correcta, ¿verdad?

Tu imagen principal debe relacionarse con lo que haces. Si vendes golosinas gourmet para perros, por ejemplo, no tienes que mostrar necesariamente las golosinas, pero quizá quieras mostrar algo relacionado con los perros. Eso podría ser un perro saltando en la playa, devorando un gran tazón de comida o incluso simplemente un perro sentado. Tu imagen tiene que estar relacionada con tu negocio. Punto.

Barkbox muestra a su cliente ideal junto con su producto. Además, lo hacen muy llamativo usando colores vivos.

¿Alguna vez has visitado un sitio con imágenes pixeladas? ¿Cómo te hizo sentir? La mayoría de la gente pierde la confianza en la calidad del producto o servicio que podría recibir cuando, como cliente potencial, lo primero que ve es un sitio de mala calidad con la imagen principal descuidada.

Si utilizas fotos de alta calidad, con resoluciones suficientes para verse bien en los distintos dispositivos, puedes lograr que la primera impresión de alguien sea positiva.

Imagina que aterrizas en un sitio web que vende equipo de playa. Si intentaras estirar una imagen para que encaje, obtendrías un aspecto borroso y pixelado. Si usaras una imagen del tamaño adecuado, como la de la derecha, se vería mucho mejor.

Si vas a usar una llamada a la acción, debe destacar. Al mismo tiempo, no debe acaparar la atención. Así que busca un equilibrio entre ambos que funcione.

Algunas cosas a considerar son el color y la ubicación. No quieres que el color se pierda frente a la imagen que lo rodea. Tampoco conviene colocar el botón CTA cerca de otros botones (como elementos del menú o menús desplegables).

Puedes hacer una prueba rápida: desenfocar la imagen para ver si el botón es lo suficientemente visible. ¡Si tu ojo capta dónde está tu botón, lo has hecho bien!

Toma Sock Fancy’s referral landing como imagen principal. La imagen tiene colores llamativos. Han colocado su CTA lo suficientemente lejos de la barra del menú y han usado un buen botón negro para que destaque sobre el resto de la imagen.

Cuando hacemos la prueba de desenfoque, la imagen destaca y tu mirada se dirige hacia ella. Lo que más notas es la imagen y el botón, pero el botón no parece ser demasiado dominante.

Puedes usar prácticamente cualquier cosa que quieras en tu imagen principal. Pero si incluyes personas, los clientes pueden llegar a verse a sí mismos en la misma posición.

Cuando incluyes personas, los clientes pueden sentir una conexión y, por tanto, vincularse más a tu marca. Debes evitar ser demasiado genérico: una foto excesivamente escenificada no tiene el mismo impacto. En su lugar, opta por fotografías de personas o clientes que realmente coincidan con tu público objetivo. 

Sitios como Pikwizard ofrecen una excelente variedad de imágenes de stock que rehúyen las fotos escenificadas del pasado y, en su lugar, muestran imágenes con las que es fácil identificarse.

Acer eligió mostrar una variedad de usuarios en diferentes situaciones, lo que demuestra que se trata de un producto pensado para cualquiera.

Pero si una sesión de fotos como esta no está en tu presupuesto, opta por imágenes de stock neutrales que retraten a personas cotidianas con las que los usuarios puedan identificarse.

Esperar no es divertido y la gente tiene una capacidad de atención muy corta, así que la velocidad de carga es imprescindible para mantener a los usuarios comprometidos.  Estudios recientes muestran que tienes 7 segundos para captar la atención de alguien. Todos hemos estado ahí, esperando a que una página cargue y pasando a otra antes de que podamos parpadear.

Realiza algunas pruebas para asegurarte de que tu página se cargue rápidamente. Lo último que quieres es que alguien abandone el sitio porque las imágenes de tu página no se carguen.

¡Piensa en tu estrategia de SEO: el tamaño de las imágenes y la velocidad de carga forman parte de ella!

Parte de contar con una imagen principal responsive es tener en cuenta todos los distintos tamaños de pantalla en los que podría visualizarse.

Optimizarla para todos los dispositivos es esencial y ayudará a mantener tu imagen coherente para todos los usuarios. Hay muchas herramientas que puedes usar, como un generador de breakpoints para imágenes responsive. Esto comprobará tu imagen en una variedad de tamaños de pantalla para que puedas elegir el tamaño óptimo.

O puedes usar un software de diseño gráfico que te ayude a crear contenido para múltiples dispositivos. Puede que termines recortando o usando una versión diferente de la imagen principal para adaptarla a pantallas más pequeñas, como las de un smartphone.

Fíjate en Gold’s Gym. Tienen una gran imagen principal que muestra a cuatro personas diferentes junto con su promesa de marca. Pero eso no cabe en un dispositivo más pequeño; el texto no sería legible.

Por eso hicieron una versión móvil para solucionar este problema. Como puedes ver, el mensaje sigue siendo claro: lo emparejaron con una versión recortada de su imagen existente. Verás a la misma persona, la misma promesa y una imagen ligeramente distinta. Pero sigue transmitiendo la misma idea.

A veces, cambiar la imagen principal para que coincida con la temporada o con una festividad concreta puede crear interés y entusiasmo entre los usuarios. También puede despertar ideas y animarte a comprar un artículo que puedas mostrar en ese caso.

Build A Bear cambia su imagen principal con bastante frecuencia. Cada vez que lo hace, exhibe el peluche perfecto para la ocasión o la festividad.

En este caso, usa un osito vestido con una camiseta tipo esmoquin y algunas flores para simbolizar la próxima festividad: el Día de San Valentín. También juegan con el texto para avisarte de que todavía hay tiempo de sobra para conseguir un oso como este para tu propio San Valentín.

¡Usar un tema o una festividad también es una excelente manera de potenciar tu marketing boca a boca!

Esto es opcional, pero hay una forma específica de hacerlo. Las imágenes en sí no deberían llevar texto. En su lugar, debes usar HTML y CSS para superponer el texto sobre las imágenes.

Muchos sitios simplemente reemplazan la imagen y dejan el código del texto tal cual. La cuestión es que tendrás que usar constantemente imágenes que se alineen bien con la posición del texto. Pero si no cambias las imágenes hero con tanta frecuencia, esto podría funcionarte muy bien.

Al posicionar tu texto de esta manera, permites que la imagen sea más responsiva, lo cual es ideal, especialmente cuando los usuarios llegan a tu sitio desde distintos canales.

La imagen principal actual de Sephora muestra una variedad de productos nuevos y recién llegados. Si te fijas, también muestra una variedad de textos. Para lograrlo, adivinaste: ¡hicieron una superposición de texto!

¿Existe un tamaño general de la imagen principal con el que deberías trabajar? Sí, si quieres un sitio optimizado.

Quieres que la imagen sea lo suficientemente grande para cualquier tamaño de pantalla, pero lo bastante pequeña como para que no ralentice la carga de la página.  Por lo tanto, necesitas usar las dimensiones correctas y encontrar el punto óptimo entre resolución y tamaño.

Hay algunas dimensiones que puedes usar como guía general (ya mencionamos un par): el tamaño del archivo, la resolución y, por supuesto, las dimensiones de la imagen.

Muchas computadoras tienen una resolución mínima de 1024 x 768 píxeles. Querrás que tu imagen principal sea un poco más grande que eso, alrededor de 1600 x 500 píxeles. Sin embargo, puedes optar por un tamaño menor si trabajas con pantallas más pequeñas (como un teléfono o una tableta).

El tamaño de la imagen "hero" para WordPress variará según el dispositivo, igual que en cualquier otro sitio. Debe usarse un archivo más pequeño en dispositivos móviles, mientras que en pantallas grandes se puede usar una imagen de hasta 2880 px. Con el CSS adecuado puedes usar una variedad de tamaños de imagen para distintos dispositivos. Puedes optar por que el navegador redimensione la imagen según el dispositivo; muchas empresas hacen esto. El problema es que puedes perder nitidez y empeorar la velocidad de carga. Pero quizá no sea un gran inconveniente; ten en cuenta que Internet cada vez es más rápido.

Querrás una imagen relativamente grande y de alta resolución (algo más de 2000 px); el truco es comprimirla hasta reducirla en aproximadamente un 70%. Puedes reducir el tamaño del archivo sin comprometer la integridad y la calidad de la imagen.

Siempre es mejor empezar con una imagen de 2.000 px de ancho. Aparte de eso, el creador de sitios web de Limecube no requiere que optimices la imagen, ya que la plataforma lo hace por ti, convirtiendo las imágenes del banner a WebP para una carga rápida de la página. Las imágenes también se redimensionan automáticamente para distintos dispositivos.

Afortunadamente, existen muchos compresores de imágenes gratuitos, así que toma tus imágenes de gran tamaño y comprímelas para una optimización máxima.

Para ser exacto, querrás consultar tu tema de Shopify para obtener información sobre los tamaños de imagen.

Ahora que dominas el concepto de las hero images, repasemos algo de inspiración para ellas. ¡Aquí tienes algunos de nuestros favoritos!

El hero image centrado únicamente en el producto: muestra solo el producto.

El hero image emocional: representa una emoción intensa.

El hero image ilustrativo: usa la ilustración para transmitir el mensaje.

Revisemos algunas imágenes hero para móviles, ya que estamos. Todas ellas transmiten el mismo impacto, aunque adaptadas a un tamaño más pequeño.

Centrada en el CTA: el principal impulsor de esta imagen es el propio CTA.

Imagen del producto centrada: la imagen hero está situada entre el menú y el texto.  

Uso de vídeo: algunas imágenes hero se sustituyen por un vídeo promocional.

Lo que hemos visto es que se utilizan muchas imágenes individuales. Sin embargo, a veces una marca utiliza un collage o una galería de fotos como imagen principal.

Overtone, por ejemplo, utiliza algunas imágenes para mostrar su nuevo producto junto con usuarios reales.

También hay negocios que usan un slider de imágenes o una galería que rota las imágenes para ofrecer aún más efectos visuales al usuario. Esto se aprecia en las flechas situadas a ambos lados de la imagen, así como en los puntos en la parte inferior de la misma.

¿De dónde obtienes las imágenes que usas? En muchos casos puedes crear tu propio contenido. Incluso, a veces, puedes usar contenido generado por los usuarios. Pero, si quieres probar con fotos de stock gratuitas, tienes muchas opciones.

Muchos sitios web de imágenes gratuitos ofrecen imágenes libres de regalías que puedes usar en tu sitio web. En muchos casos, puedes encontrar fotos realmente buenas que puedes personalizar para tu negocio.

Algunos de los sitios más populares incluyen:

Pikwizard – Es gratuito y ofrece más de 1.000.000 de fotos. Incluso puedes conseguir vectores e ilustraciones gratis.

Design Wizard – Hay una opción gratuita, pero puedes actualizar para obtener aún más contenido. Esta herramienta ofrece muchas imágenes gratuitas y opciones de edición; vale la pena echarle un vistazo.

No tiene por qué ser difícil; como puedes ver, tienes muchas opciones para crear la mejor imagen principal de tu sitio. Solo asegúrate de tener en cuenta el tamaño de la pantalla y el tiempo de carga, y el resto vendrá fácilmente.