Loading...
Loading...
Coloca dos imágenes y revela la diferencia con un divisor arrastrable, colócalas lado a lado, o desvanece una sobre la otra — útil para revisiones de diseño, pasadas de retoque y fotografía de antes/después.
Un deslizador de comparación de imágenes te permite superponer dos imágenes y revelar una u otra arrastrando un divisor a través del marco. Es la herramienta estándar para cualquier visual de 'antes vs. después': pasadas de retoque fotográfico, rediseños de una interfaz de usuario, dos renders de la misma escena, dos gradaciones de color de la misma toma, construcción A vs. construcción B de un modelo 3D. El modo lado a lado muestra ambas a la vez para comparaciones de proporciones. El modo de superposición de desvanecimiento hace una transición entre las dos con un deslizador de opacidad, lo cual es útil para detectar sutiles cambios de alineación o diferencias de tono que un divisor duro ocultaría. Todo sucede localmente — ambas imágenes permanecen en tu dispositivo, la comparación se renderiza en el navegador y nada se sube.
Suelta un archivo JPG, PNG, WebP, GIF, BMP o AVIF en el espacio de Antes, o haz clic para seleccionar desde tu dispositivo. La imagen se renderiza en el panel y el espacio de trabajo aparece abajo.
Suelta la segunda imagen en el espacio de Después. Para obtener los mejores resultados, ambas imágenes deben tener las mismas dimensiones — el contenedor de comparación se bloquea a la relación de aspecto de la primera imagen que cargas.
El deslizador coloca las dos imágenes una encima de la otra con un divisor arrastrable. Lado a lado las coloca en dos columnas. La superposición de desvanecimiento hace una transición entre ellas con un deslizador de opacidad — útil para detectar desviaciones de alineación.
En modo deslizador, arrastra en cualquier lugar del área de comparación para mover el divisor. Cambia el divisor a vertical si tus imágenes se comparan de arriba a abajo en lugar de de izquierda a derecha. En modo de desvanecimiento, arrastra el deslizador de opacidad de Después.
Usa Intercambiar para voltear A y B sin volver a subir. Restablecer borra ambas imágenes y devuelve el espacio de trabajo a los valores predeterminados. Carga nuevos archivos en cualquier momento arrastrándolos al espacio — no es necesario restablecer primero.
1. Ambas imágenes se renderizan con object-fit: contain dentro de un contenedor con relación de aspecto bloqueada. 2. La imagen de Después se sitúa en una superposición con posición absoluta. 3. Un clip-path de CSS: inset(0 [100 - position]% 0 0) revela solo el lado izquierdo de la superposición. 4. El modo vertical intercambia el eje inset: clip-path: inset(0 0 [100 - position]% 0). 5. Los eventos del puntero actualizan la posición desde el desplazamiento del cursor dentro del rectángulo delimitador del contenedor. 6. El modo de desvanecimiento omite el clip-path y solo anima la opacidad de 0 a 1 en la imagen de Después.
Usar clip-path mantiene ambas imágenes en plena calidad sin recodificación de lienzo: lo que ves es el archivo fuente píxel por píxel, solo enmascarado. El manejo de arrastre captura pointermove en la ventana para que el divisor siga rastreando incluso si el cursor sale del área de comparación durante el arrastre. El bloqueo de relación de aspecto significa que el contenedor se escala con el ancho de la página sin distorsionar nunca las imágenes, y object-fit: contain maneja con gracia el caso en que las dos imágenes tienen dimensiones ligeramente diferentes.
Referencia: MDN — clip-path
| Caso de uso | Mejor modo |
|---|---|
Paso de retoque fotográfico (piel, reemplazo de cielo, gradación de color) | Control deslizante — arrastra el divisor a través del marco para ver exactamente dónde caen las ediciones. Mantén ambos archivos en las mismas dimensiones para que la línea del divisor siga siendo significativa. |
Rediseño web — capturas de pantalla del diseño antiguo vs. nuevo | Control deslizante para secciones principales, lado a lado cuando el desplazamiento importa. Toma ambas capturas de pantalla con el mismo ancho de viewport o la comparación no será justa. |
Dos renders de la misma escena 3D con diferente iluminación | Superposición de desvanecimiento — intermedia entre ellas para detectar sutiles cambios de GI o sombra. El modo de desvanecimiento también es excelente para detectar dónde un denoiser cambió detalles. |
Captura de pantalla de informe de error vs. salida esperada | Lado a lado — los ingenieros pueden ver ambos a la vez sin desplazarse. Agrega el control deslizante en la parte superior en el hilo del problema para el momento de 'revelación'. |
Mapa o gráfico con dos estados de datos (marzo vs. abril) | Control deslizante — barre a través del gráfico para ver qué regiones cambiaron. El divisor vertical funciona bien para mapas geográficos que comparan norte vs. sur. |
Recorta el sujeto de cualquier foto con IA en el dispositivo — no se requiere carga.
Reduce archivos JPG, PNG o WebP en tu navegador con un control deslizante de calidad interactivo.
Ajusta, filtra, rota y recorta fotos en el navegador — sin subidas, sin marca de agua.
Compón memes y collages de capturas de pantalla con capas reales — pega, arrastra, recorta, subtitula, exporta.
Última actualización: