önce-sonra resim karşılaştırma sliderı ile interaktif görsel gösterimi

Tek bir satırda self-contained embed kodu ile önce-sonra görsellerinizi sergileyin.

1️⃣
Önceki resim
2️⃣
Sonraki resim

Nasıl Çalışır?

Bu araç ile önce ve sonra olmak üzere iki resmi seçip, interaktif bir slider oluşturabilirsiniz. Her iki görsel, tarayıcınızda veri URI formatına çevrilir ve slider kodunun içine gömülür. Oluşan embed kodunu HTML sayfanıza yapıştırdığınızda, herhangi bir ek kütüphane veya sunucuya ihtiyaç duymadan sliderınız anında çalışır.

Slider fonksiyonu, küçük bir vanilla JavaScript bloğu ile sağlanır; dışarıdan hiçbir kaynak yüklenmez. Tüm işlem ve kod üretimi tamamen yerel olarak gerçekleştirilir.

Kalite ve Boyut Sınırlamaları

Resimler maksimum 1400 piksel genişliğine küçültülür ve JPEG olarak yeniden kodlanır. Bu, embed kodunun boyutunu kontrol altında tutmak için yapılır. Boyut arttıkça kod uzunluğu artar, bu nedenle araç tekli karşılaştırmalar için idealdir; çoklu galeriler için pratik değildir.

Resim kalitesinde bir miktar düşüş yaşanabilir. Yüksek çözünürlüklü veya piksel hassasiyetli karşılaştırmalar için, veri URI'larını manuel olarak barındırılan görsel adresleriyle değiştirmeniz önerilir.

Doğru Karşılaştırma İçin İpuçları

En iyi sonucu elde etmek için önce ve sonra resimlerinizin boyutları ve kadrajı birebir aynı olmalıdır. Farklı boyutlarda veya farklı kadrajda olan görsellerde, ikinci resim otomatik olarak birincinin boyutuna esnetilir ve ekranda bir uyarı gösterilir.

Görsellerinizin uyumlu olması, kullanıcıya net ve doğru bir karşılaştırma sunar. Yanlış kadrajlar, karşılaştırmanın yanıltıcı görünmesine sebep olabilir. Bu nedenle yüklemeden önce resimleri uygun şekilde hazırlamanız önemlidir.

Sıkça Sorulan Sorular

Bir sayfada birden fazla karşılaştırma sliderı kullanabilir miyim?

Araç, tekli karşılaştırmalar için tasarlanmıştır. Kod boyutu resim adedine göre hızla büyür, bu yüzden çoklu slider kullanmak pratik değildir. Her slider için ayrı embed kodu oluşturmanız gerekir.

Önce ve sonra resimlerimi nasıl hizalı hale getirebilirim?

Resimlerinizin boyutlarını ve kadrajlarını bir grafik programında eşitlemeniz gerekir. Özellikle aynı piksel ölçüsünde ve aynı perspektifte olmasına dikkat edin; aksi takdirde esnetme sonucu karşılaştırma yanıltıcı olabilir.

Farklı boyut veya oranlardaki resimlerde ne olur?

Araç otomatik olarak ikinci resmi birincinin boyutuna esnetir ve bir uyarı gösterir. Doğru ve temiz bir karşılaştırma için resimlerin birebir aynı ölçülerde olması önerilir.

Sliderda yüksek çözünürlüklü resim kullanabilir miyim?

Embed kodu boyutunun aşırı büyümemesi için resimler 1400 piksel genişliğe sınırlandırılır. Daha yüksek çözünürlük için oluşturulan veri URI'ları yerine sunucunuzda barındırdığınız görsel URL'lerini embed kodunda manuel olarak kullanabilirsiniz.

Slider tüm tarayıcılarda ve CMS platformlarında çalışır mı?

Oluşturulan kod, modern tüm tarayıcılarda ve HTML editörlerinde sorunsuz çalışır. Ekstra eklenti veya kütüphane gerektirmez. Kod tamamen bağımsızdır ve yaygın CMS'lerle uyumludur.

Yüklediğim resimler dışarıya aktarılıyor mu veya kaydediliyor mu?

Hayır, tüm işlemler tarayıcınızda gerçekleşir; hiçbir resim veya veri dışarıya gönderilmez. Gizliliğiniz tam olarak korunur ve dosyalarınız hiçbir sunucuya ulaşmaz.

Bu araçta bir sorun mu var, ya da bir fikriniz mi var? Bize yazın