El objetivo básico de este post es ayudarte a disponer de tus propias fotos para tu web y que estas sean adecuadas para una correcta maquetación¹.

De cara a potenciarnos como emisores de contenido la autogeneración de material gráfico es crítica. Si no necesitamos calidad profesional ahorramos dinero y tiempo, aunque conviene recalcar que a veces valdrá mucho la pena invertir en fotografía profesional.

De momento el matiz profesional/amateur no entra en el campo de este post y trataré sobre la opción de hacer las fotos un@ mism@ con un teléfono móvil, ya que también descarto de momento tratar sobre las cada vez más raras cámaras digitales compactas. Si te manejas con las reflex y sus objetivos, bien por ti: sigue leyendo aplicándote lo que explico.

Si el smartphone tiene 3 ó 4 cámaras u otras características no importa mucho, hay tanta oferta que allá cada cual con su modelo escogido: demos por supuesto que ya has jugado mucho con las posibilidades de tu móvil y los distintos modos de cámara, efectos, etc.

Lo más importante es que conozcas bien tu smartphone y el comportamiento de sus cámaras y efectos, el resto es tener ojo para la composición de escena y contar con o facilitar unas condiciones de disparo mínimamente óptimas.

La mayoría de smartphones cuenta con varios modos de fotografía: nocturno, panorama (180º-360º), ráfaga, temporizado, etc.
Esto es bastante irrelevante para el objetivo básico del post, que es ayudarte a disponer de tus propias fotos para la web de tu negocio y que estas sean adecuadas para el diseño de tus páginas o entradas de tu blog. Tanto si contratas a un profesional del diseño web como si te la hace tú, facilitas un acabado de gran calidad.

Lo que nos importará más a la hora de imaginar y planificar las fotos no son los modos de disparo sino la relación de aspecto que escojas.

Para el caso de imágenes para web y dada la tecnología de cámaras digitales al alcance de cualquiera, la toma de fotografías in situ  ofrecerá en todos los casos imágenes totalmente relevantes para el tema que toques y que ilustrarán tu experiencia y autoridad en tu sector/nicho económico.

Dicho esto, unas sugerencias y consejos para tener en cuenta y transmitir a vuestros emplead@s o recordarlo tú mism@ para tu propio trabajo freelance:

1. Básico: debes predicar la inclusión de la web de la empresa en la vida laboral. La web es la empresa, la empresa es un equipo. Todos pueden aportar.
2. En el lugar de trabajo: deben promoverse desde Dirección las fotos y videos hechos con intención, no es necesario que sean profesionales o que interfieran en el trabajo, pero que se haga con un poco de cuidado. Montajes, instalaciones, productos acabados, pruebas de resistencia, edificios, decoraciones, etc. ¡Enseña al mundo lo bien que trabaja tu empresa!
3. Nociones básicas de fotografía (y un poco de gracia):
   • Planos estables, con el móvil apoyado sobre una base fija.
   • Si dispones de un gimbal (estabilizador giroscópico) puedes obtener muchos beneficios en función de tu actividad empresarial.
   • Buena luz: evita el contrasol, muévete para evitar sombras, escoge bien la hora del día; la misma escena puede cambiar muchísimo de la mañana a la tarde.
   • Buena oportunidad: evita gente en el plano (a menos que sea el objeto de la foto), animales, vehículos, papeleras, puertas abiertas al fondo, etc. No descartes emplear unos minutos en preparar la escena.
   • Configuración de calidad alta para las fotos.

¹Maquetación:

No es lo mismo diseñar que maquetar: el diseño es el aspecto que se quiere dar a la web y la maquetación tendrá que encajar las piezas para que la web siga el diseño establecido. Esto no es fácil y menos si se hace bien.

En general cuesta cuadrar las imágenes en la web. Esto es así porque por norma general se comete el error de crear las imágenes como un proceso separado de la creación de la web; en cualquier caso las imágenes se crean o se consiguen sin ningún tipo de conexión con lo que será la web. Debería haber un entendimiento previo entre la fuente de las fotografías (seas tú y tu equipo, algún profesional o compradas en librerías de stock) y la persona encargada de la maquetación web.

El diseño dicta, la fotografía rellena y complementa y la maquetación es la ingeniería que lo une todo en la pantalla de los distintos dispositivos.

Precisamente estos dispositivos son la clave: si quieres una web presentable tanto en pantalla grande como en móviles tendrás que dar a cada uno lo que necesita.
En esto la relación de aspecto juega un papel crucial.

Pequeños gestos fotográficos que facilitan el trabajo de maquetación:

1. Hacer la misma foto en vertical y horizontal. No te muevas, sencillamente gira el móvil, encuadra y dispara.
2. Observa la Regla de los Tercios, es fácil y los resultados se notan.
3. ¡Atención al móvil! Si la cámara está en relación 1:1, será cuadrada y V/H ya no tiene sentido.
4. ¡Atención al móvil! Controla la configuración de la aplicación de cámara: normalmente puedes escoger la calidad de captura, recomiendo conservar la mayor calidad posible² porque te dará margen de maniobra.
5. Desktop: Ideal relaciones 4:3 y 16:9 y sus respectivas verticales 3:4 y 9:16 para mobile y tablet (verticales).
6. La 4:3 horizontal toma anchura y cierta altura. Su hermana vertical de 3:4 rota el encuadre de la imagen horizontal 90º en sentido horario, por lo que pierdes ancho y ganas alto.
7. La 16:9 en horizontal coge mucha anchura y poca altura. En 9:16 vertical coge mucha altura y poca anchura.
8. La 1:1 sirve para todos, pero entonces el tema a vigilar es el tamaño en disco² y las dimensiones en píxeles.
9. Hacer 2 ó 3 fotos de cada escena “por seguridad”, por si alguna sale movida, se ven dedos, peatones, brillos, etc.

²¿Cómo afecta a una imagen tener más o menos calidad?

Las imágenes digitales tienen 2 dimensiones y 2 atributos que marca sus características y posibilidades.

Las dimensiones son ancho y alto, expresado en píxels. Además tendrán mayor calidad cuanta más información real almacenen en el fichero que se genera.

¿Información real? Sí. Las cámaras digitales en general son capaces de inventarse píxels para dar coherencia a la imagen captada en un proceso llamado interpolación.

Cuanta más calidad le permitas almacenar a la cámara para cada imagen captada, menos interpolación y mayor fidelidad con lo que ven tus ojos: a su vez toda esa información hace que una imagen tomada con una cámara de un móvil de gama media pueda llegar a ocupar o "pesar" entre 4 y 10 megabytes.

Si pretendes imprimir la imagen para decorar tu comedor, una imagen de 10MB le va de maravilla a la imprenta (más = mejor), pero si lo que quieres es usarla en tu web vas a tener muy poco éxito porque cada página que use esa imagen tardará mucho más en cargar. Esto es especialmente importante en tráfico web desde móviles por una decisión crucial por parte del servicio de búsqueda de Google: algo llamado mobile first indexing.

Siempre estás a tiempo de "adelgazar" una imagen, en cambio la posibilidad de mejorar una imagen pobre de origen es muy limitada. Si la cámara se te come el almacenamiento interno, desvía el almacén de datos de la cámara hacia la tarjeta microSD que seguramente tu móvil puede alojar.

Los atributos serían la profundidad de color y la transparencia. Ambas dependen del formato del "contenedor".
Las ya conocidas extensiones JPG o PNG no son más que contenedores de información de mapa de bits de imagen (formato Bitmap o BMP), cada contenedor tiene sus atributos y permite hacer unas cosas u otras según escojas. Ambos contenedores (formatos de imagen) ofrecen cierto nivel de compresión, información EXIF o IPTC/XMP incrustada y difieren en la profundidad de color y la transparencia.

Contenedor JPG: úsalo para fotografía realista, aire libre, paisajes, instalaciones, personas, comida, etc. Admite casi 17M de colores y permite captar todos los colores expresables y no permite transparencia. Es un formato basado en una pérdida progresiva de calidad de la imagen, por lo que si vas forzando el software de edición de imagen hacia tamaños en disco más y más reducidos, acabas teniendo una imagen muy deteriorada y llena de "artefactos", que es como se llaman las manchas que causa un "adelgazamiento excesivo" de una imagen JPG. Estas manchas crean unos patrones muy molestos y evidentes al ojo que se llaman "efecto muaré". Evita el muaré, optimiza  tus JPG hasta un cierto equilibrio entre peso en KBs y calidad a la vista. Se optimizan de 3 formas: reduciendo sus dimensiones, reduciendo su calidad (1 compresión total - 100 ninguna compresión, mejor calidad) y modulando la fidelidad de interpolación.

Contenedor PNG: úsalo para documentos escaneados en tonos de gris o pocos colores, capturas de pantalla para manuales online, logos o grafismos con poca dispersión de color y márgenes muy definidos. Evita este formato si hay degradados de color. Si quieres dejar zonas transparentes es tu formato. La forma de optimizar tus PNG consiste en: reducir sus dimensiones, reducir su espacio de color (simplificando tienes 2 vías, pasar de color a escala de grises o conservando el color pero bajando la profundidad de color desde los 256 colores > 128 > 16 > 8).

El modo 8 bits resultará pobre en la mayoría de ocasiones, pero a veces incluso permite jugar la baza creativa y efectista de un look premeditadamente grunge o electronic-vintage. Recuerdas los gráficos de los Atari, Commodore o Amstrad 64K? Prueba a jugar con fotos y apps 8bit para tu móvil.

Existe un formato relativamente nuevo, apadrinado por Google: WEBP (pronunciado "güepi") que reune características de ambos tipos, cuando te familiarices con las técnicas y herramientas es una buena forma de acelerar la carga de tus páginas.