Jak připravit obrázek k publikaci

Zmenšete obrázek na velikost, ve které se skutečně zobrazí, nanejvýš na její dvojnásobek kvůli displejům s vysokou hustotou. Ořízněte ho na tvar, který sazba potřebuje, místo abyste ho nechali zmáčknout prohlížeč. Komprimujte, dokud se zrovna neobjeví artefakty, a pak se vraťte o krok zpět. Metadata odstraňte až nakonec. Na pořadí záleží: každý krok po tom prvním pracuje s mnohem menším počtem pixelů.

Rozměry jsou na prvním místě

Počet pixelů roste s druhou mocninou šířky, takže mírný rozdíl v rozměrech je obrovský rozdíl v objemu dat. Obrázek uložený v šířce 4000 pixelů a zobrazený ve sloupci širokém 800 pixelů nese asi pětadvacetkrát víc dat, než potřebuje, a to žádné nastavení kvality nezachrání.

Cílovou šířku určíte tak, že změříte největší šířku, ve které se obrázek v sazbě kdy vykreslí, ne největší šířku obrazovky. Karta v třísloupcové mřížce může být vždy jen 380 pixelů široká. Pokud jeden soubor slouží na několika místech, nastavte velikost podle toho největšího.

Fyzické pixely, CSS pixely a mýtus o DPI

CSS pixel je jednotka sazby, ne fyzický bod. Poměr fyzických pixelů udává, kolik fyzických pixelů obrazovka vykreslí na jeden CSS pixel: 1 na starších monitorech, 2 na většině moderních telefonů a notebooků, 3 na některých telefonech. Sloupec široký 800 CSS pixelů se při poměru 2 vykreslí 1600 fyzickými pixely, a proto obrázek nastavený na jeho CSS šířku vypadá měkce.

Praktické pravidlo je 2x. Exportujte v dvojnásobku zobrazované šířky a nechte prohlížeč zmenšovat. Přechod na 3x stojí dalších 125 % dat za rozdíl, který na běžnou pozorovací vzdálenost vidí málokdo.

DPI a PPI uložené v souboru jsou pro web bezvýznamné. Je to jedno číslo v hlavičce říkající, v jaké fyzické velikosti se má soubor vytisknout, a prohlížeče ho zcela ignorují.

printed width in inches = pixel width / PPI

3000 px / 300 ppi = 10.0 in
3000 px /  72 ppi = 41.7 in    same file, same 3000 pixels

Export v „300 DPI“ nepřidá žádné pixely ani nezmění žádná obrazová data.

Co dělá převzorkování

Zmenšování znamená, že se z mnoha zdrojových pixelů stane jeden. Detail jemnější než nová mřížka se nedá vyjádřit, a pokud převzorkovač odebere příliš málo zdrojových pixelů, místo aby průměroval přes celou plochu, přeloží se ten detail zpět jako falešný vzor: zubaté úhlopříčky a moaré na jemných opakujících se texturách, jako je pruhovaná košile nebo tabulka s jednopixelovými čarami. Dobré zmenšení průměruje každý přispívající pixel a obvykle po něm potřebuje trochu doostřit.

Zvětšování žádný detail nevytváří. Interpolace jen odhaduje hodnoty mezi pixely, které už existují, takže je výsledek měkký nebo kostkovaný. Zvětšovače založené na strojovém učení místo toho věrohodný detail vymýšlejí, což není totéž co jeho obnovení.

Poměr stran: ořez, letterbox nebo roztažení

Ořez zachová objekt ve správném měřítku a zahodí okraje a je správnou výchozí volbou. Letterbox zachová celý snímek, ale přidá pruhy a nutí vybrat jejich barvu; vyplatí se, když se nesmí nic uříznout, jako u výtvarného díla nebo diagramu. Roztažení deformuje a oko to okamžitě zachytí na obličejích, kruzích a písmu.

.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* crop; contain = letterbox, fill = stretch */
}

Když se jeden soubor objevuje v několika tvarech, uvažujte v pojmu bezpečné oblasti: části, která přežije každý ořez. Banner 16:9 ořízne shora a zdola, dlaždice 1:1 a karta 4:5 ořezávají po stranách, takže to, co si zachovají všechny, je pruh přes střed. Objekt i případný text držte uvnitř něj, jinak čtvercový ořez sťne hlavu obličeji u kraje fotky na šířku.

Jak najít nastavení kvality

Číslo kvality není procentem ničeho a stupnice nejsou mezi kodéry srovnatelné. JPEG 80, WebP 80 a AVIF 80 jsou tři nesouvisející nastavení.

Postup je u všech stejný. Vyexportujte několik nastavení, prohlédněte si výsledek ve velikosti, ve které se bude zobrazovat, a zkontrolujte, kde artefakty vyplavou nejdřív: hladké přechody, jako je obloha, kde vznikají pruhy a skvrny; tvrdé hrany a text, kde vzniká kroužkování. Najděte, kde je poškození vidět, vraťte se o krok zpět a skončete.

Jedno pevné číslo je pro každý obrázek špatné, protože o tom, kolik se dá zahodit, rozhoduje obsah: zašuměná, texturovaná fotografie potřebuje k přežití víc bitů, zatímco plochá ilustrace se rozpadne při nastavení, se kterým si rušná fotka poradí bez potíží.

Výřezy, měkké okraje a svatozáře

Odstranění pozadí je správné tam, kde obrázek musí sedět na více než jedné barvě pozadí nebo překrývat jiné prvky: produktové fotky, loga, člověk vsazený do sazby. Je špatné tam, kde je hranice skutečně jemná, jako u vlasů, listí nebo skla, protože špatná maska vypadá hůř než poctivý obdélník.

Tvrdá hrana je binární, každý pixel je buď plně krycí, nebo plně průhledný, což ploché grafice vyhovuje, ale na čemkoli fotografickém dělá schody. Měkká maska připouští částečné krytí, takže pixel může být ze 40 % objektem, což je jediný způsob, jak vlasy vypadají správně.

Svatozář pochází z hraničních pixelů. Rozostření objektivu a antialiasing už barvu objektu smíchaly se starým pozadím, takže každý z nich obsahuje:

observed = alpha * foreground + (1 - alpha) * background

Odstranění pozadí počítá jen alfu. Barva, která v těch pixelech zůstane, je pořád kontaminovaná, takže objekt vyříznutý z bílé ateliérové fotky nese světlý lem: na bílé stránce neviditelný, na tmavé zjevný. Pořádné maskování řeší i barvu popředí a v nástrojích se objevuje jako odstranění lemu nebo dekontaminace barev. Když to nejde, stáhněte masku dovnitř o zlomek pixelu a znovu ji rozostřete.

Rotace a metadata

Obrázek, který je v jednom programu na výšku a v jiném na boku, je skoro vždy věcí orientace v EXIF. Fotoaparáty ukládají snímek ze senzoru neotočený a přidají značku, která říká, jak jej otočit. Software, který tu značku čte, ho zobrazí správně; software, který ji ignoruje, včetně mnoha obrazových knihoven a generátorů náhledů, zobrazí surové pixely na boku.

Řešením je otočení zapéct do pixelů a značku nastavit na 1 nebo ji odstranit. Otáčení po 90 stupních pixely jen přeskládá, nepřevzorkovává je. Dejte pozor na dvojité otočení: pixely už otočené, značka pořád nastavená, takže je každý poslušný prohlížeč otočí znovu.

Odstranění metadat je krok kvůli soukromí, ne úklid. Bloky EXIF, IPTC a XMP běžně nesou souřadnice GPS s přesností na pár metrů, čas pořízení, značku, model a sériové číslo fotoaparátu, jméno majitele a někdy i vloženou miniaturu, která pořád ukazuje obrázek před oříznutím. Fotka pořízená doma a zveřejněná nedotčená publikuje domácí adresu.

Odstraňujte je až nakonec, s jednou výjimkou: barevný profil ICC leží vedle těchto metadat a jeho odstranění z obrázku se širokým gamutem zanechá čísla, která se pak čtou jako sRGB, což se projeví plochou nebo přesycenou barvou. Nejdřív převeďte do sRGB a pak odstraňte všechno ostatní.