Gambar / Lokakarya foto

Slider Sebelum dan Sesudah

Buat perbandingan sebelum dan sesudah dengan label yang dapat diedit dan slider langsung. Download file HTML portabel dengan kedua gambar di dalamnya, animasi wipe GIF, atau WebM jika didukung.

Slider Sebelum dan Sesudah: Menggunakan proporsi gambar sebelum dan melakukan crop dari tengah pada gambar sesudah agar ukurannya sesuai. File HTML yang didownload berisi kedua gambar PNG sebagai data URI serta slider rentang yang dapat diakses dengan keyboard. Animasi wipe GIF disesuaikan dalam ukuran 480 × 480 piksel; animasi wipe WebM direkam selama sekitar dua detik jika browser mendukung perekaman. Berjalan 100% lokal di browser Anda tanpa upload file ke server.

Kategori
Tools gambar
Dijalankan
Di browser Anda
Biaya
Gratis · tanpa daftar
Ketersediaan
Siap digunakan
Slider Sebelum dan SesudahPemrosesan lokal

Berjalan sepenuhnya di browser Anda

Berlaku untuk ekspor raster berikutnya.
Pilih foto sebelum

Klik, seret dan lepas, atau tempel · tetap di perangkat ini

Pilih foto sesudah

Klik, seret dan lepas, atau tempel · tetap di perangkat ini

Foto sebelum menentukan proporsi; foto sesudah dipotong dari tengah agar sesuai. Gambar diam dan HTML berada dalam 1200 × 1200 piksel. Wipe GIF berada dalam 480 × 480 piksel.

Ekspor HTML berisi gambar dan kode slider dalam satu file. Buka file tersebut di browser untuk menggeser slider atau menggunakan tombol panah.

Perbandingan langsung

Pilih kedua foto untuk membandingkannya.

Perekaman WebM tidak tersedia di browser ini. Download wipe GIF sebagai gantinya.

Perbandingan portabel

Kedua gambar dinormalisasi ke proporsi yang sama dan disematkan dalam HTML sebagai URI data PNG. Input range native mengontrol area gambar sesudah yang terlihat dan mendukung tombol panah pada keyboard. File ini berisi JavaScript inline, yang mungkin diblokir oleh kebijakan hosting yang ketat.

Ekspor animasi

Ketersediaan WebM diperiksa sebelum perekaman. GIF menjadi fallback jika WebM atau canvas capture tidak tersedia. Pemeriksaan dukungan MediaRecorder: https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/isTypeSupported_static

Cara menggunakannya

  1. Pilih foto sebelum dan sesudah.
  2. Tambahkan label dan geser slider perbandingan.
  3. Download HTML untuk slider interaktif, atau GIF maupun WebM yang didukung untuk animasi wipe.

Privasi & batasan

Input dan gambar Anda tetap berada di browser. Tidak ada yang di-upload.

Alat terkait

Perbandingan gambarBingkai foto instanPengubah Ukuran Gambar

Pertanyaan umum

Apakah HTML dapat digunakan secara offline?

Ya. File tersebut berisi kedua gambar dan kode slider dalam satu file, tanpa permintaan eksternal.

Mengapa WebM dinonaktifkan?

Browser harus mendukung perekaman WebM dan capture canvas. Jika fitur tersebut tidak tersedia, gunakan animasi wipe GIF.

Apa perbedaannya dengan slider perbandingan gambar?

Halaman ini mengekspor slider HTML yang berfungsi dan animasi wipe. Slider perbandingan gambar mengekspor PNG statis, termasuk tata letak berdampingan.

Alat gratis · berjalan di browser anda · tanpa perlu akun