Cargando...
Cargando...
Suelta dos imágenes y resalta cada píxel cambiado. Ajusta el umbral para ignorar el ruido de compresión menor, ve el porcentaje exacto de cambio y exporta la diferencia como PNG.
Elige dos imágenes para comenzar a compararlas píxel por píxel.
Un visualizador de diferencia de píxeles compara dos imágenes a nivel de píxel y resalta cada posición donde los valores de color difieren. Es el equivalente visual de una diferencia de código: ves exactamente qué cambió entre dos capturas de pantalla, dos exportaciones de diseño o dos instantáneas de una prueba de regresión. Esta herramienta se ejecuta completamente en tu navegador utilizando la API HTML Canvas. Escanea cada píxel en la imagen A contra el píxel correspondiente en la imagen B, suma las diferencias absolutas de los canales y pinta cualquier píxel por encima de tu umbral en el color de resaltado que elijas. También obtienes un porcentaje de cambio para que puedas cuantificar cuánto difieren realmente las dos imágenes.
Suelta o elige la imagen A (la base) y la imagen B (la versión que deseas comparar). Se recomiendan las mismas dimensiones; los tamaños desiguales se escalan automáticamente a la imagen A.
Resaltar cambios es el predeterminado: cada píxel cambiado se pinta en tu color de resaltado. Lado a lado muestra A, B y la diferencia en una tira; Superposición apila B con un 50% de opacidad sobre A.
Arrastra el control deslizante del umbral hacia arriba para ignorar el ruido de compresión menor y pequeños artefactos JPEG. Un 5% es un buen punto de partida para fotos comprimidas; 0% captura cada diferencia de píxel.
El porcentaje de cambio te dice qué fracción de píxeles excede el umbral: útil para revisión de regresión o QA de diseño.
Haz clic en Descargar para guardar la diferencia renderizada a máxima resolución. Útil para adjuntos de revisión de código e informes de errores.
Para cada posición de píxel p, con canales (r, g, b) de las imágenes A y B: diff(p) = |Ar - Br| + |Ag - Bg| + |Ab - Bb| Un píxel se trata como diferente cuando: diff(p) > (umbral% × 765) / 100 donde 765 = 3 × 255 es la diferencia máxima de suma de canales. Esto es lo mismo métrica de distancia L1 utilizada por herramientas de diferencia de imagen como pixelmatch y resemble.js, solo expresada como un único umbral ajustable en lugar de tolerancias por canal.
La distancia L1 (Manhattan) sobre los canales RGB es la métrica más simple que captura tanto cambios de color como cambios de brillo. Se ignora el alfa porque la mayoría de los casos de uso de diferencia (capturas de pantalla, regresiones fotográficas) operan en imágenes opacas. Para imágenes con diferentes dimensiones, la imagen B se reescala a la imagen A utilizando un filtrado bilineal de alta calidad antes de que se realice la comparación.
Referencia: pixelmatch — comparación de imágenes a nivel de píxel
| Entradas | Resultado de la diferencia |
|---|---|
Dos PNG idénticos de 1920×1080 | 0% de cambio — la diferencia está completamente atenuada Ningún píxel excede el umbral; ideal para pasar la prueba de regresión. |
Dos JPEGs de la misma escena a 85% de calidad | ~1–2% con umbral = 0 El ruido de compresión crea pequeñas diferencias por píxel; aumenta el umbral a 5% para ignorar. |
Exportación de diseño A vs B (color del botón cambiado) | Cambio confinado al rectángulo del botón El color de resaltado hace que la región modificada sea instantáneamente visible. |
Recorta el sujeto de cualquier foto con IA en el dispositivo — no se requiere carga.
Reduce archivos JPG, PNG o WebP en tu navegador con un control deslizante de calidad interactivo.
Ajusta, filtra, rota y recorta fotos en el navegador — sin subidas, sin marca de agua.
Compón memes y collages de capturas de pantalla con capas reales — pega, arrastra, recorta, subtitula, exporta.
Última actualización