Ir al contenido principal
Bethemesh

Comparador de imágenes

Carga dos imágenes: compáralas con el deslizador o lado a lado, o muestra en rojo los píxeles modificados con su porcentaje, en local.

Integrar este widget

Personaliza el aspecto, comprueba la vista previa y copia el código.

Vista previa

Tipo de código de integración

Código para copiar

Se adapta a tu página y Bethemesh ajusta su tamaño automáticamente.

Imagen
Ninguna imagen cargada

Suelta una imagen aquí

Añade exactamente dos imágenes para comparar. Puedes seleccionarlas juntas o añadir la segunda después de la primera.

¿Necesitas más opciones?

Reúne varias herramientas de edición en un mismo espacio, con tu archivo abierto y sus cambios en curso.

Abrir el editor completo

¿Te ha resultado útil esta herramienta?

¿Cómo funciona esta herramienta?

Dos versiones de una misma imagen suelen parecerse tanto que ya no se ve qué ha cambiado: una maqueta corregida, una captura antes y después de una actualización, una foto retocada o recomprimida. Este comparador las muestra con un deslizador antes/después, lado a lado, o resalta en rojo los píxeles que difieren con su porcentaje, sin subir las imágenes.

Añade exactamente dos imágenes PNG, JPEG o WebP, seleccionándolas juntas o una tras otra; la primera pasa a ser «Antes» y la segunda «Después». Antes / después superpone las dos imágenes con una separación vertical que puedes arrastrar, y Lado a lado las coloca a izquierda y derecha. El zoom ayuda a revisar los detalles.

Diferencias compara las dos imágenes píxel a píxel. Un píxel se marca en rojo cuando uno de sus canales (rojo, verde, azul o transparencia) se aleja más de 32 niveles sobre 255; los demás se muestran en gris claro a partir de la primera imagen para conservar el contexto. El umbral evita señalar el ruido de una compresión JPEG.

El resultado indica el porcentaje y el número de píxeles distintos. Si las dos imágenes no tienen el mismo tamaño, la segunda se ajusta al de la primera antes del cálculo y un mensaje lo indica. Pulsa de nuevo Diferencias u otra vista para volver a las imágenes.

Cómo utilizar esta herramienta

  1. Añade las dos imágenes

    Selecciona el original y luego la versión modificada, juntas o una tras otra.

  2. Elige la vista

    Antes / después para el deslizador, Lado a lado, o Diferencias para resaltar los píxeles cambiados.

  3. Revisa las diferencias

    Amplía las zonas señaladas y lee el porcentaje de píxeles distintos.

Detección de diferencias

Cada píxel de la segunda imagen se compara con el píxel de la misma posición en la primera.

Diferencia de un píxel

d = máx(|ΔR|, |ΔG|, |ΔB|, |ΔA|) > 32

El píxel cuenta como distinto cuando la mayor diferencia de canal supera 32 sobre 255.

Proporción de píxeles distintos

p = n_diff ÷ (W × H) × 100

Calculada al tamaño de la primera imagen.

ΔR, ΔG, ΔB, ΔA
diferencias de los canales rojo, verde, azul y alfa entre las dos imágenes
n_diff
número de píxeles marcados en rojo
W, H
anchura y altura de la primera imagen

Casos de uso

Revisar una maqueta corregida

Detecta enseguida qué se ha movido entre dos versiones de una pantalla o un diseño.

Comprobar una regresión visual

Compara una captura antes y después de una actualización para encontrar el botón o el texto cambiado.

Valorar un retoque o una compresión

Mira con el deslizador si una foto optimizada ha perdido detalle respecto al original.

Ejemplos

Botón modificado en una captura

200 × 50 = 10 000 píxeles cambiados sobre 1280 × 720 = 921 600, es decir un 1,09 %. El resto de la pantalla se ve en gris claro.

Entrada

Dos capturas de 1280 × 720 px; solo un botón de 200 × 50 px cambia de color

Resultado

Vista Diferencias: el botón aparece en rojo; «El 1,09 % de los píxeles difiere (10 000 de 921 600)»

Dos imágenes de tamaños distintos

La proporción 16:9 es la misma, así que nada se deforma; aun así, los contornos pueden salir en rojo por el suavizado de la ampliación.

Entrada

Original de 1920 × 1080 px y una exportación de 1280 × 720 px

Resultado

La segunda imagen se ajusta a 1920 × 1080 px antes de comparar, con un mensaje que lo indica

Consejos y buenas prácticas

  • Pon siempre el original primero: la vista Diferencias usa su tamaño y sus grises como fondo.
  • Para comparar dos exportaciones, mantén las mismas dimensiones: un cambio de escala crea diferencias en todos los contornos.
  • Usa el deslizador Antes / después para valorar un retoque de color y Diferencias para encontrar un cambio localizado.
  • Un porcentaje bajo en una foto recomprimida en JPEG es normal: la compresión modifica ligeramente miles de píxeles.

Fuentes y referencias

Preguntas frecuentes

¿Cuántas imágenes puedo comparar?

Exactamente dos. Si seleccionas solo una, la herramienta espera la segunda; con más de dos, te pide empezar de nuevo.

¿Cómo se detectan las diferencias?

Cada píxel se compara con el que ocupa el mismo lugar en la otra imagen. Se marca en rojo si el canal rojo, verde, azul o alfa difiere más de 32 sobre 255.

¿Las imágenes deben tener el mismo tamaño?

No, pero es preferible. La segunda se ajusta al tamaño de la primera; si las proporciones difieren, se deforma y muchos píxeles aparecerán como distintos.

¿Puedo ajustar la sensibilidad?

No en esta versión: el umbral está fijado en 32 niveles, suficiente para ignorar el ruido de compresión y detectar un cambio de color o de texto.

¿Puedo descargar la imagen de diferencias?

No, el comparador sirve para revisar en pantalla. Haz una captura de la vista Diferencias si necesitas compartirla.

¿Se suben mis imágenes a un servidor?

No. La visualización y el cálculo de diferencias se hacen en tu navegador.

Herramientas relacionadas

Herramientas similares o complementarias a esta.

Herramientas similares

Recorta, redimensiona, añade texto o marcas de agua, aplica efectos y optimiza una imagen en un solo editor.

Imágenes y diseño gráficoDestacadaUsar esta herramienta

Aligera una imagen ajustando su calidad o apuntando a un peso en KB, con el peso final visible antes de descargar.

Imágenes y diseño gráficoDestacadaUsar esta herramienta

Convierte una imagen a PNG, JPEG o WebP y ajusta la calidad antes de descargarla.

Imágenes y diseño gráficoDestacadaUsar esta herramienta
GuíaBuenas prácticasIntermedio

Imágenes responsive: entender srcset y sizes

Entiende srcset, sizes, los descriptores de anchura y densidad, picture, la dirección artística y cómo el navegador elige la imagen responsive adecuada.

31 de agosto de 202618 min
TutorialBuenas prácticasPrincipiante

Optimizar imágenes para la Web sin perder calidad

Redimensiona, comprime y elige entre WebP, AVIF y otros formatos con un flujo práctico que reduce peso sin degradar innecesariamente la imagen.

30 de agosto de 20262 min