Perbandingan Gambar

Muat dua gambar dan bandingkan dengan slider seret atau tampilan berdampingan. Sempurna untuk suntingan sebelum/sesudah. Tanpa unggah.

Cara kerja Slider perbandingan gambar

Image Comparison Slider memungkinkan Anda memuat dua gambar berdampingan dan menyeret pembagi vertikal untuk mengungkap lebih banyak gambar satu dan lebih sedikit gambar lainnya. Tata letak sebelum-dan-sesudah ini adalah cara langsung dan mudah untuk menunjukkan perbedaan antara dua versi gambar. Kedua gambar dimuat dari disk lokal Anda menggunakan File API dan dirender di layar oleh browser; tidak ada yang diunggah ke server.

Penggeser menggunakan pendekatan CSS clip-path sehingga transisi antara dua gambar selalu sejajar piksel dan tidak ada pencampuran atau interpolasi di batas. Anda juga dapat beralih ke tampilan layar terbagi yang menampilkan dua gambar dalam panel kiri dan kanan yang tetap. Alat ini berguna untuk membandingkan pengeditan foto, hasil kompresi, iterasi desain, atau dua gambar mana pun di mana Anda perlu melihat perbedaan dengan jelas.

Ditulis oleh Bastien Sulyan

Cara menggunakan Slider perbandingan gambar, langkah demi langkah

Jatuhkan gambar pertama (versi 'sebelum') ke area unggah kiri.
Jatuhkan gambar kedua (versi 'sesudah') ke area unggah kanan.
Seret pembagi ke kiri dan kanan untuk mengungkap lebih banyak dari satu gambar dalam satu waktu.
Beralih ke tampilan terbagi untuk melihat kedua gambar dalam panel tetap jika Anda lebih suka perbandingan statis.
Gunakan tombol layar penuh untuk memaksimalkan perbandingan untuk inspeksi terperinci.

Kasus penggunaan umum

Seorang fotografer membandingkan ekspor RAW asli dengan versi yang diedit untuk mengevaluasi seberapa banyak pengeditan mengubah gambar.
Seorang pengembang memeriksa pasangan gambar terkompresi sebelum-dan-sesudah untuk menilai apakah kehilangan kualitas pada tingkat kompresi tertentu dapat diterima.
Seorang desainer UX mempresentasikan redesign UI dengan menempatkan screenshot antarmuka lama di kiri dan yang baru di kanan untuk tinjauan pemangku kepentingan.
Seorang editor konten memverifikasi bahwa manipulasi gambar (pewarnaan, pemangkasan) konsisten antara thumbnail dan versi ukuran penuh.

Pertanyaan yang sering diajukan

Apakah kedua gambar harus berukuran sama?

Alat ini bekerja terbaik ketika kedua gambar memiliki dimensi yang sama, karena penggeser melapisinya dengan tepat. Jika gambar berbeda ukuran, alat menskalakannya ke ukuran tampilan yang umum. Beberapa ketidaksejajaran dapat muncul di tepi jika rasio aspek berbeda.

Apakah gambar dikirim ke mana pun agar perbandingan berfungsi?

Tidak. Kedua gambar dimuat dari sistem file Anda melalui File API dan digambar ke elemen Canvas di browser Anda. Perbandingan adalah operasi rendering sisi klien. Tidak ada gambar yang meninggalkan perangkat Anda.

Bisakah saya membandingkan gambar dari dua URL berbeda daripada file lokal?

Alat saat ini hanya menerima file lokal. Memuat gambar dari URL jarak jauh akan mengharuskan browser mengambilnya dan akan tunduk pada pembatasan CORS yang banyak host gambar tidak izinkan.

Apakah ada ukuran gambar maksimum yang dapat ditangani perbandingan?

Batasnya adalah memori Canvas browser Anda. Gambar hingga sekitar 20 megapiksel masing-masing ditangani tanpa masalah di sebagian besar perangkat desktop. Gambar yang sangat besar dapat memperlambat rendering atau menyebabkan kesalahan memori pada perangkat keras kelas rendah.

Bisakah saya menyimpan screenshot dari posisi penggeser tertentu?

Alat screenshot sistem operasi Anda (atau fitur screenshot browser di DevTools) adalah cara langsung untuk menangkap posisi penggeser tertentu. Tampilan perbandingan itu sendiri tidak memiliki tombol ekspor bawaan untuk gambar yang digabungkan.

Alat terkait

Jaga semuanya tetap lokal, jelajahi alat pelengkap.

Semua alat gambar