Artikel ini berisi tautan afiliasi. Jika kamu membeli lewat tautan tersebut, kami bisa mendapat komisi tanpa biaya tambahan untukmu. Pengungkapan lengkap →
📸 Tangkapan Layar Oktober 2026·5 menit membaca

Pembuat gambar sebelum dan sesudah: bandingkan dua tangkapan layar atau foto berdampingan (PNG atau PDF)

Tunjukkan perubahannya sekali lihat, bukan membuat orang bolak-balik antara dua file. Begini cara menaruh dua gambar berdampingan, atau satu di atas yang lain, lalu menyimpan hasilnya.

Dua versi halaman yang sama, yang penuh dengan label Before dan yang bersih dengan label After, berdampingan, dengan format ekspor PNG, JPG, WebP, dan PDF di bawahnya

Untuk membuat gambar sebelum dan sesudah, buka gambar pertama di editor ekstensi gratis Scrollshot (tangkap, atau klik Upload), klik Before / After, pilih Use the current image as “Before”, lalu edit gambarnya atau klik Upload After untuk membawa gambar kedua. Tekan Done, pilih Side by side, Stacked, atau Compact, lalu ekspor sebagai PNG, JPG, WebP, atau PDF, atau salin. Gambar masuk, perbandingan jadi keluar. Semuanya tetap di browsermu dan tidak ada yang diunggah.

Kenapa satu gambar perbandingan lebih baik daripada dua file terpisah

Kamu sudah memperbaiki tata letak, menurunkan dua kilo, atau akhirnya mengecat pagar taman. Sekarang kamu mengirim dua gambar, dan penerimanya harus bolak-balik lalu menebak apa yang berubah. Gambar sebelum dan sesudah menaruh keduanya dalam satu bingkai, jadi bedanya kelihatan dalam sedetik. Gambarnya juga muat di pesan, slide, atau laporan sebagai satu gambar, yang jauh lebih sulit hilang daripada dua.

Cara membuat gambar sebelum dan sesudah, langkah demi langkah

  1. Pasang Scrollshot. Ambil dari Chrome Web Store. Gratis dan tanpa akun.
  2. Buka gambar pertamamu di editor. Tangkap halaman (halaman penuh, area terlihat, wilayah, atau elemen), atau klik Upload dan pilih foto atau tangkapan layar dari komputermu.
  3. Klik Before / After di panel kiri editor.
  4. Tentukan apa itu “Before”. Pilih Use the current image as “Before” untuk membiarkannya apa adanya, atau Edit the “Before” first kalau kamu mau mengubahnya sedikit sebelum perbandingan dimulai.
  5. Buat “After”-nya. Edit gambar yang sama (panah, blur, teks, latar belakang) atau klik Upload After ↑ dan pilih gambar kedua. Spanduk kecil di atas menunjukkan kamu ada di langkah mana.
  6. Klik Done ✓. Jendela “Arrange your Before / After” terbuka dengan pratinjau langsung.
  7. Pilih tata letak. Pilih Side by side, Stacked, atau Compact, dan nyalakan atau matikan Labels dan Divider.
  8. Ekspor. Klik Copy untuk menempelkannya langsung ke chat, atau simpan sebagai PNG, JPG, WebP, atau PDF. Save to History menyimpannya di galerimu, di folder yang kamu pilih.

Berdampingan, bertumpuk, atau ringkas: tata letak mana yang dipilih

  • Side by side. Dua gambar berdiri berdampingan pada tinggi yang sama. Paling cocok untuk gambar lebar, halaman web, dan foto.
  • Stacked. Satu di atas yang lain pada lebar yang sama. Paling cocok untuk gambar tinggi, tangkapan layar ponsel, dan chat tempat gambar lebar jadi gepeng.
  • Compact. Kedua gambar mengecil dan berdiri berdampingan di kanvas 16:9. Berguna untuk slide, thumbnail video, dan tempat yang cocok dengan bingkai lebar.
  • Labels. Kata BEFORE dan AFTER digambar di atas gambar. Matikan kalau kamu lebih suka kata-katamu sendiri.
  • Divider. Garis tipis di antara dua gambar, solid atau putus-putus.

Tips kecil: kedua gambar tidak perlu berukuran sama. Scrollshot menyelaraskannya pada tinggi bersama (side by side) atau lebar bersama (stacked), jadi kamu bisa membandingkan tangkapan layar kecil dengan foto besar tanpa mengubah ukuran dulu.

PNG, JPG, WebP, atau PDF: mana yang diekspor

PNG paling tajam dan pilihan terbaik untuk tangkapan layar berisi teks. JPG menghasilkan file lebih kecil dan cocok untuk foto. WebP yang terkecil dari ketiganya. PDF menaruh perbandingan di satu halaman, praktis untuk dikirim lewat email, dicetak, atau diberikan ke klien, tapi itu gambar perbandingan, jadi kata di dalamnya tidak bisa diseleksi. Copy melewati file dan menempelkan gambar langsung ke pesan atau dokumen.

Siapa yang membuat gambar sebelum dan sesudah

  • Orang yang memantau kemajuan, untuk kebugaran, renovasi, atau kebun yang akhirnya selesai.
  • Desainer web dan developer, yang menunjukkan desain lama di samping yang baru, atau bug di samping perbaikannya.
  • Siapa saja yang me-retouch atau mengedit foto, dan ingin menampilkan yang asli dan hasilnya bersama.
  • Guru dan penulis panduan, yang menunjukkan cara yang salah di samping yang benar.
  • Tim dukungan, yang menunjukkan apa yang dilihat pelanggan di samping apa yang seharusnya dilihat.

Padukan dengan alat lain: tambahkan panah dan langkah bernomor ke After supaya perubahannya mustahil terlewat, atau kaburkan bagian pribadi di kedua gambar lebih dulu.

Perlu diketahui sebelum mulai

  • Hanya gambar yang masuk, bukan file PDF. Upload menerima file gambar seperti PNG, JPG, atau WebP. PDF adalah pilihan ekspor, bukan impor.
  • Dua gambar per perbandingan. Satu Before dan satu After. Untuk lebih banyak, buat beberapa perbandingan.
  • Label BEFORE dan AFTER berbahasa Inggris. Matikan Labels kalau kamu mau kata-katamu sendiri, dan tambahkan dengan alat Text.
  • Crop presets dan Save terkunci selama kamu ada di langkah-langkahnya. Keduanya kembali setelah kamu selesai atau membatalkan Before / After.
  • Semuanya gratis. Before / After dan semua format ekspor tidak butuh upgrade atau akun.
  • Tidak bisa menangkap halaman bawaan Chrome atau Chrome Web Store. Coba di situs web biasa.

FAQ

Buka gambar pertama di editor Scrollshot, klik Before / After, pilih memakai gambar saat ini sebagai Before, lalu edit atau unggah gambar kedua sebagai After. Klik Done, pilih tata letak, dan ekspor sebagai PNG, JPG, WebP, atau PDF.

Bisa. Pilih tata letak Side by side dan kedua gambar berdiri berdampingan pada tinggi yang sama. Stacked menaruh satu di atas yang lain, dan Compact memuat keduanya di kanvas 16:9.

Tidak. Upload menerima file gambar seperti PNG, JPG, dan WebP. Kamu bisa mengekspor perbandingan yang sudah jadi sebagai PDF, tapi PDF tidak bisa dimuat sebagai gambar.

Tidak. Scrollshot menyelaraskannya pada tinggi atau lebar bersama, jadi tangkapan layar kecil dan foto besar bisa dipakai bersama.

Bisa. Matikan Labels di jendela pengaturan. Kamu bisa menambahkan kata-katamu sendiri dengan alat Text sebelum mengklik Done.

Ya. Before / After dan semua format ekspor gratis, tanpa akun.

Tidak. Scrollshot bekerja secara lokal di browsermu, jadi gambarmu tidak pernah meninggalkan komputermu.

Scrollshot logo

Scrollshot — Tangkap Persis yang Kamu Butuhkan

Dibuat oleh GetPlugzz. Hanya pemrosesan lokal: tidak ada yang diunggah, tidak ada yang dilacak.

PASANG
Bluehost hosting

Masih bingung soal hosting?

AI builder dari Bluehost sudah termasuk hosting dengan titik awal yang dibuat AI, jadi kamu lewati halaman kosong. Cek halaman mereka untuk paket dan harga terbaru sebelum memutuskan, karena penawaran bisa berubah.

Mulai membangun → (paid link)
Weblium website builder

Lebih suka builder daripada WordPress?

Weblium memungkinkan kamu membuat situs tanpa kode, dengan mengedit halamannya langsung. Cek halaman mereka untuk paket dan harga terbaru sebelum memutuskan, karena penawaran bisa berubah.

Buat situs → (paid link)