Yükleme yok, %100 yerel, hesap yok

Görüntü Karşılaştırma

İki görüntü yükleyin ve sürükleme kaydırıcısı veya yan yana görünümle karşılaştırın. Önce/sonra düzenlemeleri için mükemmel. Yükleme yok.

Görüntü karşılaştırma kaydırıcısı nasıl çalışır

Görüntü Karşılaştırma Kaydırıcısı, iki görüntüyü yan yana yüklemenize ve bir görüntüyü daha fazla, diğerini daha az ortaya çıkarmak için dikey bir bölücü sürüklemenize olanak tanır. Bu öncesi-sonrası düzeni, bir görüntünün iki sürümü arasındaki farkı göstermenin doğrudan ve düşük sürtünmeli bir yoludur. Her iki görüntü de File API kullanılarak yerel diskinizden yüklenir ve tarayıcı tarafından ekranda oluşturulur; hiçbir şey sunucuya yüklenmez.

Kaydırıcı CSS klip yolu yaklaşımı kullanır, bu nedenle iki görüntü arasındaki geçiş her zaman piksel hizalandırılmıştır ve sınırda karıştırma veya enterpolasyon yoktur. Ayrıca iki görüntüyü sabit sol ve sağ panellerde gösteren bölünmüş ekran görünümüne geçirebilirsiniz. Araç, fotoğraf düzenlemelerini, sıkıştırma sonuçlarını, tasarım yinelemelerini veya farkları açıkça görmeniz gereken iki görüntüyü karşılaştırmak için kullanışlıdır.

Yazan: Bastien Sulyan

Görüntü karşılaştırma kaydırıcısı nasıl kullanılır, adım adım

  1. Birinci görüntüyü (öncesi sürümü) sol yükleme alanına sürükleyin.
  2. İkinci görüntüyü (sonrası sürümü) sağ yükleme alanına sürükleyin.
  3. Bir seferde bir görüntüyü daha fazla ortaya çıkarmak için bölücüyü sola ve sağa sürükleyin.
  4. Statik karşılaştırma tercih ederseniz her iki görüntüyü sabit panellerde görmek için bölünmüş görünüme geçin.
  5. Ayrıntılı inceleme için karşılaştırmayı büyütmek üzere tam ekran düğmesini kullanın.

Yaygın kullanım örnekleri

  • Bir fotoğrafçı, düzenlemenin görüntüyü ne kadar değiştirdiğini değerlendirmek için orijinal RAW dışa aktarımını rötuşlu sürümle karşılaştırıyor.
  • Bir geliştirici, belirli bir sıkıştırma seviyesindeki kalite kaybının kabul edilebilir olup olmadığını değerlendirmek için sıkıştırılmış görüntülerin öncesi-sonrası çiftini kontrol ediyor.
  • Bir UX tasarımcısı, paydaş incelemesi için sol tarafa eski arayüz ekran görüntüsünü, sağ tarafa yenisini yerleştirerek bir UI yeniden tasarımı sunuyor.
  • Bir içerik editörü, bir küçük resim ve tam boyutlu sürüm arasında görüntü işlemenin (renk derecelendirme, kırpma) tutarlı olduğunu doğruluyor.

Sık sorulan sorular

İki görüntünün aynı boyutta olması gerekiyor mu?

Araç, her iki görüntü de aynı boyutlara sahip olduğunda en iyi sonucu verir çünkü kaydırıcı bunları tam olarak üst üste bindirir. Görüntüler boyut bakımından farklıysa araç bunları ortak bir görüntüleme boyutuna ölçeklendirir. En boy oranları farklıysa kenarlarda bazı hizalama sorunları görünebilir.

Karşılaştırmanın çalışması için görüntüler herhangi bir yere gönderiliyor mu?

Hayır. Her iki görüntü de File API aracılığıyla dosya sisteminizden yüklenir ve tarayıcınızdaki Canvas öğelerine çizilir. Karşılaştırma, istemci tarafı bir oluşturma işlemidir. Hiçbir görüntü cihazınızdan çıkmaz.

Yerel dosyalar yerine iki farklı URL'deki görüntüleri karşılaştırabilir miyim?

Mevcut araç yalnızca yerel dosyaları kabul eder. Uzak URL'lerden görüntü yüklemek, tarayıcının bunları almasını gerektirir ve birçok görüntü sunucusunun izin vermediği CORS kısıtlamalarına tabi olur.

Karşılaştırmanın işleyebileceği maksimum görüntü boyutu nedir?

Sınır tarayıcınızın Canvas belleğidir. Her biri 20 megapiksele kadar olan görüntüler çoğu masaüstü cihazda herhangi bir sorun çıkarmadan işlenir. Çok büyük görüntüler düşük donanımlı cihazlarda oluşturmayı yavaşlatabilir veya bellek hatasına neden olabilir.

Belirli bir kaydırıcı konumunun ekran görüntüsünü kaydedebilir miyim?

İşletim sisteminizin ekran görüntüsü aracı (veya tarayıcının DevTools'daki ekran görüntüsü özelliği), belirli bir kaydırıcı konumunu yakalamanın doğrudan yoludur. Karşılaştırma görünümünün kendisinde birleştirilmiş görüntü için yerleşik bir dışa aktarma düğmesi yoktur.

İlgili araçlar

Her şeyi yerel tutun, tamamlayıcı araçları keşfedin.

Tüm görsel araçları