Cómo agregar fotos de antes y después a tu página web

Si reparas techos, restauras sótanos dañados por agua, detallas carros, o manejas un estudio de bienestar, tu trabajo terminado es tu mejor vendedor. Un visitante que puede ver una canaleta caída volverse una línea limpia y recta, o un techo manchado ponerse blanco brillante otra vez, no necesita un párrafo de texto para creerte. Por eso aprender cómo agregar fotos de antes y después a tu página web es una de las horas de mayor retorno que puedes pasar en tu presencia en línea.

La mayoría de las guías sobre este tema brincan directo a un plugin de WordPress y se detienen ahí. Esta empieza antes, con la parte que de verdad decide si las fotos funcionan: tomar pares que coinciden, organizarlos, elegir cómo mostrarlos, y hacerlos rápidos y encontrables. Uses un plugin, un creador, o una herramienta hecho-por-ti, los fundamentos de abajo son los mismos.

Por qué las fotos de antes y después convierten tan bien

La gente confía en lo que puede verificar. Una afirmación escrita como "entregamos trabajo de calidad" le pide al lector que te crea de palabra. Una imagen lado a lado le deja juzgar por sí mismo en cerca de un segundo. Ese cambio, de pedir confianza a dejar que alguien verifique, es toda la razón por la que estas fotos cargan su peso.

También hacen un trabajo más silencioso. Un par fuerte fija expectativas. Alguien que ve el estándar de tu trabajo terminado antes de llamar es un prospecto más tibio y mejor calificado. Ya no está comprando solo por precio. Está imaginando ese resultado en su propia casa.

Paso 1: toma fotos que de verdad puedan compararse

El error más grande es tratar el "antes" como una idea de último momento. Te acuerdas de fotografiar el trabajo terminado, pero el único "antes" que tienes es una toma borrosa de teléfono tomada con mala luz desde un ángulo distinto. El par no se alinea, y la comparación se cae.

La consistencia es lo que hace creíble un antes y después. Apunta a estas cada vez:

Mismo ángulo y distancia. Párate en el mismo lugar para ambas tomas. Ubica una referencia, como una esquina de la cochera o una loseta del piso, para poder volver a ella. Un trípode de teléfono con un pequeño marcador en el piso hace esto repetible.
Mismo encuadre. Mantén la misma cantidad de la escena a la vista. Si el "antes" muestra todo el techo y el "después" muestra una esquina, el ojo no puede conectarlos.
Misma iluminación. Toma a una hora similar del día, o usa la misma luz de trabajo. Sombras duras del mediodía en una foto y luz suave de tarde en la otra hacen que un resultado honesto se vea montado.
Misma orientación. Ambas fotos horizontales, o ambas verticales. Mezclarlas obliga a recortar una imagen y descuadra la alineación.
Firme y en foco. Limpia el lente, toca para enfocar, y sujeta quieto. Un antes nítido contra un después nítido se lee como trabajo cuidadoso.

Un hábito práctico: toma el "antes" en el momento en que llegas al sitio, antes de tocar nada. Hazlo parte de tu rutina de preparación, igual que poner las lonas protectoras. Nunca más perderás un gran caso de éxito porque olvidaste el punto de partida.

El par de fotos no es decoración. Es evidencia. Toma el "antes" como si importara, porque en tu página web importa.

Paso 2: no edites de más

Un poco de brillo y enderezado está bien. Los filtros pesados, aumentos de saturación, o cualquier cosa que cambie el resultado real cruza una línea. Los compradores han visto suficientes transformaciones falsas para sospechar, y una foto que se ve demasiado buena para ser verdad los hace dudar de todas las demás.

Mantén ambas imágenes editadas de la misma forma. Si aclaras el después, aclara el antes en la misma cantidad. La meta es una comparación precisa, no un concurso de belleza. Honesto y claro le gana a dramático y dudoso cada vez.

Paso 3: consigue permiso antes de que algo se haga público

Este paso se salta y no debería. Si el trabajo está en la propiedad de alguien, o la foto muestra el interior de una casa, un cuerpo, una cara, o cualquier cosa identificable, pregunta antes de publicar. Para servicios a domicilio, una línea rápida en tu orden de trabajo o un mensaje de seguimiento basta: podemos usar fotos del trabajo terminado en nuestra página web y redes sociales. Para bienestar, salud, o cualquier cosa personal, consíguelo por escrito, y trata un sí verbal como no suficiente.

El planteamiento ayuda. La mayoría de los clientes está feliz de ser presumida cuando lo presentas como orgullo por el resultado en vez de un favor que estás pidiendo. Guarda un registro simple de quién dijo que sí para que nunca tengas que adivinar después.

Paso 4: elige cómo aparecerán las fotos

Hay tres formas comunes de mostrar un par, y la correcta depende del trabajo y el dispositivo.

Deslizador interactivo. Una sola imagen con un asa en el medio que el visitante arrastra a izquierda y derecha para revelar entre antes y después. Es atractivo y funciona hermosamente cuando las dos fotos se alinean casi perfectamente, como la misma pared o la misma línea de techo. Exige pares bien emparejados, o el barrido se ve mal.
Par lado a lado. Dos imágenes una junto a la otra con etiquetas claras. Más simple, más rápido de cargar, y tolerante cuando los ángulos no coinciden perfectamente. En un teléfono las dos imágenes normalmente se apilan, así que asegúrate de que cada una aún se lea en una pantalla pequeña.
Cuadrícula o galería. Un conjunto de pares en una página dedicada de resultados o galería. Aquí es donde construyes un cuerpo de prueba con el tiempo. Agrupa por tipo de trabajo para que un prospecto de techado vea techado y un prospecto de aire acondicionado vea aire acondicionado.

Si apenas estás empezando, los pares lado a lado son la elección segura. Son fáciles de acertar, cargan rápido, y nunca dejan a un visitante confundido sobre cuál imagen es cuál. Agrega un deslizador después para tus mejores pares bien emparejados.

Paso 5: etiqueta cada par

Una comparación sin etiqueta hace que el visitante trabaje, y los visitantes confundidos se van. Marca cuál imagen es antes y cuál es después, y agrega una línea de contexto.

Las etiquetas específicas le ganan a las genéricas. "Antes" y "después" es el piso. "Daño por tormenta, reparado en un día" o "Extracción de agua y restauración completa, tres días" cuenta una historia y responde la pregunta que se forma en la cabeza del lector: cuánto tiempo, cuánta interrupción, qué cambió exactamente. Una leyenda corta suele ser la diferencia entre una foto bonita y una foto que agenda una llamada.

Paso 6: optimiza las imágenes para que la página siga rápida

Los archivos de imagen grandes son el asesino silencioso de estas páginas. Una galería llena de fotos directo de un teléfono puede ser de decenas de megabytes, y en una conexión de teléfono esa página puede tardar varios segundos en aparecer. Muchos visitantes se van antes de siquiera ver tu trabajo. La velocidad importa para el posicionamiento de búsqueda también.

Haz esto antes de subir:

Redimensiona. Rara vez necesitas una imagen más ancha que cerca de 2000 píxeles para la web. Reduce las dimensiones primero.
Comprime. Pasa las fotos por un compresor gratuito, o exporta como un formato moderno como WebP. Normalmente puedes recortar el peso del archivo a la mitad o más sin caída visible de calidad.
Apunta bajo. Una sola foto web por debajo de más o menos 300 kilobytes es una buena meta. Más ligero es mejor, siempre que aún se vea nítida.
Carga diferida. La mayoría de las páginas y creadores modernos cargan las imágenes solo conforme el visitante baja hacia ellas. Si el tuyo lo ofrece, actívalo para que la parte de arriba de la página aparezca en menos de 3 segundos.

Paso 7: escribe texto alt para cada imagen

El texto alt es la descripción corta escrita adjunta a una imagen. Importa por dos razones. Es lo que un lector de pantalla anuncia a un visitante que no puede ver la foto, así que es un requisito básico de accesibilidad. Y es una de las formas en que los buscadores entienden tus imágenes, lo que puede traerte tráfico de la búsqueda de imágenes.

Escríbelo con sencillez y describe lo que se muestra. Algo como "antes y después de un techo asfáltico cubierto de musgo limpiado hasta la teja desnuda" hace el trabajo. Salta el meter palabras clave a la fuerza. Una oración honesta por imagen basta. Haz esto tanto para el antes como para el después.

Paso 8: pon los pares donde se toman las decisiones

Una página de galería es buena, pero los lugares de mayor valor son las páginas donde alguien está cerca de llamar. Suelta un par relevante en tu página de inicio cerca de tu llamado a la acción principal, y en cada página individual de servicio. Un visitante que lee tu página de reemplazo de techo debería ver un resultado de reemplazo de techo justo ahí, no tener que cazar una galería aparte.

Refresca el conjunto conforme terminas trabajos nuevos. Una sección de resultados que visiblemente crece les dice a los visitantes que estás ocupado y eres consistente, lo cual es su propia prueba silenciosa.

Errores comunes que hay que evitar

Tener solo un "después" y ningún "antes" que coincida.
Ángulo, zoom o iluminación distintos entre las dos tomas.
Publicar la casa o cara de un cliente sin preguntar.
Archivos enormes que hacen que la página se arrastre en un teléfono.
Sin etiquetas, para que el visitante no pueda decir cuál es cuál.
Un par dramático y nada más, lo que se lee como una casualidad en vez de un estándar.

Si prefieres solo describirlo y que se haga

Todo lo de arriba asume que tú eres quien coloca las imágenes, afina el deslizador, redimensiona los archivos, y escribe el texto alt. Eso es muy hacible, y para muchos dueños un plugin o creador lo maneja bien. Pero también es una noche que quizá no tengas.

Esta es la parte que Saynovo está construido para eliminar. En vez de pelear con un plugin, le dices a tu sitio lo que quieres en lenguaje simple, algo tan simple como agrega una sección de antes y después a mi página de techado con estas dos fotos, y el cambio ocurre. Tu sitio se genera de la información de negocio que ya tienes, y las ediciones se hacen hablándole en vez de aprender un editor. Si manejar las imágenes, etiquetas y estructura tú mismo suena como una tarea de más, tener el sitio que lo haga a pedido vale una mirada en saynovo.com.

Cómo agregar fotos de antes y después a tu página web: la versión corta

La mecánica de cómo agregar fotos de antes y después a tu página web es fácil una vez que la base está sólida. Toma pares que coinciden con el mismo ángulo y luz, mantén la edición honesta, consigue permiso, etiqueta cada par con contexto real, comprime los archivos, escribe texto alt, y coloca los resultados en las páginas donde la gente decide llamar. Acierta con esos y el método de despliegue, ya sea un deslizador, un lado a lado, o una galería, es la parte simple. Tu trabajo terminado hará la venta, que es exactamente lo que debería estar haciendo.