Comparador de diferencias entre imágenes
Suelta dos versiones de una imagen para ver exactamente qué cambió. Los píxeles cambiados se resaltan, unos recuadros marcan cada área modificada y obtienes el porcentaje de píxeles que difieren. Cambia a un mapa de diferencias, un deslizador o un fundido para examinar los detalles.
Última actualización:
Ignora los cambios de color menores que este valor. 0% = coincidencia exacta.
Cómo usar Comparador de diferencias entre imágenes
- Añade la imagen A y la imagen B: suelta, pega o elige el original a la izquierda y la versión modificada a la derecha.
- Lee el resultado: el panel muestra el % de píxeles que difieren y cuántas áreas distintas cambiaron; los recuadros las marcan en la imagen.
- Ajusta la tolerancia: súbela para ignorar el ruido de compresión en capturas JPG, bájala a 0 para detectar cada valor cambiado.
- Examina: cambia a Diferencia para un mapa tipo calor, o a Deslizador y Fundido para alternar entre las dos versiones.
- Descarga el PNG de diferencias para adjuntar el resultado resaltado a un informe de error o una revisión.
Cómo funciona la comparación
Ambas imágenes se dibujan en lienzos del mismo tamaño (el tamaño de la imagen A, o un tamaño reducido proporcionalmente para imágenes muy grandes de más de unos 16 megapíxeles). Para cada posición de píxel, la herramienta calcula la diferencia en cada canal y se queda con la mayor:
Δ = max(|RA − RB|, |GA − GB|, |BA − BB|, |αA − αB|), un valor de 0 a 255.
- Un píxel está cambiado cuando Δ es mayor que la tolerancia (% de tolerancia × 255).
- Píxeles cambiados = píxeles cambiados ÷ (ancho × alto) × 100.
- Diferencia media = Δ promedio de todos los píxeles ÷ 255 × 100; diferencia máxima = mayor Δ ÷ 255 × 100.
- Las áreas modificadas se detectan agrupando los píxeles cambiados en pequeñas celdas de cuadrícula y uniendo las celdas vecinas, de modo que una palabra o un botón cambiado cuenta como una sola área.
Qué vista usar
| Vista | Lo que ves | Útil para |
|---|---|---|
| Resaltado | Píxeles cambiados en un color vivo sobre una copia de A en escala de grises atenuada, con recuadros | Detectar cada cambio de un vistazo, informes de errores |
| Diferencia | |A − B| por canal, amplificado; negro significa idéntico | Cambios sutiles de color, artefactos de compresión, bordes desplazados |
| Deslizador | A a la izquierda y B a la derecha de una línea que se puede arrastrar | Comprobar la alineación y los desplazamientos del diseño |
| Fundido | B mezclada sobre A con opacidad ajustable | Ver el movimiento, como la clásica vista de papel cebolla |
Consejos para obtener resultados precisos
- Compara archivos PNG sin pérdida siempre que puedas. Cada vez que se guarda un JPG se añaden pequeños cambios que aparecen como ruido.
- Haz ambas capturas con el mismo nivel de zoom, tamaño de ventana y densidad de píxeles del dispositivo; un desplazamiento de 1 px hace que todos los bordes parezcan cambiados.
- Si una imagen es una copia redimensionada de la otra, usa Escalar B al tamaño de A; el remuestreo también crea pequeñas diferencias, así que sube la tolerancia a un 10% aproximadamente.
Preguntas frecuentes
¿Cómo se calcula el porcentaje de diferencia?
Cada píxel de la imagen A se compara con el píxel en la misma posición de la imagen B. Un píxel cuenta como cambiado cuando la mayor diferencia en su valor de rojo, verde, azul o alfa supera la tolerancia. El porcentaje es píxeles cambiados ÷ píxeles totales × 100. La diferencia media es el promedio de esa mayor diferencia de canal en todos los píxeles, expresado como porcentaje de 255.
¿Qué tolerancia debo usar?
Usa 0 para capturas PNG sin pérdida cuando necesites detectar cada cambio. Para archivos JPG o capturas que pasaron por compresión, entre un 5 y un 15% oculta el ruido y aun así encuentra los cambios reales. Súbela más para encontrar solo cambios fuertes, como objetos movidos o reemplazados.
¿Puedo comparar imágenes de distinto tamaño?
Sí. Escalar B al tamaño de A redimensiona la segunda imagen a las dimensiones de la primera, lo adecuado para la misma imagen exportada a otro tamaño. Alinear arriba a la izquierda mantiene ambas a su escala original y compara la zona superpuesta, lo que conviene para capturas donde se añadió algo abajo o a la derecha; las zonas no cubiertas cuentan como cambiadas.
¿Por qué dos JPG que parecen idénticos muestran diferencias?
La compresión JPEG cambia ligeramente los valores de los píxeles cada vez que se guarda una imagen, sobre todo en los bordes y en los degradados suaves. Estas diferencias son invisibles a simple vista, pero reales. Aumenta la tolerancia hasta que solo queden los cambios significativos.
¿Sirve para pruebas de regresión visual?
Sí. Compara una captura de una página antes y después de un cambio de código para detectar cambios de diseño o de color no deseados. Los recuadros de áreas modificadas señalan cada región, y el PNG de diferencias es fácil de adjuntar a un pull request o ticket.
¿Se suben mis imágenes?
No. Ambas imágenes se decodifican y comparan con la Canvas API dentro de tu navegador. No se envía nada a ningún servidor, así que las capturas confidenciales se quedan en tu dispositivo.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.