¿Cómo usar esta herramienta?
- Arrastre la primera imagen a la zona izquierda (o haga clic para elegir).
- Arrastre la segunda imagen a la zona derecha.
- El informe de comparación aparece automáticamente con tamaño de fichero, dimensión y desviación de píxel.
- Opcional: establezca una tolerancia por canal (0–255) para ignorar pequeñas variaciones de color.
¿Qué hace el comparador?
El diff de imagen toma dos imágenes — como Data URLs Base64 — y las analiza a nivel de byte. Obtiene un informe estructurado con tamaño de fichero, formato (tipo MIME) y el porcentaje de bytes divergentes. Las imágenes idénticas se marcan como tales; en caso de diferencias ve la desviación exacta.
La herramienta trabaja únicamente en el navegador. Ningún servidor recibe, almacena ni procesa tus datos de imagen. Por eso encaja también para capturas confidenciales, assets de diseño internos y fotos con datos personales.
¿Cuál es la fórmula de cálculo?
La comparación se basa en un análisis byte a byte de los datos de imagen codificados en Base64:
Desviación = número de bytes distintos / longitud total × 100 %
Ambas Data URLs se separan tras la coma. La cadena Base64 resultante se compara carácter a carácter. Longitudes distintas entran como diferencia adicional — los datos más cortos se cuentan como totalmente divergentes.
A partir de la longitud Base64 se deduce el tamaño aproximado de fichero: bytes ≈ caracteres Base64 × 3 / 4. El informe muestra ambos valores.
¿Qué ejemplos de aplicación hay?
| Escenario | Descripción |
|---|---|
| Verificar iteraciones de diseño | Comparar dos versiones de un mockup UI para cuantificar cambios entre iteraciones. |
| Regresión de captura | Comparar capturas automatizadas antes y después de un despliegue para detectar regresiones visuales. |
| Evaluar compresión de imagen | Comparar la misma imagen en distintos niveles de calidad (p. ej. JPEG 80 % vs 95 %) y medir la diferencia de bytes. |
| Buscar duplicados de asset | Comparar dos imágenes aparentemente iguales para verificar si lo son realmente al byte. |
| Comprobación de marca de agua | Comparar original y versión potencialmente marcada para detectar cambios ocultos. |
| Verificar conversión de formato | Comparar un PNG y su conversión WebP para medir el impacto del cambio de formato. |
¿Qué áreas de uso hay?
Desarrollo web y QA. Los equipos frontend comparan capturas antes y después de una release. El diff de imagen muestra si ha cambiado la salida visual — sin que un humano deba revisar cada píxel a mano. La desviación de bytes sirve como primer indicador antes de que sean necesarios tests de regresión visual más pesados.
Diseño e ilustración. Los diseñadores comparan versiones de export de un asset para asegurarse de que perfiles de color, resolución y compresión se mantienen coherentes. Sobre todo en la entrega a desarrollo, el diff de imagen ayuda a detectar cambios involuntarios por re-export o conversión.
Privacidad y análisis forense. Quien debe comparar imágenes confidenciales — imágenes médicas, documentos de identidad, presentaciones internas — necesita una herramienta que no envíe datos a servidores ajenos. El diff de imagen procesa todo en local, conforme RGPD y sin seguimiento.
Compresión de imagen y elección de formato. En la optimización de assets web, la comparación entre original y versión comprimida ayuda. Ve cuánto cambia la estructura de bytes con la calidad JPEG, la conversión WebP o la optimización PNG.
Preguntas frecuentes
Las respuestas a las preguntas más importantes están arriba en el bloque FAQ — se entregan como JSON-LD estructurado (FAQPage) para los motores de búsqueda.
¿Qué herramientas de imagen están relacionadas?
Otras herramientas del ecosistema convertidor que encajan con el tema:
- Convertidor de formato de imagen — convertir imágenes a WebP, AVIF y más, con comparación de formato y herramientas dedicadas por par de formatos.
- Eliminar fondo — eliminar fondo de imagen automáticamente con IA, directamente en el navegador sin subida.
- Generador QR código — generar códigos QR con contenido libre y descargar como PNG o SVG.
Última actualización: