Mikä on kuvavertailu?

Kuvavertailussa kuvan kahta versiota verrataan pikseli pikseliltä, ja kaikki eroavat kohdat merkitään. Kehittäjät käyttävät sitä visuaaliseen regressiotestaukseen: sivun kuvakaappausta ennen koodimuutosta verrataan muutoksen jälkeen otettuun kuvakaappaukseen, jolloin tahaton siirtymä, puuttuva kuvake tai muuttunut väri erottuu, vaikka kuvakaappaukset näyttäisivät ensi silmäyksellä samoilta.

Työkalun kuvaus

Tämä työkalu vertaa kahta kuvaa ja piirtää vertailukuvan: erot näytetään punaisina ensimmäisen kuvan haalistuneen version päällä. Se laskee eroavien pikseleiden määrän, ryhmittelee lähekkäiset erot alueiksi ja mittaa niiden peittämän pinta-alan. Tasoitettujen tekstien ja muotojen reunat tunnistetaan antialiasoinniksi ja jätetään laskennan ulkopuolelle, joten hieman eri fonttirenderöijällä otettu kuvakaappaus ei näy muutoksena. Voit myös vetää liukusäädintä kuvien poikki ja zoomata molempia samanaikaisesti.

Ominaisuudet

  • Vertaa PNG-, JPEG-, WebP-, GIF-, BMP- ja AVIF-kuvia
  • Laskee eroavat pikselit ja näyttää niiden osuuden kuvasta
  • Ryhmittelee lähekkäiset erot alueiksi ja voi rajata jokaisen alueen vertailukuvassa
  • Ohittaa antialiasoidut pikselit ja merkitsee ne erillisellä värillä tai laskee ne mukaan, jos niin haluat
  • Säädettävä kynnysarvo sille, kuinka paljon kahden värin on erottava, jotta ne lasketaan erilaisiksi
  • Valinnainen toinen väri tummemmiksi muuttuneille pikseleille, jotta lisätty sisältö voidaan erottaa poistetusta sisällöstä
  • Vain erot -tila, jossa vertailu piirretään läpinäkyvälle taustalle
  • Zoomaus jopa 3200 prosenttiin terävillä pikseleillä sekä vertailun lataaminen PNG-kuvana
  • Liukusäädinnäkymä, jossa molempia kuvia zoomataan ja panoroidaan yhdessä, sekä koko näytön tila
  • Erikokoisten kuvien vertailu tasaamalla ne vasemman yläkulman mukaan tai muuttamalla toisen kuvan kokoa

Näin se toimii

Vertailussa käytetään pixelmatch-kirjastoa, joka on monien visuaalisten testityökalujen taustalla oleva avoimen lähdekoodin kirjasto. Jokaisen pikselin kohdalla se mittaa värien etäisyyden YIQ-väriavaruudessa, jossa kirkkaus painotetaan sävyä enemmän silmän tavoin. Pikseli lasketaan erilaiseksi, kun etäisyys ylittää kynnysarvon. Ennen pikselin laskemista pixelmatch tarkistaa naapuripikselit selvittääkseen, kuuluuko se antialiasoituun reunaan. Työkalu lukee tiedostoihin tallennetut pikseliarvot ja ohittaa upotetut väriprofiilit, joten kaksi samaan pikselisisältöön purkautuvaa tiedostoa täsmäävät aina. Kaikki suoritetaan selaimessasi, eikä kuvia koskaan ladata palvelimelle.

Vinkkejä

  • Pidä kuvakaappausten kynnysarvona 0,1. Laske se arvoon 0, jos haluat havaita kaikki muutokset, myös JPEG-pakkauksen aiheuttaman kohinan; nosta sitä, jos haluat ohittaa pienet värimuutokset.
  • Kahdesti JPEG-muodossa tallennettu valokuva eroaa tuhansissa pikseleissä hieman. Jos tuloksessa ei ilmoiteta kynnysarvon ylittäviä eroja, kuvat näyttävät samoilta.
  • Ota käyttöön Tummempien pikselien merkitseminen nähdäksesi, mitä sisältöä lisättiin ja mitä poistettiin, sillä vaalealla taustalla oleva teksti muuttuu tummemmaksi kohtaan ilmestyessään.
  • GIF-tiedostoista verrataan vain ensimmäistä kehystä.