Jak porovnat obrázky a najít rozdíly

Designér mi poslal novou verzi mockupu a já jsem nevěděl co změnil. Textový diff nepomůže, tady potřebuješ porovnat pixel po pixelu. Tady jsou nástroje co na to používám.

Jak to funguje

Image diff prochází oba obrázky a porovnává každý pixel. Kde se liší RGB hodnoty, tam to zvýrazní. Výsledek může být:

• Diff maska - černobílý obrázek kde bílá = změna
• Overlay - barevné zvýraznění přes originál
• Side by side - vedle sebe
• Blikání - střídání obou verzí

Kdy to potřebuju

Design:

• Co změnil designér oproti minulé verzi?
• Sedí to na mobilu stejně jako na desktopu?

QA testování:

• Nerozbil jsem něco v UI po deploymentu?
• Vypadá to stejně v Chrome a Firefox?

Fotky:

• Co změnila retuš?
• Změnilo se něco v krajině mezi fotkami?

Metoda 1: Online nástroje pro porovnání obrázků

Diffchecker (Image Compare)

Populární online nástroj s podporou image diff.

Postup:

1. Přejděte na diffchecker.com/image-diff
2. Nahrajte první obrázek (Original)
3. Nahrajte druhý obrázek (Changed)
4. Klikněte na "Find Difference"

Funkce:

• Fade – plynulé prolínání mezi obrázky
• Slide – posuvník pro porovnání
• Diff – zvýraznění rozdílů červeně
• Side by side – obrázky vedle sebe

Výhody: ✅ Zdarma pro základní použití ✅ Intuitivní rozhraní ✅ Více zobrazovacích režimů

Nevýhody: ❌ Omezení velikosti souborů v free verzi ❌ Vyžaduje nahrání na server

ImageMagick Compare (online verze)

Online rozhraní pro legendární knihovnu ImageMagick.

Funkce:

• Přesné pixel-by-pixel porovnání
• Nastavitelná tolerance
• Různé metriky podobnosti (RMSE, MAE, PSNR)

Resemble.js Demo

Online demo knihovny Resemble.js pro vizuální porovnání.

Speciální funkce:

• Ignorování anti-aliasingu
• Nastavení barvy zvýraznění
• Procentuální vyjádření rozdílů

Metoda 2: Desktopové aplikace

GIMP (zdarma, open-source)

Profesionální grafický editor s možností porovnání obrázků.

Postup v GIMPu:

1. Otevřete oba obrázky jako vrstvy
2. Nastavte horní vrstvu na režim "Difference"
3. Oblasti se změnami se zobrazí jako nenulové hodnoty

Výhody: ✅ Zcela zdarma ✅ Profesionální možnosti úprav ✅ Funguje offline

Nevýhody: ❌ Složitější pro začátečníky ❌ Vyžaduje instalaci

Adobe Photoshop

Profesionální nástroj s pokročilými funkcemi.

Postup:

1. Otevřete oba obrázky
2. Zkopírujte druhý obrázek jako novou vrstvu
3. Nastavte blend mode na "Difference"
4. Bílé oblasti = rozdíly

Tipy pro Photoshop:

• Použijte "Levels" pro zvýraznění jemných rozdílů
• "Threshold" pro binární diff masku
• Akce (Actions) pro automatizaci

Beyond Compare

Komerční nástroj se silnou podporou image diff.

Funkce:

• Pixel-level porovnání
• Tolerance nastavení
• Overlay a side-by-side režimy
• Porovnání celých adresářů obrázků

Cena: cca 70 USD (jednorázově)

Metoda 3: Nástroje pro vývojáře

Percy (BrowserStack)

Cloudová platforma pro visual testing.

Použití:

// Percy s Cypress
cy.percySnapshot('Homepage');

Funkce:

• Automatické screenshoty během testů
• Inteligentní detekce změn
• Integrace s CI/CD pipeline
• Review workflow pro týmy

Cena: Od free tier (5 000 screenshotů/měsíc)

Chromatic (Storybook)

Visual testing pro Storybook komponenty.

Použití:

npx chromatic --project-token=<token>

Funkce:

• Automatické testování Storybook stories
• Detekce vizuálních regresí
• Schvalování změn v UI
• Git integrace

BackstopJS (open-source)

Zdarma nástroj pro visual regression testing.

Konfigurace:

{
  "scenarios": [
    {
      "label": "Homepage",
      "url": "https://example.com",
      "selectors": ["document"]
    }
  ]
}

Příkazy:

# Vytvoření reference screenshotů
backstop reference

# Spuštění testů
backstop test

# Schválení změn
backstop approve

reg-suit

Další open-source nástroj pro visual regression.

Výhody:

• Integrace s GitHub/GitLab
• Automatické komentáře v PR
• Podpora různých backendů (S3, GCS)

Metoda 4: Příkazový řádek

ImageMagick

Výkonná knihovna pro manipulaci s obrázky.

Instalace:

# macOS
brew install imagemagick

# Ubuntu/Debian
sudo apt install imagemagick

# Windows (Chocolatey)
choco install imagemagick

Základní porovnání:

compare image1.png image2.png diff.png

S metrikou podobnosti:

compare -metric RMSE image1.png image2.png diff.png

Nastavení tolerance:

compare -fuzz 10% image1.png image2.png diff.png

Výstup jako maska:

compare -compose src image1.png image2.png diff.png

perceptualdiff

Specializovaný nástroj pro perceptuální porovnání.

Instalace:

# macOS
brew install perceptualdiff

# Linux
sudo apt install perceptualdiff

Použití:

perceptualdiff image1.png image2.png -output diff.png

Výhody:

• Zohledňuje lidské vnímání
• Ignoruje neviditelné rozdíly
• Ideální pro QA testování

Metoda 5: Python skripty

Pillow (PIL)

Základní knihovna pro práci s obrázky v Pythonu.

Instalace:

pip install Pillow

Jednoduchý diff:

from PIL import Image, ImageChops

# Načtení obrázků
img1 = Image.open('image1.png')
img2 = Image.open('image2.png')

# Porovnání
diff = ImageChops.difference(img1, img2)

# Uložení
diff.save('diff.png')

# Kontrola, zda jsou identické
if diff.getbbox() is None:
    print("Obrázky jsou identické")
else:
    print("Obrázky se liší")

OpenCV

Pokročilá knihovna pro počítačové vidění.

Instalace:

pip install opencv-python

Strukturální podobnost (SSIM):

import cv2
from skimage.metrics import structural_similarity as ssim

# Načtení obrázků
img1 = cv2.imread('image1.png', cv2.IMREAD_GRAYSCALE)
img2 = cv2.imread('image2.png', cv2.IMREAD_GRAYSCALE)

# Výpočet SSIM
score, diff = ssim(img1, img2, full=True)
print(f"Podobnost: {score * 100:.2f}%")

# Zvýraznění rozdílů
diff = (diff * 255).astype("uint8")
cv2.imwrite('diff.png', diff)

pixelmatch (Node.js)

Populární knihovna pro pixel-level porovnání.

Instalace:

npm install pixelmatch pngjs

Použití:

const fs = require('fs');
const PNG = require('pngjs').PNG;
const pixelmatch = require('pixelmatch');

const img1 = PNG.sync.read(fs.readFileSync('image1.png'));
const img2 = PNG.sync.read(fs.readFileSync('image2.png'));
const {width, height} = img1;
const diff = new PNG({width, height});

const numDiffPixels = pixelmatch(
  img1.data, img2.data, diff.data,
  width, height,
  {threshold: 0.1}
);

fs.writeFileSync('diff.png', PNG.sync.write(diff));
console.log(`Rozdílných pixelů: ${numDiffPixels}`);

Tipy pro efektivní porovnání obrázků

1. Zajistěte stejné rozměry

Před porovnáním se ujistěte, že oba obrázky mají:

• Stejné rozlišení (šířka × výška)
• Stejný barevný prostor (RGB, CMYK)
• Stejný formát (PNG pro bezztrátové porovnání)

2. Nastavte správnou toleranci

Nízká tolerance (< 5%)

• Pro detekci jemných změn
• Barevné korekce, retušování
• Může generovat false positives

Střední tolerance (5-15%)

• Vyvážený přístup
• Většina use cases
• Dobrý kompromis

Vysoká tolerance (> 15%)

• Pro hrubé změny
• Strukturální úpravy
• Méně citlivé na šum

3. Ignorujte anti-aliasing

Anti-aliasing může způsobit falešné rozdíly na hranách objektů. Většina moderních nástrojů má možnost anti-aliasing ignorovat.

4. Používejte PNG formát

• PNG je bezztrátový – zachovává každý pixel
• JPEG má kompresi – může generovat artefakty
• Pro přesné porovnání vždy konvertujte na PNG

5. Normalizujte obrázky

Před porovnáním:

• Odstraňte EXIF metadata
• Sjednoťte barevný profil
• Ořízněte na stejnou oblast zájmu

Automatizace porovnání obrázků

CI/CD integrace

GitHub Actions příklad:

name: Visual Regression Tests
on: [push, pull_request]

jobs:
  visual-test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Run BackstopJS
        run: |
          npm install
          npm run test:visual
      - name: Upload diff images
        if: failure()
        uses: actions/upload-artifact@v3
        with:
          name: visual-diff
          path: backstop_data/bitmaps_test

Monitoring změn

Automatické sledování změn na webu:

1. Plánovaný screenshot pomocí Puppeteer/Playwright
2. Porovnání s předchozí verzí
3. Notifikace při detekci změn (Slack, email)

Speciální případy

Porovnání animovaných GIFů

Frame-by-frame analýza:

# Rozložení GIFu na jednotlivé framy
convert animation.gif frame_%04d.png

# Porovnání odpovídajících framů
for i in {0001..0100}; do
  compare frame1_$i.png frame2_$i.png diff_$i.png
done

Porovnání videí

Pro videa použijte:

• FFmpeg pro extrakci klíčových snímků
• AV1/VMAF metriky pro kvalitu
• Specializované nástroje jako VQMT

Porovnání 3D renderů

• Renderujte ze stejného úhlu kamery
• Použijte stejné osvětlení
• Exportujte ve stejném rozlišení
• Porovnávejte jednotlivé průchody (diffuse, specular)

Jak vybrat správný nástroj?

Situace	Doporučený nástroj
Rychlé online porovnání	Diffchecker
Grafický design	Photoshop, GIMP
QA testování webů	BackstopJS, Percy
Automatizace v CI/CD	pixelmatch, reg-suit
Příkazový řádek	ImageMagick
Programování v Pythonu	OpenCV, Pillow
Cross-browser testing	Percy, Chromatic

Závěr

Porovnání obrázků je mocný nástroj pro:

Designéry:

• Kontrola verzí a konzistence
• Review změn v týmu
• Zajištění kvality výstupů

Vývojáře:

• Visual regression testing
• Automatizovaná kontrola UI
• CI/CD integrace

QA testery:

• Cross-browser/device testování
• Detekce vizuálních bugů
• Dokumentace rozdílů

Fotografy a tvůrce obsahu:

• Kontrola retuše
• Porovnání před/po
• Detekce manipulace

Klíčem k úspěchu je vybrat správný nástroj pro danou situaci a nastavit odpovídající toleranci pro váš use case.

---

Pracujete s texty a kódem? Vyzkoušejte PorovnejText.cz pro rychlé porovnání textových souborů, JSON, XML a dalších formátů. Vše probíhá ve vašem prohlížeči, žádná data se neodesílají na server.