Czym jest diff obrazu?

Diff obrazu porównuje dwie wersje obrazu piksel po pikselu i zaznacza każde miejsce, w którym się różnią. Deweloperzy używają go do testów regresji wizualnej: zrzut ekranu strony wykonany przed zmianą kodu porównuje się ze zrzutem wykonanym po niej, dzięki czemu niezamierzone przesunięcie, brakująca ikona lub zmieniony kolor są widoczne nawet wtedy, gdy na pierwszy rzut oka oba zrzuty wyglądają tak samo.

Opis narzędzia

To narzędzie porównuje dwa obrazy i tworzy obraz diff: różnice są zaznaczane na czerwono na tle wyblakłej kopii pierwszego obrazu. Zlicza różniące się piksele, grupuje pobliskie różnice w obszary i mierzy zajmowaną przez nie powierzchnię. Wygładzone krawędzie tekstu i kształtów są wykrywane jako antyaliasing i pomijane podczas zliczania, dzięki czemu zrzut ekranu wykonany przy użyciu nieco innego renderera czcionek nie jest uznawany za zmianę. Możesz także przeciągać suwak po obu obrazach i jednocześnie powiększać oba.

Funkcje

  • Porównywanie obrazów PNG, JPEG, WebP, GIF, BMP i AVIF
  • Zliczanie różniących się pikseli i wyświetlanie ich udziału w obrazie
  • Grupowanie pobliskich różnic w obszary oraz możliwość obrysowania każdego obszaru na obrazie diff
  • Pomijanie pikseli z antyaliasingiem i oznaczanie ich osobnym kolorem albo zliczanie ich, jeśli wolisz
  • Regulowany próg określający, jak bardzo dwa kolory muszą się różnić, aby zostały uznane za różne
  • Opcjonalny drugi kolor dla pikseli, które stały się ciemniejsze, aby odróżnić dodaną treść od usuniętej
  • Tryb tylko różnic, który rysuje diff na przezroczystym tle
  • Powiększenie do 3200% z zachowaniem ostrych pikseli oraz pobieranie diff jako obrazu PNG
  • Widok z suwakiem, który jednocześnie powiększa i przesuwa oba obrazy, z trybem pełnoekranowym
  • Porównywanie obrazów o różnych rozmiarach przez wyrównanie ich do lewego górnego rogu albo zmianę rozmiaru drugiego obrazu

Jak to działa

Porównanie wykorzystuje pixelmatch — bibliotekę open source, która stanowi podstawę wielu narzędzi do testów wizualnych. Dla każdego piksela mierzy odległość koloru w przestrzeni kolorów YIQ, która — podobnie jak ludzkie oko — nadaje większą wagę jasności niż odcieniowi. Piksel jest uznawany za różny, gdy odległość przekracza ustawiony próg. Zanim pixelmatch zliczy piksel, sprawdza sąsiednie piksele, aby określić, czy jest on częścią krawędzi z antyaliasingiem. Narzędzie odczytuje wartości pikseli zapisane w plikach i ignoruje osadzone profile kolorów, dlatego dwa pliki, które po dekodowaniu zawierają te same piksele, zawsze są zgodne. Wszystko działa w przeglądarce, a obrazy nigdy nie są przesyłane.

Wskazówki

  • W przypadku zrzutów ekranu pozostaw próg na poziomie 0,1. Ustaw wartość 0, aby wykryć każdą zmianę, w tym artefakty kompresji JPEG; zwiększ próg, aby ignorować niewielkie przesunięcia kolorów.
  • Zdjęcie zapisane dwukrotnie jako JPEG różni się w tysiącach pikseli w niewielkim stopniu. Jeśli wynik nie wykazuje różnic przekraczających próg, obrazy wyglądają tak samo.
  • Włącz opcję Oznacz ciemniejsze piksele, aby zobaczyć, która treść została dodana, a która usunięta, ponieważ tekst na jasnym tle staje się ciemniejszy w miejscu, w którym się pojawia.
  • W przypadku plików GIF porównywana jest tylko pierwsza klatka.