Se conoce como hero image a la imagen de gran tamaño que aparece como el elemento visualmente más destacado de una página web. Generalmente se ubica en el centro de la página de inicio, al frente de cualquier otro objeto o, a lo sumo, con algunas líneas de texto encima. Sin embargo, algunos incluyen en este concepto a las grandes imágenes de fondo. Está diseñada para ser lo primero que llama la atención del usuario al ingresar a la página. Por eso, suele contener información sobre temas importantes, como los valores de la empresa, una característica prominente del producto, el artículo más vendido, una noticia destacada, etc. La diseñadora de UX Kara Pernice sugiere utilizar hero images en lugar de sliders. AndrewElsass usa hero images (con un filtro de color) en el encabezado de sus páginas internas. A continuación ofrecemos algunos consejos para sacarle el máximo provecho a este recurso.

• Establecer un propósito. La agencia Avatar New York opina que las hero images le brindan a una empresa la posibilidad de expresar su propósito y valor, y sugiere hacerse estas preguntas para elegir bien:
  • ¿Cuál es el valor de mis bienes o servicios?
  • ¿Qué reacción espero por parte de los clientes?
  • ¿Hay una única imagen que refleje múltiples facetas de la empresa?
  • ¿Existe la posibilidad de que los visitantes malinterpreten la imagen?
• Procurar la calidad. Obviamente, la imagen debe haber sido tomada por un fotógrafo profesional especialmente para la ocasión. Las fotos obtenidas de bancos de imágenes son reconocibles y dejan una mala impresión. Además, la imagen debe contar con una buena definición. Reglas similares aplican si no se trata de una foto, sino de una ilustración.
• Optimizar la imagen. Las imágenes de gran resolución pueden alcanzar un peso importante. No sería ideal que todo el contenido de la página esté cargado antes de que termine de cargarse la imagen. Usar técnicas para reducir el tamaño de la foto, o bien mostrar un preloader, son opciones a tener en cuenta en estos casos.
• Integrar con el texto. Si vamos a colocar texto encima de la imagen, este debe ser legible. El texto debería tener un tamaño generoso (especialmente si se trata de un título) y un buen contraste para destacarse sobre el fondo. Difuminar ligeramente la imagen es una buena idea si no nos interesa que sus detalles se aprecien al máximo.
• Ubicar bien los elementos. Los botones, los menús y el contenido no deberían tapar partes importantes de la foto.
• Probar en varias resoluciones. Las hero images tienen, por definición, un gran tamaño, pero ¿qué ocurre en dispositivos pequeños? Debemos probar la imagen en distintas resoluciones, procurando que conserve su significado en todas ellas. Las opciones son reducir el tamaño (puede perderse demasiado detalle), recortarla (dejando fuera las partes menos importantes) o reemplazarla por otra.

Aplicando estos principios crearemos la mejor hero image posible: aquella que transmita exactamente la emoción, la información o los valores que nos gustaría que el usuario asimile apenas entra en nuestro sitio web.