Fotografía para la web de un producto software: 7 pasos

Al final de este proceso tienes una shot list de ocho a doce imágenes, una decisión de origen para cada una y un tratamiento que las hace leer como una sola serie. La restricción es concreta: el producto es software, así que no hay nada que poner sobre una mesa e iluminar.

Por esa restricción tantas webs de producto acaban con las mismas cuatro fotos. Alguien sonriendo delante del portátil. Una reunión alrededor de una pizarra. Dos manos sobre el teclado, vistas desde arriba. Un degradado borroso que sustituye a la idea de tecnología. La investigación VisualGPS de Getty Images pone cifras al coste de esa elección: el 98% de los consumidores dice que las imágenes y los vídeos auténticos importan para ganarse la confianza, y casi el 90% quiere saber cuándo una imagen la ha generado una IA. Una foto que el visitante ya ha visto en tres webs de la competencia suspende ese examen antes de que nadie lea el titular.

Qué necesitas antes de empezar

• El posicionamiento en una frase. Para quién es el producto y qué cambia para esa persona. Sin eso, la shot list se desliza hacia lo que queda bonito en la carpeta.
• Un inventario de páginas. Cada hueco que muestra una imagen, con su proporción y su anchura real de render. Un hero de 1600px y una card de 320px piden sujetos distintos, no el mismo sujeto recortado dos veces.
• La interfaz en un estado que se pueda enseñar. Etiquetas reales, datos verosímiles, nada de lorem ipsum ni avatares de relleno.
• Una partida de presupuesto y una fecha. Media jornada de sesión encargada, una serie con licencia y una serie generada tienen precios y plazos distintos.

Paso 1: darle a cada imagen un solo trabajo

En una web de producto software hay tres trabajos, y cada imagen hace uno.

1. Enseñar el producto. La interfaz, recortada sobre la parte que sostiene el argumento de la sección de al lado.
2. Enseñar el trabajo alrededor del producto. El pasillo del almacén, la recepción de la clínica, la mesa a las siete de la mañana. El software vive dentro del día de alguien, y ese día se fotografía aunque el software no.
3. Llevar el tono. Materia, textura, luz. Sin personas, sin pantallas, sin relato. Es la imagen que hace que ocho páginas parezcan una sola marca.

Escribe el trabajo al lado de cada hueco del inventario antes de mirar una sola fotografía. Las elecciones flojas casi siempre nacen al revés: primero la imagen, después la justificación.

Paso 2: descartar las cuatro fotos que no dicen nada

Circulan por las webs de software de cualquier mercado, y cada una se cambia por la versión de un competidor sin alterar el sentido de la página.

• La mesa con portátil y café. Describe una oficina, no un producto.
• La reunión con pósits. Describe un taller, normalmente uno que nadie del encuadre está dirigiendo.
• El apretón de manos. Describe un trato que ya se cerró.
• La visualización de datos abstracta. Nodos azules sobre fondo oscuro en lugar de lo que el software hace.

La prueba dura diez segundos: tapa el logo y el titular. Si la imagen encajaría igual en la página de un competidor, es decoración pagada a precio de fotografía.

Paso 3: construir la shot list con el vocabulario del producto

Coge los sustantivos que usan los clientes en los tickets y en las llamadas comerciales, y fotografía eso. Una herramienta de citas para clínicas dentales tiene vocabulario propio: el mostrador al abrir, la hoja de papel del día que el software sustituye, el teléfono que suena en mitad de una intervención, la puerta a las ocho. Cuatro tomas, ninguna disponible en bancos de imágenes, todas legibles para quien lleva una clínica y para nadie más.

De ocho a doce imágenes cubren una web de cinco a ocho páginas. Por debajo de ocho el sitio se repite. Por encima de doce la serie pierde coherencia y alguien rellena los huecos con lo que encuentra en la unidad compartida.

Paso 4: elegir el origen toma a toma

Hay tres orígenes y se eligen por imagen, no por web.

Encarga las tomas que llevan el vocabulario del paso 3. Ningún archivo guarda fotos del lugar de trabajo de tus clientes. Media jornada con un fotógrafo da los tres o cuatro fotogramas que hacen la web imposible de copiar.

Licencia las tomas de tono, donde el sitio concreto y la persona concreta no son el asunto. Lee el texto alternativo antes que la miniatura y mira el resto del trabajo del fotógrafo: una serie de un solo autor se iguala mucho mejor que cinco imágenes de cinco autores.

Genera con el plan de declaración ya preparado. El Nielsen Norman Group lo midió en 2026 con 77 adultos estadounidenses, que valoraron seis versiones de la home de una consultora ficticia: tres con imágenes hero generadas por IA y tres con stock con licencia. Quien no sabía el origen puntuó las imágenes de IA tan fiables y profesionales como las de stock, con un margen mínimo a su favor en las tres medidas, aunque con diferencias tan pequeñas que NN/g evitó declararlas mejores. Lo que queda es más estrecho que el titular: las imágenes de IA no salen penalizadas cuando quien mira no lo sabe.

Quien mira lo sabe cada vez más. Desde el 2 de agosto de 2026, el artículo 50 del Reglamento europeo de IA obliga a los proveedores de sistemas generativos a marcar la salida sintética en formato legible por máquina, para que se detecte su origen artificial, y obliga a los responsables del despliegue a declarar las imágenes generadas o manipuladas que constituyen un deep fake. Las sanciones por incumplir las obligaciones de transparencia llegan a 15 millones de euros o al 3% de la facturación mundial anual, y los estándares técnicos de marcado se siguen cerrando en el código de buenas prácticas. Si publicas imágenes generadas en una web que atiende a usuarios europeos, el marcado y la declaración forman parte de la producción de la imagen, no de la revisión legal posterior. Sobre un caso concreto, la palabra la tiene un abogado.

Paso 5: igualar la serie para que se lea como serie

Cinco variables deciden si ocho imágenes parecen elegidas o recogidas: temperatura de color, contraste, distancia al sujeto, profundidad de campo y proporción del recorte. Fija cada una en toda la serie y mantenla. Un fotograma cálido entre siete fríos parece un fallo incluso para quien no sabría decir qué falla. La distancia al sujeto es la que los equipos olvidan: un plano general al lado de un macro cerrado rompe la serie aunque el color cuadre. Es la misma disciplina que evita que un producto parezca una plantilla.

Paso 6: publicarlas sin cargarte el LCP

La imagen hero suele ser el elemento LCP. El Web Almanac 2025 de HTTP Archive encontró que una imagen es el elemento LCP en el 76% de las páginas móviles y en el 85,3% de las de escritorio, y que los formatos en producción son antiguos: el JPG supone el 57% de las imágenes LCP, el PNG el 26%, el WebP el 11% y el AVIF el 0,7%. El atributo que arregla el orden de carga, fetchpriority="high", aparece en el 17% de las páginas móviles con imagen LCP.

• Sirve AVIF con respaldo en WebP. El soporte de navegadores pasa del 94% en los dos.
• Pon fetchpriority="high" en una sola imagen por página, la hero, y no la cargues nunca en diferido.
• Dale a cada imagen anchura y altura explícitas, o una proporción, para que el layout aguante mientras carga.
• Exporta al doble de la anchura de render, no a lo que salga de la cámara. Un hero de 3,2MB es un problema de fotografía que acaba siendo de ingeniería.

La parte de medición está en Core Web Vitals en Next.js.

Paso 7: escribir el texto alternativo sobre el sujeto, no sobre la keyword

El texto alternativo describe qué hay en el encuadre para quien no lo ve. "Recepcionista de una clínica dental revisando las citas del día en una pantalla de pared" es texto alternativo. "Mejor software de citas para clínicas" es una keyword metida en un atributo de accesibilidad, y empeora la experiencia justo de quienes ese atributo debería servir. Las imágenes de tono, que no aportan información, llevan el atributo alt vacío: así los lectores de pantalla las saltan en lugar de anunciar una textura.

Cómo comprobar que la serie funciona

• Tapa todos los logos y titulares de la web. ¿Se sigue notando a qué sector habla?
• Pon las imágenes en una cuadrícula a tamaño miniatura. ¿Alguna parece venir de otra web?
• Haz una búsqueda inversa de las imágenes con licencia. ¿Quién más de tu mercado las está usando?
• Carga la home con una conexión 4G limitada. Cuenta los segundos hasta que aparece el hero.
• Desactiva las imágenes del todo. ¿La página sigue sosteniendo su argumento? Si es que sí, las imágenes trabajan como apoyo y no como sustituto del texto.

Fallos habituales y cómo se corrigen

La serie se eligió en una carpeta y no en la página. Las miniaturas favorecen imágenes que se deshacen a 1600px con texto encima. Mete cada candidata en el layout real, con el recorte real, antes de decidir.

El hero es toda la interfaz al 30%. Una captura entera reducida a tamaño hero enseña un rectángulo gris. Recorta sobre un componente, un gráfico, una fila de tabla, a un tamaño donde las etiquetas se lean.

La fotografía es buena y la interfaz de al lado no. En una página de producto la tipografía pesa más que la fotografía, y una imagen buena junto a una escala tipográfica rota hace la escala más visible. Arregla antes la escala tipográfica.

La carpeta no es de nadie. Seis meses después la serie ha crecido con cuatro imágenes que nadie ha igualado, y la web vuelve a parecer una recopilación. Guarda las imágenes en el repositorio del design system con la licencia, el fotógrafo y el origen anotados archivo por archivo, y trata cada añadido como un cambio que pasa revisión.