Možnosti optimalizace obrázků a animovaných souborů GIF

Formáty webových grafik mohou být buď bitmapové (rastrové) nebo vektorové. Bitmapové formáty, GIF, JPEG a PNG, jsou závislé na rozlišení, což znamená, že na monitorech s různým rozlišením se změní rozměry bitmapového obrazu a případně i kvalita obrazu. Vektorové formáty, SVG a SWF, jsou nezávislé na rozlišení a lze je zvětšovat nebo zmenšovat bez ztráty kvality obrazu. Vektorové formáty mohou obsahovat i rastrová data. 

Možnosti optimalizace JPEG

JPEG je standardní formát pro kompresi obrazů se spojitými tóny, jako jsou fotografie. Optimalizace obrazu jako formátu JPEG spoléhá na ztrátovou kompresi, která selektivně vypouští data.

Určuje úroveň komprese. Čím vyšší je nastavení kvality, tím detailnější je kompresní algoritmus zachován. Použití nastavení vysoké kvality však má za následek větší velikost souboru než použití nastavení nízké kvality. Zobrazte optimalizovaný obraz v několika nastaveních kvality, abyste určili nejlepší vyvážení kvality a velikosti souboru.

Vytvoří vylepšený JPEG s o něco menší velikostí souboru. Pro maximální kompresi souborů se doporučuje formát Optimalizovaný JPEG; některé starší prohlížeče však tuto funkci nepodporují.

Zobrazí obraz postupně ve webovém prohlížeči. Obraz se zobrazí jako řada překrytí, která divákům umožní zobrazit verzi obrazu v nízkém rozlišení ještě před tím, než se úplně stáhne. Volba Progresivní vyžaduje použití Optimalizovaného formátu JPEG.

 Progresivní JPEG vyžaduje pro zobrazení více paměti RAM a některé prohlížeče ho nepodporují.

Určí míru rozostření, které chcete použít na obraz. Tato volba aplikuje stejný efekt jako Gaussovský rozostřený filtr a umožňuje větší kompresi souboru, což má za následek menší velikost souboru. Doporučuje se nastavení 0,1 až 0,5.

Zachovává barevné profily v optimalizovaném souboru. Některé prohlížeče používají pro korekci barev profily barev.

Určuje barvu výplně pro obrazové body, které byly v původním obrazu průhledné. Kliknutím na políčko Barva podkladu vyberte barvu v dialogu pro výběr barvy nebo vyberte volbu z nabídky Podklad: Barva kapátka (chcete-li použít barvu v vzorku kapátka), Barva popředí, Barva pozadí, Bílá, Černá nebo Jiná (chcete-li použít barevný obraz ).

Obrazové body, které byly v původním obraze zcela průhledné, se vyplní vybranou barvou; body, které byly částečně průhledné, se s vybranou barvou smíchají.

Možnosti optimalizace GIF a PNG-8

GIF je standardní formát pro kompresi obrázků s plochou barvou a ostrými detaily, jako jsou čárové kresby, loga nebo ilustrace s písmem. Podobně jako formát GIF i formát PNG-8 efektivně komprimuje plné oblasti barev a zachovává ostré detaily.

Soubory PNG-8 a GIF podporují 8bitové barvy, takže mohou zobrazovat až 256 barev. Proces určení, které barvy se mají použít, se nazývá indexování, takže obrazy ve formátech GIF a PNG-8 se někdy nazývají indexované barevné obrazy. Chcete-li převést obrázek na indexované barvy, vytvoří se vyhledávací tabulka barev, která uloží a indexuje barvy v obrazu. Pokud se barva v původním obrazu nezobrazí v tabulce pro hledání barev, aplikace buď vybere nejbližší barvu v tabulce, nebo simuluje barvu pomocí kombinace dostupných barev.

Kromě následujících voleb můžete nastavit počet barev obrazu v tabulce barev obrazu.

Zmenší velikost souboru selektivním zahozením dat. Vyšší nastavení ztrátové způsobí, že se odstraní více dat. Často můžete aplikovat ztrátovou hodnotu 5-10, někdy až 50, bez zhoršení kvality obrazu. Volba Ztrátová může zmenšit velikost souboru o 5 % až 40 %.

 Možnost Ztrátová nemůžete použít s možností Prokládaný nebo s algoritmy rozkladu barev Šum nebo Rozklad vzorku.

Určuje metodu pro vytvoření tabulky hledání barev a požadovaný počet barev v tabulce hledání barev. Můžete vybrat jednu z následujících metod redukce barev:

Perceptuální Vytvoří vlastní tabulku barev tak, že preferuje barvy, na které je lidské oko citlivější.

Selektivní Vytvoří tabulku barev podobnou tabulce Perceptuální, ale upřednostňuje velké plochy barev a zachování webových barev. Tato tabulka barev obvykle vytváří obrazy s největší integritou barev. Výchozí možností je Selektivní.

Adaptivní Vytvoří vlastní tabulku barev vzorkováním barev ze spektra barev, které se v obraze objevují nejčastěji. Například obraz s pouze zelenými a modrými barvami vytvoří tabulku barev tvořenou převážně ze zelených a modrých. Většina obrázků soustředí barvy v konkrétních oblastech spektra.

Omezená (webová) Používá standardní tabulku barev s 216 barvami, které jsou společné pro 8bitové palety (256 barev) Windows a Mac OS. Tato možnost zajistí, že při zobrazení obrazu pomocí 8bitových barev se na barvy nebude v prohlížeči aplikovat žádný rozklad barev. (Tato paleta se také nazývá bezpečná webová paleta.) Použití webové palety může vytvořit větší soubory, a je doporučeno pouze v případě, že je zabránění rozkladu prohlížeče vysokou prioritou.

Vlastní Používá paletu barev, kterou vytvořil nebo upravil uživatel. Pokud otevřete existující soubor GIF nebo PNG-8, bude mít uživatelskou (jinou) paletu barev.

 K přizpůsobení vyhledávací tabulky barev použijte paletu Tabulka barev v dialogovém okně Uložit pro web a zařízení.

Černá a bílá, Stupně šedi, Mac OS, Windows Použije nastavenou paletu barev.

Určuje metodu a míru rozkladu aplikace. Rozklad barev označuje způsob simulace barev, které nejsou dostupné v systému barevného zobrazení počítače. Vyšší procento rozkladu barev vytvoří v obrazu vzhled více barev a více detailů, ale může také zvětšit velikost souboru. Chcete-li získat optimální kompresi, použijte nejnižší hodnotu rozkladu barev, které je dosaženo požadovaných barevných detailů. Obrazy s převážně plnými barvami mohou bez rozkladu fungovat dobře. Obrazy s barvami se spojitými tóny (zejména barevné přechody) mohou vyžadovat rozklad barev, aby se zabránilo pruhování barev.

Můžete vybrat jednu z následujících metod rozkladu barev:

Rozptýlený Použije náhodný vzorek, který je obvykle méně znatelný než rozklad Vzorek. Efekty rozkladu se rozptýlí do sousedních obrazových bodů.

Vzorek K simulaci barev, které nejsou v tabulce barev, se použijí čtvercové vzorky, podobné polotónovým bodům.

Šum Použije náhodný vzorek podobný rozkladu Rozptýlený, ale bez rozptýlení vzorku přes sousední obrazové body. U metody rozkladu Šum se neobjevují žádné přechody na okrajích.

Určí způsob optimalizace průhledných obrazových bodů v obraze.

• Chcete-li, aby byly plně průhledné obrazové body průhledné a aby prolnuly částečně průhledné obrazové body s barvou, vyberte Průhlednost a vyberte podkladnou barvu.

• Chcete-li vyplnit zcela průhledné obrazové body barvou a prolnout částečně průhledné obrazové body s touto barvou, vyberte barvu podkladu a zrušte zaškrtnutí políčka Průhlednost.

• Chcete-li vybrat barvu podkladu, klikněte na políčko barvy Podklad a vyberte barvu v dialogu pro výběr barvy. Nebo můžete vybrat možnost z nabídky Podklad: Barva kapátka (použije se barva z pole vzorku kapátka), Barva popředí, Barva pozadí, Bílá, Černá nebo Jiná (použije se dialog pro výběr barvy).

 Možnosti Barva popředí a Barva pozadí jsou dostupné jen v aplikaci Photoshop.

A. Původní obrázek B. Průhlednost vybraná s podkladem barvy C. Byla vybrána průhlednost bez podkladu D. Průhlednost byla odznačena podkladem barvy

Když je vybrána možnost Průhlednost, můžete zvolit metodu rozkladu částečně průhledných obrazových bodů:

• Bez rozkladu průhlednosti se na částečně průhledné obrazové body v obraze nepoužije žádný rozklad.

• Rozptýlený rozklad průhlednosti použije náhodný vzorek, který je obvykle méně znatelný než rozklad Vzorek. Efekty rozkladu se rozptýlí do sousedních obrazových bodů. Pokud vyberete tento algoritmus, určete v procentech míru rozkladu barev, který se použije na obraz.

• Rozklad průhlednosti Vzorek použije na částečně průhledné obrazové body čtvercové vzorky, podobné polotónovým bodům.

• Rozklad průhlednosti Šum použije náhodný vzorek podobný rozptýlenému algoritmu, ale bez rozšíření vzorku přes sousední obrazové body. Algoritmus Šum neobsahuje žádné švy.

Zobrazí verzi obrazu v nízkém rozlišení v prohlížeči, zatímco se stahuje celý obrazový soubor. Prokládání může způsobit, že se čas stažení zdá kratší, a může diváky ujistit, že stahování probíhá. Prokládání ale také zvětšuje velikost souboru.

Určuje úroveň tolerance pro posun barev na nejbližší ekvivalentní webovou paletu (a zabránit rozkladu barev v prohlížeči). Vyšší hodnota posune více barev.

Optimalizace průhlednosti v obrazech GIF a PNG

Průhlednost umožňuje vytvářet obrazy pro web jiného než obdélníkového tvaru. Průhlednost pozadí zachová v obraze průhledné obrazové body.

To umožňuje zobrazit pozadí webové stránky skrz průhledné oblasti obrazu. Podklad pozadí simuluje průhlednost vyplněním nebo prolnutím průhledných bodů s barvou podkladu, která může odpovídat pozadí webové stránky. Podklad pozadí funguje nejlépe, pokud je pozadí webové stránky plná barva a pokud víte, co to je za barvu.

Pomocí voleb Průhlednost a podklad v dialogovém okně Uložit pro web a zařízení určete, jak se mají optimalizovat průhledné obrazové body v obrazech GIF a PNG.

• (GIF a PNG-8) Chcete-li, aby byly plně průhledné obrazové body průhledné a aby prolnuly částečně průhledné obrazové body barvou, vyberte Průhlednost a vyberte podkladnou barvu.
• Chcete-li vyplnit zcela průhledné obrazové body barvou a prolnout částečně průhledné obrazové body s touto barvou, vyberte barvu podkladu a zrušte zaškrtnutí políčka Průhlednost.
• (GIF a PNG-8) Chcete-li, aby byly všechny obrazové body s více než 50 % průhledností zcela průhledné a všechny obrazové body s 50 % nebo menší průhledností zcela neprůhledné, vyberte Průhlednost a z nabídky Podklad vyberte Žádný.
• (PNG-24) Chcete-li uložit obraz s víceúrovňovou průhledností (až 256 úrovní), vyberte Průhlednost. Volba Podklad je vypnutá, protože víceúrovňová průhlednost umožňuje, aby se obraz prolnul s libovolnou barvou pozadí.

 V prohlížečích, které nepodporují průhlednost PNG-24, se mohou průhledné obrazové body zobrazit na výchozí barvě pozadí, například šedé.

Chcete-li vybrat barvu podkladu, klikněte na políčko barvy Podklad a vyberte barvu v dialogu pro výběr barvy. Nebo můžete vybrat možnost z nabídky Podklad: Barva kapátka (použije se barva z pole vzorku kapátka), Barva popředí, Barva pozadí, Bílá, Černá nebo Jiná (použije se dialog pro výběr barvy).

 Možnosti Barva popředí a Barva pozadí jsou dostupné jen v aplikaci Photoshop.

Zobrazení tabulky barev pro optimalizovaný řez

Tabulka barev pro řez se zobrazuje v panelu Tabulka barev v dialogovém okně Uložit pro web a zařízení.

Vyberte řez, který je optimalizovaný ve formátu GIF nebo PNG-8. Tabulka barev pro vybraný řez se objeví v tabulce barev v dialogovém okně Uložit pro web a zařízení.

Pokud má obrázek více řezů, barvy v tabulce barev se mohou mezi řezy lišit (můžete nejprve propojit řezy, abyste zabránili tomu, co se děje). Pokud vyberete více řezů, které používají různé tabulky barev, tabulka barev bude prázdná a její stavový řádek zobrazí zprávu "Smíšené".

Úpravy tabulky barev pro obrázky ve formátu GIF a PNG-8

K nastavení barev v optimalizovaných obrazech GIF a PNG-8 můžete použít tabulku barev v dialogovém okně Uložit pro web a zařízení. Snížením počtu barev se kvalita obrazu často zachová a zároveň se zmenší velikost souboru obrazu.

V tabulce barev můžete přidávat a odstraňovat barvy, vybrané barvy můžete posunout na bezpečné webové barvy a vybrané barvy můžete zamknout, aby se zabránilo jejich vypuštění z palety.

Uspořádání tabulky barev

Zvolte pořadí řazení z nabídky Tabulka barev:

• Neuspořádat – Obnoví původní pořadí barev.
• Uspořádat podle odstínu – Řadí podle umístění barvy na standardním barevném kole (vyjádřeném jako úhel mezi 0 a 360 stupni). Neutrální barvy mají odstín 0 a jsou umístěny s červenými barvami.
• Uspořádat podle světlosti – Řadí barvy podle světlosti nebo jasu.
• Uspořádat podle výskytu – Řadí barvy podle četnosti výskytu v obrazu.

Přidání nové barvy do tabulky barev

Při vytváření tabulky barev můžete přidat barvy, které byly vynechány. Přidání barvy do dynamické tabulky posune barvu v paletě co nejblíže k nové barvě. Přidání barvy do pevné nebo vlastní tabulky přidá do palety další barvu.

Výběr barev v tabulce barev

Kolem vybraných barev v tabulce barev se zobrazí bílý okraj.

• Chcete-li vybrat jednu barvu, klikněte na barvu v tabulce barev.
• Chcete-li v tabulce barev vybrat více barev, stiskněte klávesu Shift a klikněte na další barvu. Vyberou se všechny barvy v řádcích mezi první a druhou vybranou barvou. Chcete-li vybrat skupinu nesousedících barev, podržte Ctrl (Windows) nebo Apple (Mac OS) a klikněte na každou z barev, které chcete vybrat. Příkazy pro vybírání barev jsou také v nabídce palety Tabulka barev.
• Chcete-li vybrat barvu v náhledu obrazu, klikněte do náhledu nástrojem Kapátko z okna Uložit pro web a zařízení. Pokud chcete vybrat další barvy, klikněte na ně se stisknutou klávesou Shift.
• Chcete-li zrušit označení všech barev, vyberte v nabídce palety Tabulka barev příkaz Odznačit všechny barvy.

Změna barvy

Vybranou barvu v tabulce barev můžete změnit na jakoukoli jinou hodnotu barvy RGB. Po regenerování optimalizovaného obrazu se vybraná barva změní na novou barvu, ať se v obraze objeví kdekoli.

Posunutí barev na nejbližší ekvivalenty z webové palety

Chcete-li barvy v prohlížeči chránit před rozkladem barev, můžete v paletě pro web změnit barvy na jejich nejbližší ekvivalenty. To zajistí, že se barvy nerozpustí, když se zobrazují v prohlížečích na operačních systémech Windows nebo Macintosh, které jsou schopné zobrazovat pouze 256 barev.

Mapování barev na průhlednost

K optimalizovanému obrazu můžete přidat průhlednost mapováním stávajících barev na průhlednost.

Zamknutí nebo odemknutí barvy

Vybrané barvy můžete v tabulce barev zamknout a zabránit tak jejich odstranění, když se počet barev sníží, a zabránit jejich rozkladu v aplikaci.

 Zamknutí barev nezabrání jejich rozkladu v prohlížeči.

Odstranění vybraných barev

Chcete-li zmenšit velikost souboru obrázku, můžete vybrané barvy z tabulky barev odstranit. Když odstraníte barvu, plochy optimalizovaného obrazu, které dříve obsahovaly tuto barvu, se vrátí pomocí nejbližší barvy zbývající v paletě.

Když odstraníte barvu, tabulka barev se automaticky změní na Vlastní paletu. Důvodem je to, že palety Adaptivní, Perceptuální a Selektivní automaticky přidají odstraněnou barvu zpět do palety při reoptimalizaci obrazu - paleta Vlastní se při reoptimalizaci obrazu nezmění.

Uložení tabulky barev

Tabulky barev můžete uložit z optimalizovaných obrázků pro použití s jinými obrázky a načíst tabulky barev vytvořené v jiných aplikacích. Jakmile do obrázku načtete novou tabulku barev, barvy v optimalizovaném obrázku se změní tak, aby odrážely barvy v nové tabulce barev.

Načtení tabulky barev

Možnosti optimalizace PNG-24

Formát PNG-24 je vhodný pro kompresi obrazů se spojitými tóny, ale vytváří mnohem větší soubory než formát JPEG. Výhodou použití PNG-24 je, že v obrazu dokáže zachovat až 256 úrovní průhlednosti.

Určí způsob optimalizace průhledných obrazových bodů v obraze.

Zobrazí verzi obrazu v nízkém rozlišení v prohlížeči, zatímco se stahuje celý obrazový soubor. Prokládání může způsobit, že se čas stažení zdá kratší, a může diváky ujistit, že stahování probíhá. Prokládání ale také zvětšuje velikost souboru.