Comparador de Imágenes
Compara dos imágenes píxel por píxel y descubre al instante qué cambió, con una imagen de diferencias resaltada y un resumen porcentual — todo procesado localmente en tu navegador.
🔒 Procesado localmente en tu navegador
Loading…
Cómo usarlo
- Arrastra y suelta (o haz clic para elegir) tu imagen original en la zona "Antes".
- Arrastra y suelta (o haz clic para elegir) la imagen con la que quieres compararla en la zona "Después".
- Haz clic en "Comparar Imágenes" — ambas imágenes se comparan píxel por píxel directamente en tu navegador.
- Revisa la imagen de diferencias resaltada y el porcentaje de píxeles distintos, y descarga la imagen de diferencias si lo necesitas.
Características
- Comparación píxel por píxel con la librería de código abierto pixelmatch
- Resalta cada píxel diferente sobre un fondo atenuado para detectar cambios fácilmente
- Muestra el número exacto y el porcentaje de píxeles que difieren
- Señala claramente las imágenes con dimensiones distintas en lugar de compararlas incorrectamente
- 100% del lado del cliente — tus imágenes nunca se suben a un servidor
Preguntas frecuentes
¿Para qué sirve esta herramienta?
Es ideal para pruebas de regresión visual (comprobar que la interfaz no cambió inesperadamente entre versiones), comparar dos versiones de un diseño o captura de pantalla, detectar ediciones sutiles en una foto, o verificar que una imagen se recomprimió sin pérdida visible de calidad.
¿Por qué mis dos imágenes deben tener las mismas dimensiones?
La comparación funciona píxel por píxel, emparejando cada píxel de la primera imagen con el píxel en la misma posición de la segunda. Si las imágenes tienen tamaños distintos no existe una correspondencia 1:1 significativa, así que la herramienta muestra un error claro en lugar de comparar datos incompatibles.
¿Cómo se genera la imagen de diferencias?
La herramienta usa pixelmatch, una librería de código abierto para comparación de píxeles. Las áreas coincidentes se atenúan, y los píxeles que difieren más allá de un pequeño umbral que tiene en cuenta el antialiasing se resaltan en un color brillante para que destaquen de inmediato.
¿Se suben mis imágenes a algún lugar?
No. Ambas imágenes se cargan y comparan completamente dentro de tu navegador usando la API Canvas. Nada se envía a un servidor.
¿Por qué dos imágenes visualmente idénticas podrían mostrar algunos píxeles distintos?
Pequeñas diferencias de compresión, perfiles de color o recodificación pueden alterar ligeramente algunos valores de píxel aunque las imágenes parezcan idénticas a simple vista. Un porcentaje muy bajo de píxeles distintos suele indicar este tipo de ruido y no un cambio visual real.