Görüntü farkı nedir?

Görüntü farkı, bir görüntünün iki sürümünü piksel piksel karşılaştırır ve farklı oldukları her yeri işaretler. Geliştiriciler bunu görsel regresyon testi için kullanır: Bir sayfanın kod değişikliğinden önce alınan ekran görüntüsü, değişiklikten sonra alınan görüntüyle karşılaştırılır. Böylece, iki ekran görüntüsü ilk bakışta aynı görünse bile istenmeyen bir kayma, eksik bir simge veya değişen bir renk kolayca fark edilir.

Araç açıklaması

Bu araç iki görüntüyü karşılaştırır ve bir fark görüntüsü oluşturur: Farkları, ilk görüntünün soluklaştırılmış bir kopyası üzerinde kırmızı renkte gösterir. Farklı pikselleri sayar, birbirine yakın farkları bölgeler hâlinde gruplandırır ve kapladıkları alanı ölçer. Yumuşatılmış metin ve şekil kenarları kenar yumuşatma olarak algılanır ve sayıma dâhil edilmez. Böylece, biraz farklı bir yazı tipi oluşturucusuyla alınan ekran görüntüsü değişiklik olarak görünmez. Ayrıca iki görüntü üzerinde aynı anda yakınlaştırma yaparak aralarında bir kaydırıcıyı sürükleyebilirsiniz.

Özellikler

  • PNG, JPEG, WebP, GIF, BMP ve AVIF görüntülerini karşılaştırma
  • Farklı pikselleri sayma ve bunları görüntünün oranı olarak gösterme
  • Birbirine yakın farkları bölgeler hâlinde gruplandırma ve fark görüntüsünde her bölgenin çevresini çizebilme
  • Kenar yumuşatılmış pikselleri atlama ve bunları ayrı bir renkle işaretleme veya tercih ederseniz sayıma dâhil etme
  • İki rengin farklı sayılabilmesi için aralarındaki farkın ne kadar olması gerektiğini belirleyen ayarlanabilir eşik
  • İçeriğin eklenip kaldırıldığını ayırt etmek için koyulaşan piksellere yönelik isteğe bağlı ikinci renk
  • Fark görüntüsünü şeffaf bir arka plan üzerinde oluşturan yalnızca farklar modu
  • Keskin piksellerle %3200'e kadar yakınlaştırma ve fark görüntüsünü PNG görüntüsü olarak indirme
  • Her iki görüntüyü birlikte yakınlaştırıp kaydıran, tam ekran moduna sahip kaydırıcı görünümü
  • Farklı boyutlardaki görüntüleri sol üstten hizalayarak veya ikinci görüntüyü yeniden boyutlandırarak karşılaştırma

Nasıl çalışır?

Karşılaştırma, birçok görsel test aracının temelindeki açık kaynaklı kütüphane olan pixelmatch'i kullanır. Her piksel için, gözün yaptığı gibi parlaklığa renkten daha fazla ağırlık veren YIQ renk uzayındaki renk mesafesini ölçer. Mesafe eşikten yüksek olduğunda piksel farklı kabul edilir. pixelmatch, bir pikseli saymadan önce, onun kenar yumuşatılmış bir kenarın parçası olup olmadığını anlamak için komşu pikselleri kontrol eder. Araç, dosyalarda depolanan piksel değerlerini okur ve gömülü renk profillerini yok sayar. Bu nedenle aynı piksellere çözümlenen iki dosya her zaman eşleşir. Tüm işlemler tarayıcınızda gerçekleştirilir ve görüntüler hiçbir zaman yüklenmez.

İpuçları

  • Ekran görüntüleri için eşiği 0,1 olarak bırakın. JPEG sıkıştırma gürültüsü de dâhil olmak üzere her değişikliği yakalamak için değeri 0'a düşürün; küçük renk değişimlerini yok saymak için yükseltin.
  • JPEG olarak iki kez kaydedilen bir fotoğraf, binlerce pikselde çok küçük miktarlarda farklılık gösterir. Sonuç, eşik değerinin üzerinde fark olmadığını söylüyorsa görüntüler aynı görünür.
  • Hangi içeriğin eklendiğini ve hangisinin kaldırıldığını görmek için Koyulaşan pikselleri işaretle seçeneğini açın; açık renkli bir arka plan üzerindeki metin, göründüğü yerde daha koyu hâle gelir.
  • GIF dosyaları için yalnızca ilk kare karşılaştırılır.