Ir al contenido principal
Develop Tools
← Volver a la guía de uso

Cómo comparar dos imágenes píxel por píxel

Al revisar cambios de interfaz, ediciones de imágenes o regresiones visuales, la vista de diferencias permite detectar desplazamientos de un píxel y cambios de color difíciles de apreciar a simple vista.

Proceso de alinear dos imágenes, ordenarlas a izquierda y derecha y comprobar la superposición y diferencia.
Proceso de alinear dos imágenes, ordenarlas a izquierda y derecha y comprobar la superposición y diferencia.

Cómo utilizar diferentes métodos de comparación

Método de visualizaciónFácil de detectar diferencias
Vista en paraleloCambios importantes de diseño, omisiones y adiciones.
control deslizanteDiferencias en la posición, el tamaño y el recorte del borde
Superposición con transparenciaDesalineación de varios píxeles, escalado.
Resaltado de diferenciasCambios de color, contorno y píxel a píxel

Procedimiento de comparación

  1. Cargue la imagen de referencia a la izquierda y la imagen de comparación a la derecha.
  2. Si las dimensiones son distintas, compruebe si se trata de un cambio intencionado o de una diferencia en las condiciones de guardado.
  3. Verifique el cambio posicional usando el control deslizante y la superposición transparente, luego cambie al énfasis de diferencia.
  4. Identifique la ubicación y la causa de las diferencias inaceptables y guarde la imagen resultante si es necesario.

Factores que tienden a causar diferencias.

Incluso en una misma pantalla, el contorno y las sombras del texto pueden variar según el sistema operativo, el navegador, la fuente, el nivel de zoom, la GPU o el momento de la captura. Al comparar páginas web, mantenga fijos el tamaño de la ventana y el nivel de zoom.

El ruido de compresión de JPEG cambia cada vez que se guarda el archivo. Para una comparación estricta píxel por píxel, conviene utilizar un formato sin pérdida como PNG.

No considere que la comparación ha fallado solo porque el porcentaje de diferencia no sea 0 %. Compruebe si la ubicación y el aspecto de las diferencias están dentro del margen aceptable.

Probar en el navegador

Los datos introducidos se procesan en el navegador. Conserve los datos originales y revise el resultado antes de guardarlo o compartirlo.

Abrir herramienta de comparación de diferencias de imágenes