{"id":4186,"date":"2022-03-02T07:01:16","date_gmt":"2022-03-02T07:01:16","guid":{"rendered":"https:\/\/vwo.com\/glossary\/hero-image\/"},"modified":"2025-06-30T06:47:55","modified_gmt":"2025-06-30T06:47:55","slug":"hero-image","status":"publish","type":"post","link":"https:\/\/vwo.com\/glossary\/es\/hero-image\/","title":{"rendered":"Imagen principal (Hero Image)"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\"><strong>\u00bfQu\u00e9 es una imagen principal o Hero Image?<\/strong><\/h2>\n\n\n\n<p>En dise\u00f1o web, el t\u00e9rmino imagen principal o&nbsp;<em>hero image<\/em>&nbsp;hace referencia a una imagen grande y llamativa con texto, que normalmente se muestra en el \u00e1rea visible sin necesidad de desplazarse <a href=\"https:\/\/vwo.com\/glossary\/es\/above-the-fold\/\">(above the fold)<\/a>, justo debajo del encabezado del sitio.<\/p>\n\n\n\n<p>Por lo general, la imagen principal ocupa casi toda la anchura completa de la pantalla antes de hacer <em>scroll<\/em>. Los dem\u00e1s elementos del dise\u00f1o (bot\u00f3n de <a href=\"https:\/\/vwo.com\/glossary\/es\/call-to-action-cta\/\">Call to Action (CTA)<\/a>, texto, etc.) se colocan en el encabezado o encima\/adjunto a la imagen para lograr una composici\u00f3n visual unificada y armoniosa.<\/p>\n\n\n\n<p>La imagen principal puede ser est\u00e1tica o interactiva (como videos o animaciones). Puede tratarse de una fotograf\u00eda tem\u00e1tica de tecnolog\u00eda, una estructura, un paisaje, o incluso un modelo abstracto o una obra art\u00edstica. El objetivo principal es establecer una conexi\u00f3n visual, emocional e informativa r\u00e1pida con el visitante mediante una imagen que capte su atenci\u00f3n de inmediato. La idea no es explicar todo el contenido, sino introducirlo de una forma que haga que el usuario se detenga, deje de hacer <em>scroll<\/em> y haga clic para saber m\u00e1s.<\/p>\n\n\n\n<p>La imagen principal sirve como introducci\u00f3n para:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Publicaciones digitales de todo tipo: noticias, entretenimiento, deportes.<\/li>\n\n\n\n<li>P\u00e1ginas de producto: desde tablas de surf hasta software.<\/li>\n\n\n\n<li>Promoci\u00f3n de pel\u00edculas, series de televisi\u00f3n o discos musicales.<\/li>\n\n\n\n<li>P\u00e1ginas web de hoteles y servicios de hospitalidad.<\/li>\n\n\n\n<li>P\u00e1ginas web de eventos.<\/li>\n\n\n\n<li>Blogs de estilo de vida.<\/li>\n\n\n\n<li>Consultoras y agencias de publicidad.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped aligncenter wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1500\" height=\"1100\" data-id=\"1512\" src=\"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-27.png\" alt=\"Hero image website\" class=\"wp-image-1512\" srcset=\"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-27.png 1500w, https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-27.png?tr=w-1366 1366w, https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-27.png?tr=w-1024 1024w, https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-27.png?tr=w-768 768w, https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-27.png?tr=w-640 640w, https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-27.png?tr=w-375 375w\" sizes=\"(max-width: 1500px) 100vw, 1500px\" \/><\/figure>\n<figcaption class=\"blocks-gallery-caption wp-element-caption\"><span id=\"docs-internal-guid-142675bb-7fff-ead0-7d54-2fb4c130f86b\"><span style=\"font-size: 10pt;font-family: Montserrat, sans-serif;vertical-align: baseline\">Fuente de imagen: <\/span><a href=\"https:\/\/www.justinmind.com\/blog\/inspiring-hero-image-websites\/\" target=\"_blank\" rel=\"noreferrer noopener\"><span style=\"font-size: 10pt;font-family: Montserrat, sans-serif;vertical-align: baseline\">Justinmind<\/span><\/a><\/span><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Importancia de la imagen principal<\/strong><\/h2>\n\n\n\n<p>La&nbsp;imagen principal&nbsp;es un componente clave del dise\u00f1o web y cumple diversas funciones y beneficios en una p\u00e1gina.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Impresionar y atraer a los visitantes<\/strong><\/h3>\n\n\n\n<p>La percepci\u00f3n visual se activa desde el primer segundo: hay poco tiempo para despertar el inter\u00e9s de un visitante ante nuevas ofertas o sorprender a quien regresa. La imagen principal ofrece la oportunidad de captar su atenci\u00f3n de inmediato.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Transmitir conocimiento e informaci\u00f3n<\/strong><\/h3>\n\n\n\n<p>En general, los seres humanos procesan e interpretan las im\u00e1genes mucho m\u00e1s r\u00e1pido que las palabras. Por lo tanto, adem\u00e1s de su funci\u00f3n est\u00e9tica, la imagen principal tambi\u00e9n cumple una funci\u00f3n educativa, ya que transmite un mensaje visual breve sobre el contenido.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Mejora la navegaci\u00f3n<\/strong><\/h3>\n\n\n\n<p>Una imagen principal bien compuesta puede facilitar la navegaci\u00f3n y dirigir la atenci\u00f3n hacia el bot\u00f3n de Call to Action (CTA).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Provocar emociones en los visitantes<\/strong><\/h3>\n\n\n\n<p>El contexto emocional de la experiencia de usuario desempe\u00f1a un papel fundamental y humaniza la interacci\u00f3n entre la p\u00e1gina y el visitante. Las im\u00e1genes principales son un recurso probado para evocar emociones mediante im\u00e1genes, formas y colores, y generar el ambiente adecuado desde el primer instante de interacci\u00f3n.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Placer est\u00e9tico<\/strong><\/h3>\n\n\n\n<p>Sin duda, lo m\u00e1s importante es que el sitio funcione bien y ofrezca buenos servicios. Pero tambi\u00e9n es cierto que las personas valoran el dise\u00f1o visual. La est\u00e9tica es cada vez m\u00e1s importante en la experiencia de usuario, especialmente ante la feroz competencia en l\u00ednea, y la imagen principal contribuye a cubrir esta necesidad visual.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Tipos de gr\u00e1ficos utilizados en im\u00e1genes principales<\/strong><\/h2>\n\n\n\n<p>Los elementos visuales utilizados como imagen principal y la narrativa que transmiten dependen de los objetivos de la p\u00e1gina de inicio y del prop\u00f3sito general del sitio web. Puede tratarse de una noticia urgente, una oferta destacada, una nueva publicaci\u00f3n, un servicio clave o cualquier contenido que requiera captar la m\u00e1xima atenci\u00f3n. En los sitios de comercio electr\u00f3nico, por ejemplo, las im\u00e1genes principales se utilizan con frecuencia para mostrar los productos m\u00e1s vendidos, ofertas promocionales, descuentos o servicios esenciales.<\/p>\n\n\n\n<p>La imagen principal o hero image puede usar cualquiera de los siguientes tipos de gr\u00e1ficos.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Fotograf\u00edas<\/strong><\/h3>\n\n\n\n<p>Su principal ventaja es que ayudan a establecer una conexi\u00f3n entre el contenido digital y los objetos o personas reales.<\/p>\n\n\n\n<p>Cuando se utilizan en un sitio web, las fotos generan asociaciones fuertes y comunican emociones de forma adecuada al p\u00fablico objetivo. Las fotos en tu interfaz de usuario te permiten combinar la realidad y la est\u00e9tica, lo que ayuda a mantener el estilo esencial y, al mismo tiempo, atrae las emociones de tu p\u00fablico objetivo.<\/p>\n\n\n\n<p>En el caso del comercio electr\u00f3nico, donde el concepto de \u00ablo que ves es lo que obtienes\u00bb es crucial, las fotograf\u00edas son la herramienta visual principal para mostrar productos.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Ilustraciones<\/strong><\/h3>\n\n\n\n<p>Los gr\u00e1ficos personalizados se han convertido en una tendencia popular del dise\u00f1o web para m\u00faltiples prop\u00f3sitos, incluidas las im\u00e1genes principales. Pueden adoptar distintos estilos y ayudan eficazmente a que el usuario comprenda r\u00e1pidamente la informaci\u00f3n. Tambi\u00e9n aportan originalidad visual y mejoran la est\u00e9tica y elegancia de p\u00e1ginas web, blogs y p\u00e1ginas de destino.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Gr\u00e1ficos en 3D<\/strong><\/h3>\n\n\n\n<p>Los gr\u00e1ficos 3D, generados al convertir modelos de bastidor tridimensionales en im\u00e1genes 2D, son otro recurso visual en auge. Una de sus mayores ventajas es que pueden mostrar efectos realistas. Cuando est\u00e1n bien ejecutados, los gr\u00e1ficos 3D son muy atractivos, modernos y convincentes, por lo que pueden influir significativamente en la apariencia y en las tasas de conversi\u00f3n de un sitio web. Aunque requieren conocimientos especializados, suelen ser costosos y tardados de producir, su impacto visual ha hecho que se utilicen cada vez m\u00e1s como imagen principal.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.justinmind.com\/blog\/inspiring-hero-image-websites\/\" target=\"_blank\" rel=\"noreferrer noopener\">Esta p\u00e1gina web<\/a>&nbsp;muestra ejemplos inspiradores del uso de distintos recursos gr\u00e1ficos en im\u00e1genes principales.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Tipos de im\u00e1genes principales disponibles<\/strong><\/h2>\n\n\n\n<p>Puede resultar dif\u00edcil decidir cu\u00e1l es la imagen principal o hero image ideal para tu p\u00e1gina web. La imagen que elijas cambiar\u00e1 en funci\u00f3n de si est\u00e1s promocionando un producto, un servicio o simplemente contenido. Tambi\u00e9n se pueden utilizar v\u00eddeos para transmitir informaci\u00f3n m\u00e1s completa sobre tu negocio.<\/p>\n\n\n\n<p>No es posible saber con certeza qu\u00e9 opci\u00f3n funcionar\u00e1 mejor, por eso lo m\u00e1s recomendable es descartar algunas alternativas y luego realizar un&nbsp;<a href=\"https:\/\/vwo.com\/es\/ab-testing\/\">A\/B Testing<\/a>&nbsp;para descubrir cu\u00e1l ofrece el mejor rendimiento. Para ayudarte a visualizar lo que puedes lograr con los distintos formatos de una&nbsp;imagen principal, aqu\u00ed tienes algunos ejemplos:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>\u00c9nfasis en el producto<\/strong><\/h3>\n\n\n\n<p>En ocasiones, la mejor opci\u00f3n para una imagen principal o hero image es mostrar una fotograf\u00eda sencilla y de alta calidad de tu producto, acompa\u00f1ada de una breve descripci\u00f3n. El sitio web de\u00a0Apple\u00a0es un gran ejemplo de c\u00f3mo utilizar im\u00e1genes de producto para atraer visitantes. Adem\u00e1s, emplean un carrusel para mostrar varios de sus productos.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-2 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1500\" height=\"1050\" data-id=\"1513\" src=\"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-28.png\" alt=\"An example of Apple's website\" class=\"wp-image-1513\" srcset=\"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-28.png 1500w, https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-28.png?tr=w-1366 1366w, https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-28.png?tr=w-1024 1024w, https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-28.png?tr=w-768 768w, https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-28.png?tr=w-640 640w, https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-28.png?tr=w-375 375w\" sizes=\"(max-width: 1500px) 100vw, 1500px\" \/><\/figure>\n<figcaption class=\"blocks-gallery-caption wp-element-caption\"><span id=\"docs-internal-guid-bff2ac10-7fff-36ce-4891-3a942a7fb768\"><span style=\"font-size: 10pt;font-family: Montserrat, sans-serif;vertical-align: baseline\">Fuente de imagen: <\/span><a href=\"https:\/\/www.justinmind.com\/blog\/inspiring-hero-image-websites\/\" target=\"_blank\" rel=\"noreferrer noopener\"><span style=\"font-size: 10pt;font-family: Montserrat, sans-serif;vertical-align: baseline\">justinmind<\/span><\/a><\/span><\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Destacar beneficios<\/strong><\/h3>\n\n\n\n<p>Para negocios que ofrecen servicios, una imagen principal que resalte una propuesta de valor o una ventaja competitiva (USP) es una excelente elecci\u00f3n. Por ejemplo, en su p\u00e1gina web,&nbsp;UXPin&nbsp;permite que los usuarios empiecen a usar el servicio de inmediato, superponiendo su propuesta de valor sobre una imagen din\u00e1mica y desvanecida.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped aligncenter wp-block-gallery-3 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"512\" height=\"287\" data-id=\"1514\" src=\"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-29.png\" alt=\"UXPin's example \" class=\"wp-image-1514\" srcset=\"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-29.png 512w, https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-29.png?tr=w-375 375w\" sizes=\"(max-width: 512px) 100vw, 512px\" \/><\/figure>\n<figcaption class=\"blocks-gallery-caption wp-element-caption\"><span id=\"docs-internal-guid-ce143913-7fff-4b12-6318-0373855930d2\"><p dir=\"ltr\" style=\"line-height:1.38;margin-top:0pt;margin-bottom:0pt\"><span style=\"font-size: 10pt;font-family: Montserrat, sans-serif;vertical-align: baseline\">Fuente de imagen: <\/span><a href=\"https:\/\/yourstory.com\/2017\/03\/what-is-hero-image?utm_pageloadtype=scroll\" target=\"_blank\" rel=\"noreferrer noopener\"><span style=\"font-size: 10pt;font-family: Montserrat, sans-serif;vertical-align: baseline\">yourstory<\/span><\/a><\/p><\/span><\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Representaci\u00f3n sencilla<\/strong><\/h3>\n\n\n\n<p>Puedes explicar lo que ofrece tu empresa con una imagen b\u00e1sica y clara, sin abrumar a los visitantes con demasiada informaci\u00f3n. Haz que funcione a\u00f1adiendo un texto claro y un bot\u00f3n de Call to Action (CTA) bien visible. Echa un vistazo a la p\u00e1gina principal de&nbsp;Buffer&nbsp;para ver este ejemplo en acci\u00f3n.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped aligncenter wp-block-gallery-4 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"447\" data-id=\"1515\" src=\"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-30.png\" alt=\"Buffer's homepage\" class=\"wp-image-1515\" srcset=\"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-30.png 800w, https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-30.png?tr=w-768 768w, https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-30.png?tr=w-640 640w, https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-30.png?tr=w-375 375w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n<figcaption class=\"blocks-gallery-caption wp-element-caption\"><span id=\"docs-internal-guid-626d2ce5-7fff-7759-9fbe-f4cd6cccf46f\"><span style=\"font-size: 10pt;font-family: Montserrat, sans-serif;vertical-align: baseline\">Fuente de imagen: <\/span><a href=\"https:\/\/yourstory.com\/2017\/03\/what-is-hero-image?utm_pageloadtype=scroll\" target=\"_blank\" rel=\"noreferrer noopener\"><span style=\"font-size: 10pt;font-family: Montserrat, sans-serif;vertical-align: baseline\">yourstory<\/span><\/a><\/span><\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>El elemento humano<\/strong><\/h3>\n\n\n\n<p>Est\u00e1 m\u00e1s que demostrado que incluir personas reales en tu contenido visual ayuda a generar confianza y credibilidad con los visitantes.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped aligncenter wp-block-gallery-5 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"900\" height=\"571\" data-id=\"1516\" src=\"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-31.png\" alt=\"An example of Yoga Lite's homepage\" class=\"wp-image-1516\" srcset=\"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-31.png 900w, https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-31.png?tr=w-768 768w, https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-31.png?tr=w-640 640w, https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-31.png?tr=w-375 375w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure>\n<figcaption class=\"blocks-gallery-caption wp-element-caption\">Fuente de imagen: <a href=\"https:\/\/www.mockplus.com\/blog\/post\/hero-image-website-examples\" target=\"_blank\" rel=\"noreferrer noopener\">Mockplus<\/a><\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Despertar emociones<\/strong><\/h3>\n\n\n\n<p>Si logras que tu imagen principal o hero image provoque emociones en los visitantes, hay m\u00e1s probabilidades de que sigan tu llamado a la acci\u00f3n. La organizaci\u00f3n sin \u00e1nimo de lucro\u00a0Charity: Water, que se dedica a llevar agua potable a comunidades necesitadas, utiliza im\u00e1genes que reflejan el impacto positivo de las donaciones.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped aligncenter wp-block-gallery-6 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"456\" data-id=\"1517\" src=\"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-32.png\" alt=\"Charity's webpage \" class=\"wp-image-1517\" srcset=\"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-32.png 800w, https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-32.png?tr=w-768 768w, https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-32.png?tr=w-640 640w, https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-32.png?tr=w-375 375w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n<figcaption class=\"blocks-gallery-caption wp-element-caption\"><span id=\"docs-internal-guid-7a23b378-7fff-44a9-fabb-24c69d2cc30e\"><span style=\"font-size: 10pt;font-family: Montserrat, sans-serif;vertical-align: baseline\">Fuente de imagen: <\/span><a href=\"https:\/\/yourstory.com\/2017\/03\/what-is-hero-image?utm_pageloadtype=scroll\" target=\"_blank\" rel=\"noreferrer noopener\"><span style=\"font-size: 10pt;font-family: Montserrat, sans-serif;vertical-align: baseline\">yourstory<\/span><\/a><\/span><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Buenas pr\u00e1cticas para im\u00e1genes principales<\/strong><\/h2>\n\n\n\n<p>Las tendencias son solo una peque\u00f1a parte del desarrollo de una buena imagen principal o hero image. El resto del trabajo se basa en principios de dise\u00f1o probados con el tiempo. Puedes crear una imagen principal que conecte con tu audiencia si sigues estas buenas pr\u00e1cticas:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Tama\u00f1o y ubicaci\u00f3n<\/strong><\/h3>\n\n\n\n<p>Sigue estos consejos:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>La imagen principal debe estar centrada.<\/li>\n\n\n\n<li>El texto debe ser f\u00e1cil de leer.<\/li>\n\n\n\n<li>Debe lucir bien en todo tipo de pantallas.<\/li>\n\n\n\n<li>La imagen debe ocupar toda la ventana.<\/li>\n\n\n\n<li>Sigue estas recomendaciones de tama\u00f1o:\n<ul class=\"wp-block-list\">\n<li>Para una imagen principal a pantalla completa: 1200 p\u00edxeles de ancho y relaci\u00f3n de aspecto 16:9.<\/li>\n\n\n\n<li>Para una imagen principal tipo banner: resoluci\u00f3n \u00f3ptima de 1600 x 500 p\u00edxeles.<\/li>\n\n\n\n<li>Para una imagen principal en m\u00f3vil: resoluci\u00f3n \u00f3ptima de 800 x 1200 p\u00edxeles.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Prueba archivos JPG y PNG para ver cu\u00e1l acelera m\u00e1s la carga de la p\u00e1gina.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Equilibrio y armon\u00eda<\/strong><\/h3>\n\n\n\n<p>Si la imagen principal no est\u00e1 en sinton\u00eda con el estilo general del sitio, los visitantes se distraer\u00e1n con el mal dise\u00f1o y se ir\u00e1n de inmediato. Puedes mantener la coherencia est\u00e9tica prestando atenci\u00f3n a las tipograf\u00edas, tama\u00f1os, colores, navegaci\u00f3n, elementos gr\u00e1ficos y contenido.<\/p>\n\n\n\n<p>A la hora de dise\u00f1ar una imagen principal, conviene tener en cuenta la identidad y los valores de tu marca. Lo \u00faltimo que deseas es que los visitantes pierdan el inter\u00e9s antes de llegar al contenido importante.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Organizaci\u00f3n l\u00f3gica<\/strong><\/h3>\n\n\n\n<p>Una organizaci\u00f3n eficiente es clave para lograr un dise\u00f1o arm\u00f3nico. El contenido de tu imagen principal debe estar estructurado de forma l\u00f3gica, donde cada elemento refuerce al anterior. Esto es esencial para sincronizar im\u00e1genes con texto.<\/p>\n\n\n\n<p>Aseg\u00farate de que tu mensaje se entienda claramente y que los elementos gr\u00e1ficos lo refuercen. Puede ser \u00fatil crear un bastidor para visualizar c\u00f3mo se organizar\u00e1 la imagen principal en la p\u00e1gina.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Gr\u00e1ficos originales<\/strong><\/h3>\n\n\n\n<p>Aunque las im\u00e1genes de archivo son una herramienta \u00fatil del marketing de contenidos, lo ideal es incorporar gr\u00e1ficos originales, ya que pueden ayudarte a cumplir mejor tus objetivos de marketing. Puedes dejar volar tu creatividad usando herramientas como&nbsp;Canva&nbsp;para dise\u00f1ar im\u00e1genes principales \u00fanicas o buscar inspiraci\u00f3n en plataformas como&nbsp;Behance.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Continuidad y consistencia<\/strong><\/h3>\n\n\n\n<p>\u00bfQu\u00e9 es lo m\u00e1s dif\u00edcil de crear contenido visual atractivo? Seg\u00fan muchos profesionales del marketing, hacerlo de forma constante. Establece un calendario de producci\u00f3n de gr\u00e1ficos e incl\u00fayelo en tu presupuesto de marketing si es necesario.<\/p>\n\n\n\n<p>Si el tiempo apremia, redise\u00f1ar tus gr\u00e1ficos antiguos puede ser una excelente alternativa. Es una forma creativa y eficiente de avanzar sin partir desde cero.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Conclusi\u00f3n<\/strong><\/h2>\n\n\n\n<p>Una imagen principal impactante atrae a los visitantes y los motiva a quedarse y explorar el sitio.<\/p>\n\n\n\n<p>Las im\u00e1genes principales influyen enormemente en la percepci\u00f3n de tu marca, el tr\u00e1fico del sitio web y las conversiones, ya que son el primer punto de contacto con el usuario.<\/p>\n\n\n\n<p>En resumen, queda claro que las im\u00e1genes principales ofrecen una herramienta vers\u00e1til y potente para los dise\u00f1adores web. Tienen el potencial de mejorar tanto la usabilidad como la est\u00e9tica del sitio, incentivando a los visitantes a seguir navegando. Ahora es el momento de poner en pr\u00e1ctica lo que has aprendido y dise\u00f1ar una imagen principal que capte la atenci\u00f3n desde el primer instante. Para asegurarte de que tu&nbsp;imagen principal&nbsp;funciona, haz un&nbsp;A\/B Testing&nbsp;con varias versiones usando VWO. <a href=\"#free-trial\">Empieza con una prueba gratuita<\/a> y hazlo hoy mismo.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Una imagen principal es una imagen grande e impactante con texto que suele mostrarse en el \u00e1rea superior visible de una p\u00e1gina web, justo debajo del encabezado.<\/p>\n","protected":false},"author":565,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3],"tags":[],"class_list":["post-4186","post","type-post","status-publish","format-standard","hentry","category-unkategorisiert"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.9 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Hero Image (Imagen principal) | VWO<\/title>\n<meta name=\"description\" content=\"Una hero image o imagen principal es una imagen grande con texto que se muestra en el \u00e1rea visible (above the fold) justo debajo del encabezado del sitio web.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/vwo.com\/glossary\/es\/hero-image\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Hero Image (Imagen principal) | VWO\" \/>\n<meta property=\"og:description\" content=\"Una hero image o imagen principal es una imagen grande con texto que se muestra en el \u00e1rea visible (above the fold) justo debajo del encabezado del sitio web.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/vwo.com\/glossary\/es\/hero-image\/\" \/>\n<meta property=\"og:site_name\" content=\"VWO Glossary\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-02T07:01:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-06-30T06:47:55+00:00\" \/>\n<meta name=\"author\" content=\"avnishsharamav\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/vwo.com\/glossary\/es\/hero-image\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/vwo.com\/glossary\/es\/hero-image\/\"},\"author\":{\"name\":\"avnishsharamav\",\"@id\":\"https:\/\/vwo.com\/glossary\/es\/#\/schema\/person\/620cb97e975598f02bdaf7e87d218044\"},\"headline\":\"Imagen principal (Hero Image)\",\"datePublished\":\"2022-03-02T07:01:16+00:00\",\"dateModified\":\"2025-06-30T06:47:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/vwo.com\/glossary\/es\/hero-image\/\"},\"wordCount\":2003,\"image\":{\"@id\":\"https:\/\/vwo.com\/glossary\/es\/hero-image\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-27.png\",\"articleSection\":[\"Unkategorisiert\"],\"inLanguage\":\"es\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/vwo.com\/glossary\/es\/hero-image\/\",\"url\":\"https:\/\/vwo.com\/glossary\/es\/hero-image\/\",\"name\":\"Hero Image (Imagen principal) | VWO\",\"isPartOf\":{\"@id\":\"https:\/\/vwo.com\/glossary\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/vwo.com\/glossary\/es\/hero-image\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/vwo.com\/glossary\/es\/hero-image\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-27.png\",\"datePublished\":\"2022-03-02T07:01:16+00:00\",\"dateModified\":\"2025-06-30T06:47:55+00:00\",\"author\":{\"@id\":\"https:\/\/vwo.com\/glossary\/es\/#\/schema\/person\/620cb97e975598f02bdaf7e87d218044\"},\"description\":\"Una hero image o imagen principal es una imagen grande con texto que se muestra en el \u00e1rea visible (above the fold) justo debajo del encabezado del sitio web.\",\"breadcrumb\":{\"@id\":\"https:\/\/vwo.com\/glossary\/es\/hero-image\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/vwo.com\/glossary\/es\/hero-image\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/vwo.com\/glossary\/es\/hero-image\/#primaryimage\",\"url\":\"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-27.png\",\"contentUrl\":\"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-27.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/vwo.com\/glossary\/es\/hero-image\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/vwo.com\/glossary\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Imagen principal (Hero Image)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/vwo.com\/glossary\/es\/#website\",\"url\":\"https:\/\/vwo.com\/glossary\/es\/\",\"name\":\"VWO Glossary\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/vwo.com\/glossary\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/vwo.com\/glossary\/es\/#\/schema\/person\/620cb97e975598f02bdaf7e87d218044\",\"name\":\"avnishsharamav\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/vwo.com\/glossary\/es\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/5b76ede4c1368d6104eaa4834bd018786dcfa0a69cd759ca31da38e37a39c1e7?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/5b76ede4c1368d6104eaa4834bd018786dcfa0a69cd759ca31da38e37a39c1e7?s=96&d=mm&r=g\",\"caption\":\"avnishsharamav\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Hero Image (Imagen principal) | VWO","description":"Una hero image o imagen principal es una imagen grande con texto que se muestra en el \u00e1rea visible (above the fold) justo debajo del encabezado del sitio web.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/vwo.com\/glossary\/es\/hero-image\/","og_locale":"es_ES","og_type":"article","og_title":"Hero Image (Imagen principal) | VWO","og_description":"Una hero image o imagen principal es una imagen grande con texto que se muestra en el \u00e1rea visible (above the fold) justo debajo del encabezado del sitio web.","og_url":"https:\/\/vwo.com\/glossary\/es\/hero-image\/","og_site_name":"VWO Glossary","article_published_time":"2022-03-02T07:01:16+00:00","article_modified_time":"2025-06-30T06:47:55+00:00","author":"avnishsharamav","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/vwo.com\/glossary\/es\/hero-image\/#article","isPartOf":{"@id":"https:\/\/vwo.com\/glossary\/es\/hero-image\/"},"author":{"name":"avnishsharamav","@id":"https:\/\/vwo.com\/glossary\/es\/#\/schema\/person\/620cb97e975598f02bdaf7e87d218044"},"headline":"Imagen principal (Hero Image)","datePublished":"2022-03-02T07:01:16+00:00","dateModified":"2025-06-30T06:47:55+00:00","mainEntityOfPage":{"@id":"https:\/\/vwo.com\/glossary\/es\/hero-image\/"},"wordCount":2003,"image":{"@id":"https:\/\/vwo.com\/glossary\/es\/hero-image\/#primaryimage"},"thumbnailUrl":"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-27.png","articleSection":["Unkategorisiert"],"inLanguage":"es"},{"@type":"WebPage","@id":"https:\/\/vwo.com\/glossary\/es\/hero-image\/","url":"https:\/\/vwo.com\/glossary\/es\/hero-image\/","name":"Hero Image (Imagen principal) | VWO","isPartOf":{"@id":"https:\/\/vwo.com\/glossary\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/vwo.com\/glossary\/es\/hero-image\/#primaryimage"},"image":{"@id":"https:\/\/vwo.com\/glossary\/es\/hero-image\/#primaryimage"},"thumbnailUrl":"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-27.png","datePublished":"2022-03-02T07:01:16+00:00","dateModified":"2025-06-30T06:47:55+00:00","author":{"@id":"https:\/\/vwo.com\/glossary\/es\/#\/schema\/person\/620cb97e975598f02bdaf7e87d218044"},"description":"Una hero image o imagen principal es una imagen grande con texto que se muestra en el \u00e1rea visible (above the fold) justo debajo del encabezado del sitio web.","breadcrumb":{"@id":"https:\/\/vwo.com\/glossary\/es\/hero-image\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/vwo.com\/glossary\/es\/hero-image\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/vwo.com\/glossary\/es\/hero-image\/#primaryimage","url":"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-27.png","contentUrl":"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/18\/2022\/11\/unnamed-27.png"},{"@type":"BreadcrumbList","@id":"https:\/\/vwo.com\/glossary\/es\/hero-image\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/vwo.com\/glossary\/es\/"},{"@type":"ListItem","position":2,"name":"Imagen principal (Hero Image)"}]},{"@type":"WebSite","@id":"https:\/\/vwo.com\/glossary\/es\/#website","url":"https:\/\/vwo.com\/glossary\/es\/","name":"VWO Glossary","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/vwo.com\/glossary\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/vwo.com\/glossary\/es\/#\/schema\/person\/620cb97e975598f02bdaf7e87d218044","name":"avnishsharamav","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/vwo.com\/glossary\/es\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/5b76ede4c1368d6104eaa4834bd018786dcfa0a69cd759ca31da38e37a39c1e7?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5b76ede4c1368d6104eaa4834bd018786dcfa0a69cd759ca31da38e37a39c1e7?s=96&d=mm&r=g","caption":"avnishsharamav"}}]}},"_links":{"self":[{"href":"https:\/\/vwo.com\/glossary\/es\/wp-json\/wp\/v2\/posts\/4186","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vwo.com\/glossary\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vwo.com\/glossary\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vwo.com\/glossary\/es\/wp-json\/wp\/v2\/users\/565"}],"replies":[{"embeddable":true,"href":"https:\/\/vwo.com\/glossary\/es\/wp-json\/wp\/v2\/comments?post=4186"}],"version-history":[{"count":6,"href":"https:\/\/vwo.com\/glossary\/es\/wp-json\/wp\/v2\/posts\/4186\/revisions"}],"predecessor-version":[{"id":4203,"href":"https:\/\/vwo.com\/glossary\/es\/wp-json\/wp\/v2\/posts\/4186\/revisions\/4203"}],"wp:attachment":[{"href":"https:\/\/vwo.com\/glossary\/es\/wp-json\/wp\/v2\/media?parent=4186"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vwo.com\/glossary\/es\/wp-json\/wp\/v2\/categories?post=4186"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vwo.com\/glossary\/es\/wp-json\/wp\/v2\/tags?post=4186"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}