Piensa en una web que te perdió en los primeros segundos y vuelve a subir hasta arriba. Lo más probable es que las imágenes tuvieran algo que ver. Una foto de archivo de desconocidos sonrientes que no se parecen en nada a las personas a las que atiende de verdad este negocio. Una imagen principal tan vaga que podría pertenecer a cualquier empresa de cualquier sector. O ninguna imagen, y la página se ve desnuda e inacabada. Las imágenes de una web no son decoración. Son comunicación. Este artículo explica qué hacen realmente las imágenes de una web, cómo elegir las adecuadas, dónde deben ir en cada página y qué pasa cuando te equivocas.
Los visitantes procesan las imágenes más rápido que las palabras. Antes de que nadie lea tu titular, su cerebro ya se ha formado una primera impresión a partir de lo visual. Eso significa que tus imágenes están defendiendo algo sobre tu negocio antes de que tú puedas hacerlo. La cuestión es si ese argumento es el que quieres defender.
¿Qué hacen realmente las imágenes de una web?
Cada imagen de tu web dice algo al visitante. La imagen principal de tu página de inicio dice "este es el tipo de negocio que somos y esto es para quién somos". La foto de tu página Sobre nosotros dice "aquí hay personas reales". La foto de producto de tu página de servicios dice "esto es lo que obtienes al trabajar con nosotros".
Cuando esas señales son claras y relevantes, los visitantes se sienten orientados. Cuando son vagas o genéricas, los visitantes no sienten nada, que es el peor resultado. Un visitante que no siente nada no tiene motivo para seguir leyendo.
Las imágenes también guían hacia dónde va la mirada. Es el núcleo de la jerarquía visual de una página. Una imagen bien colocada atrae la atención hacia la sección que importa. Una mal colocada la divide y deja al visitante sin saber dónde mirar después. Cada imagen debe ganarse su posición ayudando al visitante a avanzar en la dirección correcta.
Fotos reales frente a fotos de archivo: ¿importa?
Sí. Más de lo que mucha gente espera.
Los visitantes detectan las fotos de archivo mejor que hace cinco años. La sala de reuniones perfectamente iluminada con cuatro profesionales de aspecto diverso asintiendo ante un portátil. El apretón de manos frente a un paisaje urbano. La mujer sonriente con una taza de café. Estas imágenes son tan comunes que los visitantes han desarrollado una especie de inmunidad visual. Las ven y no registran nada.
Las fotos reales hacen lo contrario. Una foto de tu local de verdad, de tu equipo de verdad, de tu trabajo terminado de verdad. Estas imágenes son específicas de ti y solo de ti. Un visitante que las ve obtiene la prueba de que detrás de la web existe un negocio real, que es una de las cosas más valiosas que puede comunicar una imagen. Incluso una foto hecha con el móvil con buena luz suele ser más eficaz que una imagen de archivo pulida, porque es real.
Dicho esto, las fotos de archivo tienen su lugar. Para artículos de blog, para ilustrar conceptos abstractos, para rellenar huecos secundarios donde la concreción importa menos, una foto de archivo bien elegida cumple. La regla es: usa fotos reales donde la confianza está en juego y fotos de archivo donde la imagen solo apoya el contenido en lugar de afirmar algo sobre tu negocio.
¿Cómo eliges la imagen adecuada para cada página?
Antes de buscar una imagen, pregúntate qué trabajo tiene que hacer en esa página concreta.
En tu página de inicio, la imagen principal debe comunicar qué haces y para quién lo haces antes de que nadie lea una palabra. Si un visitante pudiera mirar solo tu imagen principal y no tener ni idea de en qué sector estás, la imagen no está haciendo su trabajo.
En tu página Sobre nosotros, la imagen debe ser personal. Muestra a las personas. Muestra el espacio. Muestra algo que haga que el negocio parezca humano y concreto, no corporativo y anónimo.
En una página de servicio o de producto, muestra el resultado. Un antes y después para un negocio de reformas. Una captura del panel de una herramienta de software. Una foto del plato terminado para una empresa de catering. Las imágenes del resultado convencen más que las del proceso porque responden a la pregunta que de verdad se hace el visitante: ¿qué tendré cuando esto esté hecho?
Una vez que sabes el trabajo, entonces buscas la imagen. No al revés.
¿Qué hace que una imagen juegue en tu contra?
Irrelevancia
Una imagen que no dice nada concreto sobre tu negocio, tu servicio o tu cliente indica al visitante que nadie pensó con cuidado en la experiencia visual de la web. Esa impresión se queda.
Falta de coherencia
Si tu texto es cercano y conversacional pero tus imágenes son frías y corporativas, la página resulta incoherente. Los visitantes perciben esa disonancia aunque no sepan nombrarla. El ambiente de la imagen y el del texto deben coincidir.
Cargas lentas
Las imágenes grandes sin comprimir son el motivo más común de que las webs carguen despacio. Una página que tarda más de tres segundos en cargar en el móvil pierde a una parte importante de sus visitantes antes de que vean nada. Cada imagen que subas debe estar comprimida para la web. La mayoría de las plataformas de webs se encargan de parte de esto de forma automática, pero conviene saber qué estás subiendo. Consulta cómo afecta la velocidad de una web a los visitantes y al posicionamiento para ver el cuadro completo.
Falta de texto alternativo
Cada imagen de tu web necesita una breve descripción de lo que muestra, escrita en el campo de texto alternativo (alt). Importa por dos motivos. Los visitantes que usan lectores de pantalla dependen del texto alternativo para entender qué contiene una imagen. Los buscadores usan el texto alternativo para indexar las imágenes. Saltártelo es una forma rápida de perder tanto puntos de accesibilidad como valor SEO.
¿Dónde deben aparecer las imágenes en tus páginas?
No hay una regla universal para colocar las imágenes, pero hay algunos patrones que funcionan de forma constante.
Pon tu mejor imagen donde miran primero los visitantes. En la mayoría de las páginas, es la sección superior, antes de tener que desplazarse. Si un visitante baja antes de decidirse a leer, el segundo hueco de imagen, en algún punto del medio de la página, lo atrapa en pleno desplazamiento. Una tercera imagen cerca del final de una página larga vuelve a captar a los visitantes que han leído casi todo.
Usa imágenes para romper secciones largas de texto, pero solo cuando la imagen aporte algo. Una imagen que ilustra la idea del párrafo que tiene al lado está haciendo un trabajo. Una imagen puesta ahí solo porque la sección parecía demasiado larga es relleno, y los visitantes lo notan.
En el móvil, la colocación de las imágenes cambia porque la pantalla es estrecha y las imágenes se apilan en vertical. Una imagen que va junto al texto en el ordenador aparecerá encima o debajo en el móvil. Prueba cómo se ve cada página en un teléfono y asegúrate de que la imagen sigue teniendo sentido en su nueva posición. Es parte de asegurarte de que tu web sigue los principios del diseño adaptable en cada página.
¿Qué formato de archivo deben tener tus imágenes?
La versión corta:
- JPEG para fotografías. Archivo pequeño, alta calidad, funciona en todas partes.
- PNG para logotipos, iconos y cualquier cosa con fondo transparente o texto nítido.
- WebP para ambos, si tu plataforma lo admite. Genera archivos más pequeños que JPEG y PNG con el mismo nivel de calidad. La mayoría de los navegadores modernos lo gestionan sin problemas.
- SVG para iconos e ilustraciones sencillas. Se escala a la perfección a cualquier tamaño con archivos diminutos.
En cuanto al tamaño de archivo, apunta a menos de 200 kilobytes para las imágenes de página normales. Las imágenes principales pueden llegar a unos 400 kilobytes. Cualquier cosa más grande necesita comprimirse antes de subirla. Una foto de cinco megabytes del móvil no tiene sitio en una página web.
¿Qué es el texto alternativo y por qué lo necesita cada imagen?
El texto alternativo es una breve descripción escrita asociada a una imagen. Va en la etiqueta de la imagen en la página, invisible para los visitantes que ven, pero lo leen los lectores de pantalla y los buscadores. Ambos lo necesitan para entender lo que contienen tus imágenes.
En accesibilidad, el texto alternativo es como los visitantes que usan lectores de pantalla experimentan las imágenes de tu web. Sin él, esos visitantes no oyen nada cuando carga la imagen, lo que deja un vacío en lo que querías comunicar. En SEO, los buscadores no ven las imágenes como las personas. El texto alternativo es como entienden qué muestra una imagen y si es relevante para la página a la que apoya.
Escribir bien el texto alternativo significa describir lo que realmente hay en la imagen, de forma concreta y sencilla. Una foto de una reforma de cocina terminada recibe un texto alternativo como "cocina blanca estilo shaker con encimeras de mármol tras la reforma" en lugar de "foto de cocina" o "imagen1". Si tu palabra clave encaja con naturalidad en la descripción, inclúyela. Pero escribe primero para describir. El texto alternativo que existe solo para repetir palabras clave falla en ambos propósitos.
Cada imagen que subas debe tener su texto alternativo escrito antes de que la página salga en directo. Lleva menos de un minuto por imagen y afecta tanto a quién puede acceder a tu contenido como a cómo posicionan tus páginas.
Cómo gestiona WEMASY las imágenes
El creador de webs de WEMASY incluye bloques de imagen que puedes añadir a cualquier sección de página. Subes las imágenes directamente en el creador, las colocas y cambias de tamaño sin tocar código y añades el texto alternativo en el mismo paso. Las imágenes se sirven de forma adaptable automáticamente, así que se ajustan a cada tamaño de pantalla sin que tengas que crear versiones distintas para ordenador y móvil.
Las secciones de página de WEMASY admiten imágenes junto al texto en diseños de columnas flexibles, o como fondos a todo el ancho para secciones donde una imagen potente marca el tono. En cualquier caso, la imagen se mantiene unida al contenido al que apoya en lugar de flotar suelta en el diseño.
Descubre qué incluye en el creador de webs de WEMASY o consulta los planes en la página de precios.
Preguntas frecuentes sobre las imágenes de una web
¿Necesito fotos profesionales para mi web?
Las fotos profesionales marcan una diferencia real en las páginas clave, sobre todo en la de inicio y la de Sobre nosotros, donde se forma la confianza. Para imágenes secundarias, artículos de blog y elementos visuales de apoyo, una foto bien iluminada tomada con un móvil moderno funciona bien. Lo prioritario es que la imagen sea real y relevante para tu negocio, no que la haya hecho un profesional. Con el creador de webs de WEMASY puedes montarlo directamente en tu web.
¿Cuántas imágenes debe tener una página de inicio?
Las suficientes para apoyar las secciones, sin que la página parezca recargada ni cargue despacio. Una imagen principal potente, una o dos imágenes en el cuerpo de la página y, de forma opcional, una foto del equipo o del lugar de trabajo más abajo es una estructura razonable para la mayoría de las páginas de inicio de negocios pequeños. Cada imagen debe ganarse su sitio en lugar de llenar espacio.
¿Puedo usar imágenes de bancos de fotos en mi web?
Sí, con algunas condiciones. Los bancos de fotos ofrecen imágenes con licencias que permiten el uso comercial, pero revisa las condiciones de cada imagen antes de usarla. La limitación práctica es que esas imágenes aparecen en muchas otras webs, así que úsalas para huecos de imagen secundarios y de apoyo, no como tu elemento visual principal en páginas de mucha confianza como la de inicio o la de Sobre nosotros.
¿De qué tamaño debo subir las imágenes a mi web?
Comprime antes de subir. Apunta a menos de 200 kilobytes para la mayoría de las imágenes de página y menos de 400 kilobytes para las imágenes principales. Usa JPEG para fotografías, PNG para logotipos e imágenes transparentes y WebP si tu plataforma lo admite. Cambia siempre el tamaño de la imagen al ancho máximo al que se mostrará antes de subirla, en lugar de dejar que el navegador la reduzca.
¿Afectan las imágenes al posicionamiento de mi web en buscadores?
Sí, de dos formas. Las imágenes grandes sin comprimir ralentizan tu página, algo que los buscadores tienen en cuenta en el posicionamiento. Las imágenes sin texto alternativo pierden la oportunidad de decir a los buscadores qué contiene la página. Las imágenes con el tamaño adecuado y un texto alternativo descriptivo contribuyen tanto a la velocidad de la página como a la visibilidad en buscadores.