Compara dos imágenes online

Cómo comparar dos imágenes

Cinco pasos, sin instalar nada y sin crear una cuenta.

1. Añade el original como A: suéltalo en la casilla de la izquierda, haz clic para elegir un archivo o pega una captura con ⌘V o Ctrl+V.
2. Añade la versión modificada como B: las mismas opciones a la derecha. Si sueltas dos archivos a la vez, se rellenan las dos casillas, y el botón de intercambio pone cada imagen en la casilla contraria.
3. Lee el resultado: la vista de diferencias pinta los píxeles cambiados con el color de resaltado sobre una copia atenuada de A, y las estadísticas muestran cuántos píxeles cambiaron, qué parte de la imagen representan y cuántas zonas separadas se encontraron. Si las imágenes son idénticas, verás claramente el mensaje «Las imágenes son idénticas».
4. Revisa los cambios: cambia al deslizador para pasar de A a B, a la vista lado a lado para desplazarte por las dos a la vez, o a la superposición para fundir B sobre A. Elige un zoom del 50 al 400 % y usa las flechas de zona para saltar de un cambio al siguiente.
5. Ajusta y exporta: modifica el umbral, la opción de antialiasing y el color de resaltado hasta que solo queden los cambios que te interesan, y descarga el diff como PNG (con los marcos de zona) o cópialo al portapapeles.

Qué hacen el umbral y la opción de antialiasing

Umbral

El comparador no compara valores RGB en bruto. Para cada píxel mide la diferencia de color percibida en el espacio de color YIQ, un modelo que da más peso al brillo que al tono, igual que tu vista. El resultado está escalado para que 0 signifique idéntico y 1 sea la mayor diferencia posible (rojo puro frente a cian); el negro puro frente al blanco puro queda en torno a 0,97. Cualquier píxel por encima del umbral se marca como cambiado.

• 0: marca cualquier píxel que cambie, incluidas diferencias de redondeo de un solo nivel que nadie puede ver.
• 0,1 (predeterminado): ignora variaciones invisibles y el ruido ligero de compresión y detecta la mayoría de los cambios visibles. Los cambios de tono muy leves, como un fondo un paso de gris más oscuro, pueden quedar por debajo, así que baja el umbral a 0,05 o menos cuando revises tokens de color sutiles.
• De 0,2 a 0,3: un buen rango para JPG, imágenes reescaladas y capturas hechas en equipos distintos.

La aserción toHaveScreenshot de Playwright usa un umbral en la misma escala YIQ de 0 a 1, con un valor predeterminado de 0,2. Pon aquí el umbral en 0,2 y deja activado «Ignorar antialiasing» para ver de antemano qué marcaría una prueba con los valores predeterminados antes de tocar su configuración.

Ignorar antialiasing

El texto y los bordes diagonales se dibujan con tonos intermedios para que se vean suaves (antialiasing). Cada navegador, tarjeta gráfica, motor de fuentes y escala de pantalla produce píxeles de borde ligeramente distintos, así que el mismo texto renderizado dos veces puede diferir en cada letra. Con esta opción activada, un píxel situado entre un vecino más oscuro y otro más claro, en el límite entre dos zonas uniformes, se trata como un artefacto de borde: no se cuenta y se pinta de amarillo para que puedas seguir viéndolo. Desactívala cuando lo que revisas son precisamente los bordes, como un icono redibujado o un cambio en el grosor de la fuente.

Comparar capturas de pantalla para pruebas de regresión visual y QA

Una comparación visual responde rápido a una pregunta: ¿qué ha cambiado en la pantalla? Por eso sirve para mucho más que encontrar las diferencias entre dos fotos.

• Antes y después de un despliegue: captura la misma página en producción y en staging, o antes y después de un merge, y compáralas. Todo lo que aparezca resaltado fuera de la zona que querías cambiar merece una segunda mirada.
• Detectar cambios de interfaz no deseados: un cambio de CSS en un componente que mueve el padding de otro, una fuente que pasa sin avisar a su alternativa, un icono que falta o un token de diseño que cambia un tono de gris en toda la aplicación. Para cambios de tono tan pequeños, baja el umbral a 0,05 o menos.
• Verificar una corrección: compara la captura del informe de error con la versión corregida para confirmar el arreglo y comprobar que no se movió nada alrededor.
• Junto a pruebas automáticas de capturas: cuando falla una prueba visual de Playwright, guarda las imágenes expected, actual y diff en la carpeta de resultados de las pruebas. Suelta aquí las imágenes expected y actual para revisarlas con el deslizador y el zoom, y prueba distintos umbrales antes de tocar la configuración de la prueba.
• Mejores informes de errores: adjunta el diff descargado junto a las capturas de antes y después, para que quien lo revise vea la regresión sin tener que buscarla.

Por qué imágenes que parecen idénticas muestran diferencias

Una comparación de imágenes píxel a píxel ve cambios que tus ojos pasan por alto. Los sospechosos habituales:

• Recompresión JPEG: cada vez que guardas como JPG, la imagen se vuelve a codificar en bloques de 8×8, así que los píxeles se desplazan unos niveles en cada guardado, sobre todo alrededor del texto y de los bordes nítidos.
• Perfiles de color: una imagen con perfil Display P3 y otra con perfil sRGB, o sin perfil, se convierten de forma distinta al dibujarse, así que píxeles de origen idénticos pueden salir ligeramente diferentes.
• Suavizado de fuentes y renderizado subpíxel: ClearType en Windows añade bordes de color al texto, macOS suaviza en escala de grises y cada navegador rasteriza las fuentes a su manera. La misma página en dos equipos rara vez coincide en las letras.
• Relación de píxeles del dispositivo (DPR): una pantalla 2x produce capturas el doble de anchas y altas que una pantalla 1x, y las escalas fraccionarias como 125 % o 150 % en Windows vuelven a cambiar el tamaño. Escalar una imagen al tamaño de la otra siempre la remuestrea.
• Lo que se mueve solo: relojes, marcas de tiempo, fechas relativas como «hace 3 minutos», el cursor de texto parpadeando, el puntero del ratón, estados hover, carruseles, anuncios, animaciones a medio camino e imágenes que aún no habían terminado de cargar.