Cara Kerja Slider Perbandingan Gambar
Slider ini memungkinkan Anda menampilkan dua gambar sebelum dan sesudah secara interaktif. Semua proses terjadi di browser Anda; gambar diubah menjadi data URI dan langsung dimasukkan ke kode embed yang dihasilkan. Tidak memerlukan library eksternal, CDN, maupun server.
Slider menggunakan JavaScript ringan yang sudah termasuk dalam kode embed. Kedua gambar dibatasi maksimal 1400 piksel lebar dan dikonversi ke format JPEG untuk menjaga ukuran kode tetap efisien.
Hal yang Harus Diperhatikan Saat Membuat Slider
Jika gambar yang Anda masukkan memiliki ukuran atau rasio aspek berbeda, sistem akan menyesuaikan dan memperingatkan Anda. Gambar kedua akan dipaksa menyesuaikan dimensi gambar pertama, sehingga hasil perbandingan bisa kurang akurat jika framing berbeda.
Kualitas gambar akan sedikit menurun akibat pengubahan ukuran dan kompresi JPEG, terutama jika gambar asli sangat besar. Untuk perbandingan pixel yang presisi, Anda bisa mengganti data URI dalam kode dengan URL gambar yang di-host sendiri.
Kapan dan Bagaimana Menggunakan Slider Ini
Slider ini ideal untuk blogger, penulis dokumentasi, dan editor web yang ingin menampilkan perbandingan sebelum-sesudah dalam satu blok pada halaman. Tidak cocok untuk galeri atau banyak perbandingan sekaligus karena ukuran kode embed akan membesar.
Pastikan kedua gambar memiliki framing dan dimensi yang sama agar hasil perbandingan tidak menyesatkan. Semua pemrosesan tetap lokal, sehingga privasi terjaga dan tidak ada data yang dikirim ke server.
Pertanyaan yang Sering Diajukan
Bisakah saya membuat banyak slider perbandingan gambar dalam satu halaman?
Secara teknis bisa, namun ukuran embed code akan semakin besar untuk setiap slider karena semua data gambar dan kode dimasukkan. Untuk galeri banyak gambar, lebih baik gunakan metode lain atau hosting gambar secara eksternal.
Bagaimana cara memastikan gambar before dan after sejajar dengan benar?
Pastikan kedua gambar memiliki dimensi dan framing identik sebelum dimasukkan. Jika framing berbeda, hasil perbandingan bisa misleading karena gambar akan distretch agar sama ukuran.
Apa yang terjadi jika gambar before dan after berukuran berbeda?
Alat akan memperingatkan dan memaksa gambar kedua menyesuaikan dimensi gambar pertama. Ini bisa membuat perbandingan kurang akurat, sebaiknya gunakan gambar dengan ukuran dan proporsi sama.
Apakah bisa menggunakan gambar resolusi tinggi di slider?
Semua gambar akan di-resize maksimal 1400 piksel dan dikonversi ke JPEG agar embed code tetap ringan. Jika ingin kualitas lebih tinggi, ganti data URI dengan link gambar yang di-host sendiri setelah kode didapat.
Apakah slider ini kompatibel dengan semua browser dan CMS?
Slider menggunakan JavaScript sederhana tanpa library eksternal, sehingga kompatibel di hampir semua browser modern dan CMS yang mendukung HTML dan JavaScript.
Apakah gambar saya diupload atau disimpan di server ToolMole?
Tidak. Semua pemrosesan dan pembuatan kode terjadi lokal di perangkat Anda, tanpa upload atau transfer data ke server mana pun.
Ada masalah atau ide untuk alat ini? Kirim masukan