Kısa cevap
İki görseli aşağıdaki araca aynı anda ya da arka arkaya bırak. İlk bıraktığın referans olur. Görünüm'de Kaydırıcı ile ikisi arasında sürükle, Yan yana ile ikisini de tam olarak gör, Fark ile bir ısı haritası al: değişmeyen yerler soluk griye döner, değişen pikseller sarıdan (küçük değişiklik) kırmızıya (büyük değişiklik) doğru parlar. Görsellerin altında değişen piksellerin oranını, sayısını, en büyük farkı ve bütün değişiklikleri içine alan dikdörtgeni görürsün. Haritayı kaydetmek için Farkı indir (PNG) düğmesine bas.
Burada dene: Görsel karşılaştırma
Aracın tam sayfasını açPiksel karşılaştırması ne zaman işe yarar?
- Tasarım kontrolü: bir afişin, simgenin ya da çizimin yeni dışa aktarımında istenen düzeltme dışında bir şey değişti mi?
- Görsel test ve regresyon kontrolü: bir kod değişikliğinden önce ve sonra bir uygulama ekranının ya da web sayfasının ekran görüntüsünü karşılaştır; kaymış düğmeleri, değişmiş yazı tiplerini ya da eksik öğeleri yakala.
- Fotoğraf düzenleme: bir rötuşun, renk düzeltmesinin ya da filtrenin tam olarak neyi değiştirdiğini gör.
- Sıkıştırma ve büyütme: sıkıştırılmış ya da büyütülmüş bir görseli özgünüyle karşılaştır, kalitenin nerede kaybolduğuna karar ver.
- Farkı bul oyunları: bir belge taramasının, haritanın ya da bulmaca resminin iki sürümü arasındaki küçük değişiklikleri bul.
Kaydırıcı, yan yana ya da fark
Üç görünüm farklı sorulara cevap verir. Kaydırıcı ikinci görseli birincinin tam üstüne koyar; tutamacı sürükledikçe biri ya da diğeri görünür. Gözün sürüklerken hareket eden şeyi fark etmekte çok iyidir; bu yüzden renk, netlik ve rötuş için en sezgisel görünüm budur.
Yan yana, iki görseli de kendi oranlarında eksiksiz gösterir. Genel izlenimin önemli olduğu durumlarda, örneğin iki sayfa düzeni seçeneğinde, ve farklı şekilli görsellerde işe yarar.
Fark nesnel görünümdür. İki görselin her pikselini karşılaştırır ve gözün kaçıracağı tek piksellik bir değişikliği bile atlamaz. Değişikliklerin etrafındaki kesikli çerçeve, büyük bir ekran görüntüsünde sadece bir köşedeki birkaç piksel farklı olsa bile onları bulmana yardım eder. Bulduğun bir değişikliğin gerçekten önemli olup olmadığına karar vermek için sonra yeniden Kaydırıcı'ya geç.
| Soru | En iyi görünüm |
|---|---|
| Yeni sürüm daha mı iyi görünüyor? | Kaydırıcı |
| İki düzenden hangisi işe yarıyor? | Yan yana |
| Bir şey değişti mi, tam olarak nerede? | Fark |
| Rakamlarla ne kadar değişti? | Fark (istatistikler) |
Rakamları okumak
Değişen pikseller, farkı eşiğin üzerinde olan kısmın görselin tamamına oranıdır. Piksel sayısı aynı şeyin tam sayı olarak karşılığıdır. En büyük fark, en güçlü değişikliği 0 (aynı) ile 100 (beyaza karşı siyah) arasında bir ölçekte gösterir. Değişen alan, değişen bütün pikselleri içine alan en küçük dikdörtgendir; boyutu ve sol üst köşesinin konumu birinci görselin pikselleriyle verilir.
Bir pikselin farkı, renk kanallarından ya da saydamlığından herhangi birindeki en büyük değişikliktir. Yani açık griden açık maviye dönen bir piksel, parlaklığı benzer olsa bile açıkça değişmiş sayılır; sadece saydamlığın değişmesi de fark sayılır.
Eşik ve sıkıştırma gürültüsü
Aynı görünen iki görsel binlerce pikselde farklı olabilir. JPG ve WebP sıkıştırması bir dosya her kaydedildiğinde piksel değerlerini biraz değiştirir; yeniden boyutlandırma, renk profili dönüşümleri ve farklı ölçekleme ayarıyla alınan ekran görüntüleri de öyle. Bu görünmez değişiklikler çoğu karşılaştırma için gürültüdür.
Eşik, göz ardı edilecek farkın büyüklüğünü 0 ile 100 arasında belirler. 0'da her değişiklik sayılır. 5 ile 15 arası bir değer sıkıştırma gürültüsünü gizler, kaymış öğeler, yeni yazı ya da farklı bir renk gibi gerçek değişiklikleri bırakır. Aynı tasarım programından alınmış iki kayıpsız PNG'yi karşılaştırıyorsan 0'da tut; iki JPG'yi karşılaştırıyorsan 10'dan başla.
Örnek bir iş akışı: web sayfasında değişiklik kontrolü
Bir web sitesinde ya da uygulamada değişiklik yaptıysan ve başka bir yerin bozulmadığından emin olmak istiyorsan şöyle ilerleyebilirsin. Değişiklikten önce sayfanın ekran görüntüsünü al. Tarayıcı penceresinin boyutunu ve yakınlaştırma oranını not et ya da hiç değiştirme. Değişikliği yaptıktan sonra aynı sayfanın, aynı pencere boyutunda yeni bir ekran görüntüsünü al.
İki görüntüyü araca bırak, Fark görünümüne geç ve Eşik'i 0'da bırak; ekran görüntüleri kayıpsız PNG olduğu için gürültü olmaz. Kesikli çerçeve beklediğin yerin dışında bir değişiklik gösteriyorsa, örneğin yalnızca düğme rengini değiştirdin ama alttaki bir başlık da kaydıysa, Kaydırıcı'ya geçip neyin oynadığına bak. Sonra Farkı indir (PNG) ile haritayı kaydet ve değişen piksel oranıyla birlikte hata kaydına ya da ekibine gönderdiğin nota ekle. Aynı yöntem bir sıkıştırma ayarının kaliteyi nerede bozduğunu görmek için de işe yarar: özgün fotoğrafı ve sıkıştırılmış halini karşılaştır, Eşik'i 10 civarında tut.
Farklı boyuttaki görseller
Piksel karşılaştırması için iki görselin de aynı ızgarada olması gerekir. İkinci görselin boyutu farklıysa araç onu birincinin boyutuna ölçekler ve bunu sonuçların altında yazar. Oranlar da farklıysa ikinci görsel esnetilir, not bunu da söyler. Ölçekleme kenarlar boyunca küçük farklar oluşturur; bu yüzden kesin kontroller için boyutları aynı olan görselleri karşılaştır, örneğin aynı pencere boyutunda ve aynı yakınlaştırmada alınmış ekran görüntülerini.
Yer değiştir, ikinci görseli referans yapar. Görseller cihazından hiç çıkmaz: ikisi de tarayıcında açılır ve karşılaştırılır; bu sayede gizli tasarımları ve henüz yayınlanmamış ekranları yüklemeden karşılaştırabilirsin.