La respuesta corta
Suelta las dos imágenes en la herramienta de abajo a la vez, o una después de la otra. La primera es la referencia. Usa Deslizador para arrastrar entre ellas, Lado a lado para ver las dos completas y Diferencia para obtener un mapa de calor: las zonas sin cambios quedan en gris claro y los píxeles cambiados se iluminan de amarillo (cambio pequeño) a rojo (cambio grande). Debajo de las imágenes ves la parte de píxeles cambiados, su cantidad, la mayor diferencia y el rectángulo que contiene todos los cambios. Pulsa Descargar diferencia (PNG) para guardar el mapa.
Pruébalo aquí: Comparar imágenes
Abrir la herramienta completaCuándo sirve comparar píxel por píxel
- Revisiones de diseño: ¿la nueva exportación de un banner, un icono o una ilustración cambió algo aparte del arreglo que se pidió?
- QA visual y pruebas de regresión: compara una captura de una pantalla de app o de una página web antes y después de un cambio en el código y detecta botones movidos, fuentes cambiadas o elementos que faltan.
- Edición de fotos: ve exactamente qué cambió un retoque, una corrección de color o un filtro.
- Compresión y ampliación: compara una imagen comprimida o ampliada con la original y juzga dónde se perdió calidad.
- Encuentra las diferencias: detecta cambios pequeños entre dos versiones del escaneo de un documento, un mapa o una imagen de pasatiempos.
Deslizador, lado a lado o diferencia
Las tres vistas responden preguntas distintas. El deslizador pone la segunda imagen justo encima de la primera; al arrastrar el control se ve una u otra. Tu ojo es muy bueno para notar lo que se mueve mientras arrastras, así que es la vista más intuitiva para color, nitidez y retoques.
Lado a lado muestra las dos imágenes completas, cada una con sus propias proporciones. Sirve cuando importa la impresión general, por ejemplo dos variantes de un diseño, y también para imágenes de formas distintas.
Diferencia es la vista objetiva. Compara cada píxel de las dos imágenes y no se le escapa ni el cambio de un solo píxel que el ojo pasaría por alto. El marco punteado alrededor de los cambios te ayuda a encontrarlos en una captura grande, aunque solo difieran unos pocos píxeles en una esquina. Después vuelve al deslizador para juzgar si un cambio que encontraste de verdad importa.
| Pregunta | Mejor vista |
|---|---|
| ¿La nueva versión se ve mejor? | Deslizador |
| ¿Cuál de dos diseños funciona? | Lado a lado |
| ¿Cambió algo, y dónde exactamente? | Diferencia |
| ¿Cuánto cambió, en números? | Diferencia (estadísticas) |
Cómo leer los números
Píxeles cambiados es la parte de la imagen cuya diferencia está por encima del umbral. Cantidad de píxeles es lo mismo como número exacto. Mayor diferencia muestra el cambio más fuerte en una escala de 0 (idéntico) a 100 (negro contra blanco). Zona cambiada es el rectángulo más pequeño que contiene todos los píxeles cambiados, con su tamaño y la posición de su esquina superior izquierda, en píxeles de la primera imagen.
La diferencia de un píxel es el mayor cambio en cualquiera de sus canales de color o en su transparencia. Eso quiere decir que un píxel que pasó de gris claro a azul claro cuenta como claramente cambiado, aunque su brillo sea parecido, y un cambio solo de transparencia también cuenta.
Umbral y ruido de compresión
Dos imágenes que se ven idénticas pueden diferir en miles de píxeles. La compresión de JPG y WebP cambia un poco los valores de los píxeles cada vez que se guarda un archivo, y lo mismo pasa al cambiar el tamaño, al convertir perfiles de color y con capturas tomadas con distinta escala. Para la mayoría de las comparaciones estos cambios invisibles son ruido.
Umbral define qué tamaño de diferencia se ignora, de 0 a 100. En 0 cuenta cualquier cambio. Un valor de 5 a 15 oculta el ruido de compresión y deja los cambios reales, como elementos movidos, texto nuevo u otro color. Si comparas dos exportaciones de un PNG sin pérdida desde la misma herramienta de diseño, déjalo en 0; si comparas dos JPG, empieza en 10.
Imágenes de distinto tamaño
Una comparación píxel por píxel necesita las dos imágenes en la misma cuadrícula. Si la segunda imagen tiene otro tamaño, la herramienta la escala al tamaño de la primera y te lo indica debajo de los resultados. Cuando además las proporciones son distintas, la segunda imagen se estira, y la nota también lo dice. Escalar crea pequeñas diferencias en los bordes, así que para revisiones exactas compara imágenes con las mismas medidas, por ejemplo capturas tomadas con el mismo tamaño de ventana y el mismo zoom.
Intercambiar convierte la segunda imagen en la referencia. Las imágenes nunca salen de tu dispositivo: las dos se decodifican y se comparan en tu navegador, así que puedes comparar diseños confidenciales y pantallas que aún no se publican sin subirlos.