Cómo elegir las imágenes adecuadas para tu web

Empieza por definir la función de la imagen

Antes de elegir una foto, pregúntate: «¿Qué debería entender o sentir quien visite esta parte de la página?»

La imagen de inicio puede presentar tu negocio. Una imagen de servicio puede mostrar el trabajo o su resultado. Una foto del equipo ayuda a reconocer a las personas que atenderán al cliente. Elige una imagen que cumpla ese propósito.

Antes de buscar, escribe una frase con lo que necesitas: «La imagen debe mostrar un baño pequeño que hemos reformado y dejar espacio para el título a la izquierda». Un objetivo concreto ayuda a descartar fotos atractivas que no encajan en la página.

Compara las opciones con tres preguntas: ¿Qué cuenta esta imagen? ¿Es útil esa información aquí? ¿Se entiende también en el espacio disponible? Si no aporta información ni una atmósfera adecuada, quizá la sección funcione mejor solo con texto.

Elige una imagen principal que encaje con tu negocio

El gran bloque inicial, a menudo llamado «hero», es lo primero que ven muchos visitantes. Su imagen debe acompañar al título, sin competir con él.

Una empresa de reformas podría mostrar una habitación terminada o a un profesional trabajando. Una clínica de fisioterapia podría usar una foto natural de una consulta o un ejercicio. Una cafetería local podría enseñar su espacio o un plato reconocible.

Deja suficiente espacio visualmente tranquilo para el título y los botones. Si la imagen llama tanto la atención que cuesta entender la oferta, elige una más sencilla.

Valórala dentro del diseño real de la página. Una foto excelente por sí sola puede tener un fondo recargado justo donde irá el título. Mantén el título y el botón como elementos de texto de la página, sin incorporarlos a la imagen, para que puedan adaptarse al diseño.

Ejemplo: tres imágenes para la misma página de inicio

Imagina una empresa de reformas cuyo título es «Reformas de baños para viviendas pequeñas». Está eligiendo entre tres fotos:

• Una foto de stock cuidada de un gran baño de lujo. La iluminación resulta atractiva, pero el espacio no representa los baños pequeños que quiere mostrar la empresa. Puede crear expectativas equivocadas sobre el trabajo.
• Una foto de un baño reformado por la empresa, con un encuadre estrecho y desorden visible. El tema encaja, pero cuesta entender la distribución. Prueba otro encuadre u otra foto del mismo proyecto.
• Una foto clara de un baño pequeño terminado. Se distinguen bien el almacenamiento, la ducha y el espacio disponible. Si además deja sitio para el título, es la mejor opción para esta página.

Si la ducha desaparece de la tercera foto al recortarla para el móvil, prepara otro recorte o coloca el texto al lado. El tema, el mensaje y el diseño final deben guiar la decisión conjuntamente.

Muestra el servicio o su resultado

Las imágenes de servicios son más útiles cuando ayudan a imaginar el trabajo. Un fontanero podría mostrar una instalación terminada o a un técnico en casa de un cliente. Un fotógrafo podría enseñar un ejemplo real de su trabajo. Estas imágenes dicen más que una foto genérica de alguien con un portátil.

Elige la vista que responda a la pregunta que probablemente se haga el cliente. Una habitación terminada muestra el resultado; un primer plano permite ver una unión o un acabado; una persona trabajando explica una parte del proceso. Cada vista cumple una función: decide según lo que la sección promete explicar.

Añade un pie de foto breve que identifique el proyecto y el detalle relevante. «Almacenamiento integrado bajo un techo inclinado» explica más que «Otro cliente satisfecho». Describe solo lo que demuestra realmente el proyecto y concreta las afirmaciones sobre calidad o resultados.

Usa fotos naturales de tu equipo real

Una foto del equipo puede hacer que una pequeña empresa resulte más cercana si muestra a quienes el cliente conocerá de verdad. Un entorno habitual, expresiones naturales y poses relajadas suelen resultar más convincentes que una foto de grupo muy preparada.

Para los retratos individuales, mantén encuadres y fondos similares. Usa fotos actuales que representen el servicio que los clientes pueden esperar.

El nombre y el puesto junto al retrato permiten relacionar una cara con quien responderá a una consulta o atenderá una cita. Un retrato sencillo y bien iluminado puede bastar; no hace falta una sesión elaborada. Pide permiso a las personas fotografiadas antes de publicar y evita que aparezcan clientes o datos privados por descuido en el fondo.

Elige imágenes de blog acordes con el artículo

Una imagen de blog debe ayudar a reconocer el tema, no solo llenar espacio. En un artículo sobre colores de pintura, una habitación que muestre claramente un color puede funcionar mejor que una persona sosteniendo una brocha.

Un esquema sencillo, un ejemplo real o una foto de tu trabajo puede ser más pertinente que una imagen de stock. Adapta el tipo de imagen a la explicación: una comparativa puede necesitar dos ejemplos juntos; un tutorial, una captura del paso concreto. Una portada decorativa puede presentar el tema, pero no sustituye los ejemplos necesarios para entender las instrucciones.

Comprueba el recorte en ordenador y móvil

Una imagen ancha puede verse muy distinta en un teléfono. El navegador puede recortar los lados y hacer desaparecer una persona, un producto o un detalle importante cerca del borde.

Previsualiza la imagen al tamaño que tendrá en la página. Comprueba que el motivo principal siga visible en ambas pantallas. Si hay texto encima, deja una zona tranquila detrás para facilitar la lectura. Si no existe una zona adecuada, coloca el texto al lado.

1. Coloca la imagen en la sección real. Incluye el título definitivo, el botón y el texto que la rodea, en lugar de revisar solo la foto.
2. Revisa el diseño de la página en una vista ancha y otra estrecha. Busca caras cortadas, detalles de producto ausentes y texto sobre zonas recargadas.
3. Ajusta el recorte o la posición del motivo. Si el editor permite fijar un punto focal, sitúalo en el detalle importante y vuelve a previsualizar.
4. Comprueba la página en un teléfono. Asegúrate de que el significado de la imagen y las etiquetas esenciales sigan claros al tamaño mostrado.

Si un único recorte no funciona para los dos tamaños, la web puede necesitar recortes diferentes según la pantalla. La guía de imágenes adaptables de MDN explica este enfoque, llamado «art direction», a quien construya tu página.

Usa las imágenes de stock con criterio

Las fotos de stock pueden ayudar si no tienes una imagen propia adecuada. Antes de elegir una, pregúntate:

• ¿Se relaciona claramente con esta empresa o servicio?
• ¿Parece natural y creíble?
• ¿Podría aparecer la misma foto en la web de casi cualquier competidor?

Si resulta demasiado genérica, busca una opción más específica o usa una foto real de tu trabajo, productos, instalaciones o equipo. Las fotos propias pueden ayudar a saber qué esperar.

Una imagen de stock puede ilustrar un tema general o crear ambiente. Es menos adecuada cuando se pretende mostrar tu equipo, tus instalaciones o tus trabajos reales. No la presentes como prueba de un proyecto que hayas realizado. Aun así, una imagen de stock pertinente puede ser mejor que una foto propia demasiado oscura o confusa, o que distraiga en lugar de cumplir su función.

Mantén una línea visual coherente

Imágenes de fuentes distintas pueden encajar entre sí. Busca una cualidad común, como luz natural, una paleta parecida o un estilo fotográfico consistente.

No tienes que aplicar el mismo tratamiento a todas las fotos. Busca una página coherente en la que cada imagen encaje en su sección.

Empieza con dos o tres pautas: encuadres similares para retratos, un recorte uniforme para portadas del blog y luz natural para proyectos. Mira las imágenes juntas en la página. Sustituye la que desentone antes de aplicar un filtro intenso a toda la colección.

Lista de comprobación antes de publicar

• Puedes explicar qué aporta la imagen a la sección.
• Representa fielmente el negocio, tema o ejemplo que pretende mostrar.
• El motivo principal sigue visible en los diseños reales de ordenador y móvil.
• El texto y los botones son legibles, y la información esencial también aparece como texto de la página.
• La luz, el encuadre o el color encajan con las imágenes cercanas.
• Has comprobado el permiso de uso y los créditos que pueda exigir la fuente.

Prepara las imágenes elegidas para la web

Tras elegirlas, consulta nuestras guías para escoger las dimensiones adecuadas, redimensionar sin deformar y escribir textos alternativos y nombres de archivo útiles.

Piensa también en cómo recibirá la información alguien que no pueda ver la imagen. Las imágenes con significado necesitan una alternativa textual adecuada; las puramente decorativas suelen llevar el texto alternativo vacío. El tutorial de imágenes del W3C explica cómo influye su función en esa elección.