Blog

Cómo crear una imagen comparativa de antes y después

Publicado 25 de octubre de 2026 · antes y después, comparación, unir, flujo de trabajo

Una sola imagen convence más que dos adjuntos: captura ambos estados al mismo tamaño, únelos en paralelo, etiquétalos y envía una comparación fácil de leer.

Las capturas de antes y después son la forma más rápida de mostrar un cambio, pero dos adjuntos sueltos obligan a quien los lee a saltar de uno a otro y recordar lo que vio. Una sola imagen en paralelo elimina ese trabajo.

Captura ambos estados de la misma manera

La comparación solo es justa si las dos imágenes son comparables:

• Mismo área visible y mismo zoom. Un antes al 100 % y un después al 80 % hace que los espacios y los tamaños de letra mientan.
• Mismo recorte. Captura la misma región, no un recorte más ajustado de la parte que cambió.
• Mismo tamaño de ventana y mismo tema. Un después en modo oscuro junto a un antes en modo claro compara dos cambios a la vez.
• Mismo estado. Si la página tiene efectos de hover o de foco, mantén el puntero fuera de las dos capturas.

Para diseños responsive, haz un par por cada punto de ruptura en lugar de mezclar anchos.

Recorta a la misma proporción

Abre la primera captura en el editor de imágenes de InSnap y recórtala a la región que quieres comparar. Aplica el mismo recorte a la segunda imagen, usando la etiqueta de tamaño para mantener los píxeles a la par. Si los diseños difieren en altura, recorta al más corto en lugar de rellenar con espacio vacío.

Únelas en paralelo

El panel Unir del editor de imágenes coloca varias imágenes en un mismo lienzo (Pro):

1. Elige Unir en la barra lateral izquierda.
2. Importa primero la imagen del antes y luego la del después.
3. Arrástralas al orden correcto y alinea sus bordes superiores.
4. Deja un hueco constante entre ellas; unos pocos píxeles de margen se leen como un par deliberado.
5. Fusiona cuando la disposición esté bien y luego añade las etiquetas.

Si las dos imágenes tienen tamaños distintos, cambia el tamaño de la mayor para que coincida, o recorta ambas a la misma proporción antes de unirlas. Una diferencia de escala es el motivo más habitual de que una comparación se vea «rara».

Etiqueta los lados, no cada detalle

Usa Texto para añadir «Antes» y «Después» —o «Actual» y «Propuesto»— en la misma esquina de cada lado. Mantén las etiquetas cortas e idénticas de estilo.

Luego anota solo las diferencias que importan:

• Números si hay varios cambios: 1 para el espaciado, 2 para el botón nuevo.
• Formas para delimitar la región que cambió.
• Flechas solo cuando la dirección no sea obvia.
• Ocultar nombres, correos y URL internas en cualquiera de las dos imágenes.

No anotes el mismo detalle en los dos lados; márcalo una vez, en el lado donde cambió.

Exporta según el destino

• Chat o correo: un solo PNG es lo más fácil de leer y sobrevive a la mayoría de clientes.
• Diapositivas: ajusta la proporción de la presentación y usa un fondo si las imágenes son oscuras.
• Documentación: un ancho constante para todas las imágenes comparativas del conjunto.

Si el archivo es grande, reduce la captura Retina a 1x al guardar; una comparación normalmente no necesita toda la densidad de píxeles.

Lista de comprobación de una comparación

Preguntas frecuentes

¿Necesito Pro para unir dos capturas?

Sí, unir es una función Pro. Una alternativa gratuita es fijar las dos capturas una al lado de otra en pantalla para compararlas tú, pero la imagen única exportada requiere el panel Unir del editor.

¿Y si las dos capturas tienen tamaños distintos?

Recorta ambas a la misma proporción o cambia el tamaño de la mayor para que coincida con la menor antes de unirlas. Mantener la escala idéntica importa más que conservar cada píxel.

¿Puedo comparar tres versiones?

Sí. Únelas en orden —por ejemplo, antigua, actual y propuesta— con el mismo hueco y el mismo estilo de etiquetas. Si las diferencias son sutiles, un par de dos imágenes por cambio se lee mejor que una tira ancha.

Más del blog