Photography & Visual Direction

Las fotografias decorativas de stock se tratan como ruido visual y se ignoran; las fotos reales de personas, equipos y productos en contexto si se analizan activamente y generan confianza. El principio del eyetracking es directo: "jazzed-up = ignored". La foto del equipo real con nombres y roles comunica más que un banco de imagenes de "ejecutivos sonriendo en sala de juntas". La selección fotografica es una decisión funcional, no solo estética.

Los formatos modernos AVIF y WebP entregan el mismo contenido visual con archivos mucho más pequeños que JPEG/PNG, reduciendo directamente el tiempo de carga del recurso LCP sin sacrificar calidad percibida. Envolver el <img> en <picture> con <source> por tipo deja que el navegador elija el primer formato que soporte y caiga al JPEG de fallback en navegadores antiguos.

Toda imagen que transmite información debe tener un atributo alt que cumpla el proposito equivalente al contenido visual, para que lectores de pantalla, buscadores y usuarios sin imagen accedan a esa información. Las imagenes puramente decorativas, que no anaden datos, deben llevar alt="" para que la tecnologia asistiva las ignore por completo. Un alt vacio en una infografia con datos es un fallo; un alt="imagen" no aporta nada.

El texto sobre una fotografía debe alcanzar el ratio de contraste mínimo para ser legible. Como el contraste de la imagen subyacente varia según cada foto (un cielo claro, una pared blanca), la solución robusta es un scrim: un overlay semitransparente oscuro o un gradiente detras del texto, que fija el contraste sin importar la imagen. El texto blanco directo sobre zonas claras puede caer a 1.8:1 y volverse ilegible.

Todas las imagenes de un mismo producto o sección deben compartir tratamiento visual: temperatura de color, saturación, estilo de encuadre, relación de aspecto y nivel de contraste. La inconsistencia rompe la percepción de marca y genera fricción cognitiva aunque cada imagen sea buena por separado. Un grid de producto con mismo fondo, mismo angulo y misma luz se lee como un sistema; mezclar fondos blanco/gris/lifestyle y ratios 1:1 con 4:3 se lee como un collage.

Cuando el navegador no conoce las dimensiones de una imagen antes de descargarla, renderiza sin reservar su espacio y luego empuja el contenido al cargarla, causando Cumulative Layout Shift. Declarar width y height en el HTML, o usar la propiedad CSS aspect-ratio, reserva el hueco correcto desde el primer render y elimina el salto. El texto deja de brincar cuando llega la imagen.

En pantallas pequeñas una imagen panoramica pierde su sujeto principal al escalarse: el rostro o producto queda diminuto en el centro. La dirección de arte responsiva sirve un recorte distinto en cada breakpoint, un retrato centrado en el sujeto en móvil y la composición completa en desktop, usando <picture> con atributos media en cada <source>. El navegador evalua los source en orden y usa la primera condición que coincide, sin JavaScript y antes del parseo de CSS.

El texto horneado dentro de una imagen no se puede redimensionar, traducir, copiar ni adaptar por herramientas de accesibilidad. Los usuarios con baja visión que aumentan la fuente o cambian colores no pueden modificarlo, y se ve borroso en pantallas retina. Todo texto que comunica información debe existir como HTML real estilizado con CSS sobre la imagen. Las únicas excepciones son texto personalizable por el usuario y casos esenciales como logotipos.