Fotos para la web de tu negocio: guia practica

Fotos propias o banco de imagenes: cuando usar cada uno

Usa fotos propias siempre que la imagen muestre tu producto, tu local, tu equipo o un trabajo terminado por ti. Nadie contrata una reforma de baño mirando a un modelo de banco de imagenes sonriendo con un taladro.

El banco de imagenes tiene sentido para lo que no puedes fotografiar: conceptos abstractos, fondos de cabecera, ilustraciones de apoyo en articulos del blog.

El problema de las fotos de banco no es legal, es de credibilidad. Un visitante que ya ha visto esa misma imagen en otras cinco webs deja de creerse el texto que la rodea.

• Foto propia, sin excepcion: fichas de producto, portfolio, antes y despues, fachada y interior del local, retratos del equipo.
• Banco de imagenes aceptable: cabeceras decorativas, iconos, imagenes de relleno en el blog.
• Nunca: hacer pasar una foto de banco por un trabajo tuyo. Es engañoso y en un negocio local se descubre rapido.

Que fotos necesita realmente la web de una pyme

Antes de pensar en formatos, decide que fotos hacen falta. Una web de pyme funciona bien con un paquete pequeño y bien hecho, no con cien imagenes mediocres.

• Una foto de cabecera por pagina principal: tu local, tu equipo trabajando o tu producto estrella.
• De 3 a 5 fotos por servicio que muestren el trabajo real, mejor en secuencia (antes, proceso, resultado).
• Una foto por producto como minimo, y 3 o 4 en los productos con mas margen: frontal, detalle, en uso y escala.
• Un retrato del responsable para la pagina de quienes somos y para el perfil de empresa.
• Una foto del exterior del local con el rotulo visible, util para que te reconozcan al llegar.

Ese paquete cubre una web de negocio completa. Si te sobra presupuesto, ampliar el portfolio rinde mas que cambiar la cabecera.

Como hacer fotos decentes con un movil

Un movil de gama media de los ultimos años da fotos suficientes para una web si controlas la luz. La camara importa mucho menos que la ventana.

1. Limpia la lente con un paño. Es la mejora mas barata y la que mas gente se salta.
2. Fotografia de dia y cerca de una ventana, con la luz entrando de lado. Apaga el flash: aplana el objeto y crea sombras duras.
3. Fondo neutro y ordenado. Una pared lisa o un carton blanco elimina el 90% del ruido visual.
4. Apoya el movil en una superficie o usa un tripode de mesa. Casi toda foto borrosa es pulso, no camara.
5. Dispara horizontal para cabeceras y cuadrado o vertical para fichas de producto, y deja aire alrededor para poder recortar despues.
6. Manten un criterio comun en todo el catalogo: mismo fondo, misma distancia, misma orientacion. La coherencia se nota mas que la calidad individual.

Formatos de imagen: WebP, JPEG, PNG, AVIF y SVG

Para fotografias, el formato por defecto hoy es WebP, con JPEG como respaldo. Google, que desarrollo el formato, cifra el ahorro de WebP frente a un JPEG equivalente entre un 25% y un 34%.

AVIF comprime todavia mas que WebP y esta soportado por los navegadores actuales, pero no todas las herramientas y plugins antiguos lo generan. Si tu gestor lo ofrece sin complicaciones, usalo; si no, WebP es una eleccion segura.

PNG solo tiene sentido cuando necesitas transparencia o el archivo contiene texto nitido, como una captura de pantalla. Para una fotografia, un PNG pesa varias veces mas que el WebP equivalente sin verse mejor.

SVG es el formato correcto para logos, iconos y graficos planos. Al ser vectorial se ve nitido en cualquier tamaño y pesa unos pocos kilobytes, aunque no sirve para fotografias.

Resumen practico: foto a WebP, logo e iconos a SVG, captura de pantalla a PNG o WebP.

Cuanto debe pesar una foto y a que tamaño subirla

Una foto grande de una web deberia pesar menos de 200 KB, y las imagenes dentro del texto, por debajo de 100 KB. El archivo que sale de un movil ronda los 3 o 6 MB: subirlo tal cual es el error mas frecuente en webs de pymes.

Redimensiona antes de subir. Anchos que funcionan bien: 1.920 px para una cabecera a todo ancho, 1.200 px para imagenes dentro del contenido y 800-1.000 px para fichas de producto.

Despues, comprime. Un JPEG o WebP guardado con calidad 75-80 es indistinguible del original en pantalla y puede pesar la decima parte.

WordPress genera automaticamente varios tamaños de cada imagen y el atributo srcset para que el movil descargue la version pequeña, y desde la version 5.5 añade carga diferida con loading="lazy". Lo que no hace es arreglar un original de 6 MB: eso sigue siendo cosa tuya o de un plugin de optimizacion.

El peso de las imagenes es la causa numero uno de webs lentas, y la velocidad influye en el posicionamiento. Si quieres entender como encaja esto en el conjunto, mira que es el SEO y revisa tambien tu alojamiento, porque un hosting saturado anula cualquier optimizacion de imagenes.

Alt text: que es y como escribirlo bien

El alt text, o texto alternativo, es una descripcion escrita de la imagen que no se ve en pantalla. La usan los lectores de pantalla de personas ciegas, los buscadores y el navegador cuando la imagen no carga.

Describe lo que se ve y para que esta ahi, en una frase de menos de 125 caracteres. Nada de listas de palabras clave.

• Mal: "IMG_20240714.jpg" o "fontanero madrid fontanero barato fontanero urgente".
• Bien: "Fontanero sustituyendo el sifon de un lavabo en una vivienda de Madrid".
• Imagen decorativa: deja el alt vacio (alt="") para que el lector de pantalla la ignore en lugar de leer un nombre de archivo.
• Imagen que es un enlace o un boton: el alt describe el destino, no el dibujo. Por ejemplo, "Descargar catalogo en PDF".

El alt no es lo mismo que el pie de foto ni que el atributo title. El pie de foto lo lee todo el mundo; el alt sustituye a la imagen cuando esta no esta disponible.

Nombres de archivo, licencias y errores a evitar

Nombra los archivos antes de subirlos, en minusculas y con guiones: reforma-baño-madrid-antes.jpg dice mucho mas que DSC00412.jpg. Evita espacios, tildes y caracteres raros en el nombre, porque complican las URL.

Guarda el justificante de cada imagen de pago o gratuita que uses. Las licencias gratuitas mas habituales permiten uso comercial, pero suelen prohibir registrar la imagen como marca o revenderla tal cual, y no todas cubren personas identificables.

No cojas fotos de Google Imagenes ni de la web de un competidor. Que sea facil no la hace libre, y una reclamacion por derechos de autor cuesta mucho mas que una licencia.

Si en las fotos aparecen clientes o empleados reconocibles, pide su consentimiento por escrito antes de publicarlas.

Tres errores mas que se repiten:

• Meter texto dentro de la imagen (precios, promociones): no se puede leer por un buscador ni por un lector de pantalla, y se ve borroso en movil.
• Usar el logo en PNG de 2 MB en la cabecera de todas las paginas. Pasalo a SVG.
• Aplicar carga diferida a la imagen de cabecera: es la primera que se ve y retrasarla empeora la sensacion de velocidad.

Si prefieres que alguien revise y optimice las imagenes de tu web, escribenos y lo vemos.

Preguntas frecuentes