Comparación de Screenshots: Pixel Diff, pHash y SSIM Explicados Simplemente
La comparación de screenshots es el proceso algorítmico por el cual una herramienta de test visual determina si dos capturas de pantalla de una misma página web son idénticas o diferentes — y si son diferentes, hasta qué punto y dónde.
Detrás de cada herramienta de test visual hay uno o varios algoritmos de comparación de imágenes. Tres métodos dominan el mercado.
El Pixel Diff: contar los puntos
El pixel diff es el enfoque más directo. El algoritmo toma dos imágenes del mismo tamaño, recorre cada píxel y compara los valores de color. Si los valores difieren, el píxel se marca como "diferente".
Imagine dos hojas de papel cuadriculado idénticas salvo que alguien ha coloreado 3 casillas en rojo en la segunda. El pixel diff encontraría exactamente esas 3 casillas.
Normalmente aquí le pondríamos la fórmula matemática. Pero en 2026, si quiere la fórmula de la distancia euclidiana en espacio RGB, la encuentra más rápido pidiéndosela a una IA que leyendo este artículo.
El algoritmo produce dos cosas: el número (o porcentaje) de píxeles diferentes, y una imagen "diff" donde las zonas de diferencia están coloreadas en rojo.
Es simple, rápido, determinista. Pero es brutal. Un ligero cambio de anti-aliasing en un texto — invisible a simple vista — puede marcar cientos de píxeles como "diferentes". El test falla por nada.
El pHash: la firma visual
El pHash (Perceptual Hash) toma un enfoque radicalmente diferente. En lugar de comparar píxel por píxel, reduce cada imagen a una "huella" corta — típicamente 64 bits — que captura la estructura visual global.
Piénselo como la melodía de una canción. Puede reconocer "La Macarena" aunque la toquen al piano, a la guitarra o la cante alguien que desafina. La melodía es la misma — los detalles cambian.
El algoritmo reduce la imagen a un tamaño muy pequeño, la convierte a niveles de gris, aplica una transformación matemática que extrae las frecuencias bajas y produce una secuencia de bits. Dos imágenes visualmente similares tendrán huellas cercanas.
La ventaja: inmune a micro-variaciones (anti-aliasing, compresión ligera). El problema: poco preciso para los detalles. Un cambio de color sutil o un desplazamiento de 5 píxeles puede pasar desapercibido.
El SSIM: el ojo matemático
El SSIM (Structural Similarity Index Measure) es el método más sofisticado de los tres. Compara zonas de la imagen según tres criterios perceptuales: luminancia, contraste y estructura.
El algoritmo recorre la imagen con una ventana deslizante y calcula estas tres medidas para cada zona. El resultado es una puntuación entre 0 y 1 — cuanto más cerca de 1, más similares perceptualmente.
Un score SSIM de 0.99 significa "cuasi idéntico para un humano". 0.95 significa "diferencias visibles pero menores". Debajo de 0.90, las diferencias son evidentes.
La ventaja: es el método que más se acerca a la percepción humana. El problema: más lento que el pixel diff, y el umbral de tolerancia debe calibrarse con cuidado.
Lo que cada método falla
El pixel diff falla el contexto. No sabe si un píxel diferente es importante o no.
El pHash falla los detalles. Los cambios sutiles pasan bajo el radar.
El SSIM es el mejor compromiso, pero necesita calibración fina del umbral.
El enfoque estructural: más allá de la imagen
Existe un cuarto enfoque que no compara imágenes en absoluto. El análisis estructural compara las propiedades CSS calculadas y el DOM directamente. Es lo que hace Delta-QA con su algoritmo en 5 pasadas.
En lugar de preguntarse "¿son idénticos los píxeles?", se pregunta "¿son idénticas las propiedades CSS de cada elemento?". Más preciso (cero falso positivo por renderizado) y más informativo.
FAQ
¿Qué método es el más rápido?
El pixel diff. El pHash es ligeramente más lento. El SSIM es el más lento.
¿Qué método produce menos falsos positivos?
El SSIM bien calibrado.
¿Las herramientas usan un solo método?
No siempre. Algunas combinan pixel diff + SSIM. Delta-QA usa análisis estructural.
¿Puede el pHash detectar un cambio de color?
Solo si el cambio es significativo.
¿Qué umbral SSIM usar?
Regresión estricta: 0.99. Monitoreo con tolerancia: 0.95-0.97.
Artículo anterior: Test Visual On-Premise