Show before and after with one draggable slider

Загрузите два изображения одинакового размера, и инструмент наложит их с перетаскиваемым ползунком. Сдвиньте влево, чтобы показать изображение «до», вправо — чтобы показать «после». Идеально для демонстрации правок, ретуши, похудения, ремонта, итераций дизайна и результатов ИИ-генерации.

Да. Экспортируйте слайдер как MP4 или анимированный GIF, который автоматически зацикливает движение — идеально для постов в Instagram, TikTok, X и LinkedIn, где зрители не могут перетащить ползунок. Частота кадров и длительность настраиваются.

В идеале да, поскольку ползунок сравнивает попиксельно. Если размеры различаются, инструмент предлагает автоматически обрезать или масштабировать второе изображение под первое, сохраняя соотношение сторон, чтобы сравнение оставалось точным.

Принимаются JPEG, PNG, WebP, GIF и HEIC. Экспортируемое видео использует H.264 MP4 для максимальной совместимости, а экспорт в GIF сохраняет достаточно малый размер файла для быстрой публикации в соцсетях.

Предпросмотр сравнения бок о бок выполняется в вашем браузере, но при экспорте объединённого изображения оба снимка загружаются на наш защищённый сервер, чтобы сформировать итоговый файл; после этого они автоматически удаляются и никогда не передаются третьим лицам и не используются для обучения моделей. Для строго конфиденциальных материалов, для которых загрузка недопустима, сделайте снимок экрана с предпросмотром вместо использования кнопки «Экспорт».

Да. Скопируйте сгенерированный фрагмент HTML и вставьте его в WordPress, Webflow, Squarespace, Shopify или любой статический сайт. Встраиваемый код не имеет зависимостей, адаптирован под мобильные устройства и работает без внешних библиотек JavaScript.

Используйте элемент управления «Ориентация» на панели «Сравнение», чтобы переключаться между «Горизонтальной» (свайп влево-вправо, лучше всего для горизонтальных фото и раскладок бок о бок) и «Вертикальной» (свайп сверху вниз, лучше для высоких портретных снимков или сравнений «до/после» по высоте, например ремонтов или фото роста).

Параметр Split % задаёт, где проходит разделительная линия между изображениями «до» и «после», от 0 (полностью видно «после») до 100 (полностью видно «до») — по умолчанию 50 для равного деления. Сдвиньте его в одну сторону, если хотите, чтобы в экспортируемой композиции было больше видно конкретное изображение, например 70, чтобы подчеркнуть результат «после».

Нажмите кнопку «Swap» в панели «Compare», чтобы мгновенно поменять местами изображения «до» и «после» без повторной загрузки — удобно, если вы добавили их в неправильном порядке или хотите поменять направление раскрытия для другого визуального эффекта.

Для ремонта всей комнаты хорошо подходит вертикальная ориентация с разделением 50 %, так как она позволяет зрителям сравнивать детали сверху донизу, например изменения пола и потолка. Для сравнения мебели или цвета бок о бок горизонтальная ориентация с разделением 40–60 % (в пользу того изображения, где результат ярче) обычно привлекает взгляд эффективнее всего.