Comience con la línea base coincidente y los archivos modificados de la misma escena, diseño, ventana gráfica o flujo de trabajo de exportación.
Guía del verificador de diferencias de imagen
Cómo utilizar un comprobador de diferencias de imagen
Revisión a nivel de píxel para capturas de pantalla, exportaciones de compresión, ediciones de productos y pequeños cambios visuales que necesitan métricas de diferencia locales.
Ejecute Diferencias resaltadas para detectar el área modificada y luego confirme el resultado en la vista deslizante, de Lado a lado o superpuesta.
Utilice umbral, píxeles modificados, RMSE y PSNR como señales de revisión. La decisión final todavía proviene del resultado visible.
Revisión de píxeles para áreas exactas cambiadas
Un verificador de diferencias de imágenes localiza diferencias entre dos imágenes relacionadas. Se adapta a comprobaciones de capturas de pantalla de la interfaz de usuario, revisión de retoques de productos, revisión de exportaciones de compresión y pequeños cambios visuales que son fáciles de pasar por alto en un control deslizante.
La herramienta compara píxeles decodificados por el navegador en un lienzo compartido. Un píxel cuenta como cambiado una vez que el delta más grande del canal rojo, verde, azul o alfa excede el umbral seleccionado.
Flujo de trabajo
Secuencia de revisión de diferencias
Cargue la imagen de referencia primero
Utilice la captura de pantalla anterior original o la exportación de referencia como imagen de referencia. Una línea de base clara hace que los cambios en el recuento de píxeles sean más fáciles de detectar.
Cargue la imagen modificada en segundo lugar.
Utilice la nueva captura de pantalla, la foto editada, la imagen optimizada o la variante exportada como imagen modificada. Las dimensiones que no coinciden necesitan una verificación de alineación antes de la revisión de las métricas.
Ejecutar diferenciación resaltada
Resaltar diferencias marca las áreas cambiadas y rellena las tarjetas de métricas. Las vistas con deslizador, en paralelo y superpuestas verifican el resultado resaltado en contexto visual.
Ajuste el umbral deliberadamente
Los umbrales más bajos captan cambios sutiles. Los umbrales más altos ignoran el ruido de compresión, los pequeños cambios de iluminación y el suavizado. Actualice la diferencia después de cambiar el umbral.
umbral
Cómo elegir un umbral de diferencia
El umbral establece el límite de diferencia de canal para los píxeles modificados. No existe un mejor valor universal; haga coincidir el valor con la tarea de revisión.
8
Controles estrictos de la interfaz de usuario
Pruebe 8 para ver pequeños cambios en la captura de pantalla que deberían verse claramente.
La etiqueta de un botón cambió de Guardar a Aplicar.
Un icono se movió ligeramente, un borde fino desapareció o el espacio del texto cambió.
Este valor también puede captar un pequeño ruido de renderizado alrededor del texto y los bordes.
18
Detalle fino de la foto
Pruebe 18 para ediciones de imágenes que son visibles sólo después de una mirada más cercana.
La sombra de un producto se volvió más suave, un retoque facial eliminó una pequeña marca o la textura de la tela cambió.
Una foto se ve casi igual, pero se editó un resaltado, un reflejo o un parche de color.
Bueno para una revisión minuciosa.
32
Valor predeterminado equilibrado
Comience con 32 para la mayoría de las comparaciones.
Una captura de pantalla de la página de destino tiene texto y fotografías.
Se volvió a exportar la imagen de un producto o es necesario revisar rápidamente una vista previa de otra herramienta.
Muévase hacia abajo para verificaciones más estrictas y hacia arriba para archivos más ruidosos.
64
Grandes cambios visibles
Pruebe 64 para concentrarse en los cambios obvios.
Se reemplazó un fondo, se movió un objeto, se cambió un recorte o apareció un fuerte cambio de color.
Una exportación JPEG o WebP tiene poco ruido, pero la revisión sólo se preocupa por los cambios que la gente nota rápidamente.
Es posible que el texto pequeño, los iconos finos y los bordes finos ya no se destaquen.
Métricas
Cómo leer las métricas de diferencia de imágenes
Píxeles cambiados
El número de píxeles del lienzo comparables por encima del umbral actual. El valor depende en gran medida del umbral y la alineación.
Porcentaje de píxeles cambiado
Píxeles modificados divididos por todos los píxeles comparables. Ayuda a comparar dos ejecuciones con diferentes tamaños de imagen o áreas de recorte.
Delta RGB medio
La diferencia promedio absoluta del canal RGB. Aquí pueden aparecer cambios amplios de color o brillo incluso con un pequeño porcentaje de área modificada.
RMSE
Error RGB medio cuadrático. Las diferencias locales más grandes afectan al RMSE con más fuerza que las pequeñas diferencias dispersas.
PSNR
Relación máxima señal-ruido. Un PSNR más alto generalmente significa que las imágenes están más cerca en la señal RGB; Un PSNR más bajo significa un error más visible o medible.
Errores comunes
Resultados diferentes que necesitan una segunda mirada
Las imágenes están ligeramente desplazadas.
Un cambio de 1 px puede iluminar muchas áreas, incluso si la imagen parece casi idéntica. Abra Superposición y verifique si los bordes principales están alineados.
Los tamaños de las imágenes no coinciden.
Diferentes anchos o alturas hacen que la comparación sea menos directa. Utilice las vistas visuales para encontrar el cambio visible y luego recorte o exporte tamaños coincidentes para obtener métricas más limpias.
Aparece ruido de compresión
Las exportaciones JPEG y WebP a menudo añaden pequeñas motas en colores y bordes planos. Aumente el umbral si la revisión trata sobre ediciones visibles.
Los bordes del texto cambiaron durante la renderización
Las fuentes, los iconos y los bordes vectoriales pueden aparecer en píxeles ligeramente diferentes después de un cambio de navegador, fuente o exportación. Utilice un umbral bajo para el control de calidad de las capturas de pantalla y luego confirme a ojo el área resaltada.
Casos de uso
Revisar las tareas de esta guía
Revisión de regresión de captura de pantalla de la interfaz de usuario
Comparación de calidad de compresión de imágenes
Revisión de retoque fotográfico del producto.
Antes y después de las comprobaciones de edición
Pequeñas diferencias de diseño o exportación
Pruébalo
Abra la herramienta después de leer la guía.
Cargue una imagen de referencia y una imagen modificada, ejecute Diferencias resaltadas y luego ajuste el umbral hasta que las áreas resaltadas coincidan con la tarea de revisión.
Preguntas frecuentes
Utilice un comprobador de diferencias de imagen
¿Qué umbral debo usar en un verificador de diferencias de imágenes?
Comience con 32 para una revisión general. Utilice 8 para verificaciones estrictas de capturas de pantalla del mismo tamaño, 18 para detalles finos de la foto y 64 para cambios visibles más grandes.
¿Qué crea muchos píxeles modificados en imágenes similares?
Los pequeños cambios de alineación, el suavizado, el ruido de compresión, las diferencias de perfil de color y los pequeños cambios de iluminación pueden contar como píxeles modificados. Utilice la vista Superpuesta y el ajuste de umbral para comprender el resultado.
¿Son RMSE y PSNR mejores que el porcentaje de píxeles modificados?
Responden a una pregunta diferente. El porcentaje de píxeles modificado muestra cuánta área cruzó el umbral, mientras que RMSE y PSNR resumen el error RGB en el lienzo comparable.
¿Están seguros mis datos de imagen?
Sí. La vista previa de la imagen y la comparación de píxeles se ejecutan localmente en su navegador. La diferencia no requiere una carga en el servidor, por lo que los datos de su imagen permanecen en la sesión activa del navegador.