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 například fotografie. Optimalizace obrazu ve formátu JPEG se spoléhá naztrátovou kompresi, která selektivně vypouští data.

Určuje úroveň komprese. Čím vyšší bude nastavení kvality, tím více detailů algoritmus komprese zachová. Použití nastavení vysoké kvality vede ale k větším souborům než použití nastavení s nižší kvalitou. Prohlédněte si optimalizovaný obraz při různých nastaveních kvality, abyste určili nejlepší vyvážení kvality a velikosti souboru.

Vytvoří dokonalejší JPEG s poněkud menší velikostí souboru. Optimalizovaný formát JPEG se doporučuje pro dosažení maximální komprese souboru, ale některé starší prohlížeče tuto možnost nepodporují.

Obraz se zobrazí ve webovém prohlížeči postupně. Obraz se zobrazí v několika průchodech, což umožní uživatelům vidět před úplným stažením verzi obrazu s nízkým rozlišením. Možnost Progresivní vyžaduje použití formátuOptimalizovaný 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 možnost použije stejný efekt jako filtr Gaussovské rozostření a umožní větší kompresi obrazu a dosažení menší velikosti souboru. Doporučuje se nastavení 0,1 až 0,5.

Barevné profily jsou v optimalizovaném souboru zachovány. Některé prohlížeče používají barevné profily pro korekce barev.

Určuje barvu výplně pro obrazové body, které byly v původním obraze průhledné. Klikněte na políčko barvy Podklad a vyberte barvu v dialogu pro výběr barvy nebo vyberte 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).

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 obrazů s plochami plných barev a s ostrými detaily, jako jsou čárové kresby (pérovky), loga nebo ilustrace s textem. Podobně jako formát GIF, komprimuje formát PNG-8 účinně plné plochy barev a zachovává ostré detaily.

Soubory PNG-8 a GIF podporují 8bitové barvy, takže mohou zobrazit až 256 barev. Proces určení, které barvy se použijí, se nazývá indexování, takže obrazy ve formátu GIF a PNG-8 se někdy nazývají obrazy s indexovanými barvami. Pro účely převodu do indexovaných barev je vytvořena vyhledávací tabulka barev, ve které jsou uloženy a indexovány barvy obrazu. Pokud barva v originálním obraze není ve vyhledávací tabulce barev, aplikace buď vybere nejbližší barvu v tabulce nebo simuluje barvu použitím kombinace dostupných barev.

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

Komprimuje velikost souboru selektivním vypuštěním dat. Vyšší hodnota volby Ztráta způsobí vypuštění více dat. Často můžete aplikovat hodnotu ztráty 5-10 a někdy až 50 bez toho, že by došlo ke snížení kvality obrazu. Volba Ztráta může sníž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 způsob generování vyhledávací tabulky barev a počet barev, které chcete mít ve vyhledávací tabulce barev. Vyberte 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 nejlepším zachováním barev. Selektivní je výchozí volba.

Adaptivní Vytvoří vlastní tabulku barev vzorkováním barev ze spektra barev, které se v obraze objevují nejčastěji. Například pro obraz obsahující pouze zelené a modré se vytvoří tabulka barev zejména ze zelených a modrých. Ve většině obrazů jsou barvy soustředěné v určitý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á paleta bezpečných webových barev.) Použití webové palety může vytvořit větší soubory a doporučuje se pouze tehdy, když má zabránění rozkladu v prohlížeči vysokou prioritu.

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 barev v aplikaci. Rozklad barev je metoda simulování barev, které nejsou dostupné v systému zobrazování barev na počítači. Vyšší hodnota rozkladu v procentech vytváří v obraze dojem více barev a více detailů, ale také může 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 obsahující převážně plné barvy mohou dobře fungovat bez rozkladu barev. Obrazy se spojitými barevnými tóny (zejména s přechody barev) mohou vyžadovat rozklad barev, aby se zabránilo vzniku barevných pruhů.

Vyberte jednu z následujících metod rozkladu:

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 zcela průhledné obrazové body byly průhledné a částečně průhledné obrazové body se smíchaly s barvou podkladu, vyberte Průhlednost a vyberte barvu podkladu.

• 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í obraz B. S vybranou možností Průhlednost a s barvou podkladu C. S vybranou možností Průhlednost bez podkladu D. S vypnutou volbou Průhlednost a s barvou podkladu

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. U algoritmu Šum se neobjevují žádné přechody na okrajích.

Zobrazí v prohlížeči v průběhu stahování plného obrazu verzi obrazu s nízkým rozlišením. Prokládání může dobu přenosu zdánlivě zkrátit a může ujistit uživatele, že stahování probíhá. Prokládáním se ale také zvětší velikost souboru.

Určuje toleranci pro posouvání barev k nejbližšímu ekvivalentu ve webové paletě (aby se zabránilo rozkladu barev v prohlížeči). S vyšší hodnotou se 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, když pozadí webové stránky je plná barva a vy víte, která barva to je.

Pro určení způsobu optimalizace průhledných obrazových bodů v obrazech GIF a PNG použijte nabídky Průhlednost a Podklad v dialogovém okně Uložit pro web a zařízení.

• (GIF a PNG-8) Chcete-li, aby zcela průhledné obrazové body byly průhledné a částečně průhledné obrazové body se smíchaly s barvou podkladu, vyberte Průhlednost a vyberte barvu podkladu.
• 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 se všechny obrazové body s průhledností větší než 50 % staly plně průhlednými a všechny s průhledností 50 % nebo menší plně neprůhlednými, vyberte Průhlednost a z nabídky Podklad zvolte Žádný.
• (PNG-24) Chcete-li uložit obraz s víceúrovňovou průhledností (až do 256 úrovní), vyberte Průhlednost. Volba Podklad bude nedostupná, protože víceúrovňová průhlednost umožňuje, aby obraz splynul 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á obraz více řezů, barvy v tabulce barev se mohou mezi jednotlivými řezy lišit (aby k tomu nedocházelo, můžete řezy předem svázat). Pokud vyberete více řezů, které používají různé tabulky barev, bude tabulka barev prázdná a její stavový řádek bude zobrazovat 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í počtu barev často zachová kvalitu obrazu a přitom sníží velikost souboru obrazu.

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

Uspořádání tabulky barev

Zvolte pořadí řazení v nabídce paletyTabulka 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ím barvám se přiřadí odstín 0 a umístí se k červeným.
• 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

Můžete přidat barvy, které byly vynechány při sestavování tabulky barev. Přidání barvy do dynamické tabulky posune v paletě barvu, která je nejbližší nové barvě. Přidání barvy do pevné nebo uživatelské tabulky přidá do palety další barvu.

Výběr barev v tabulce barev

Okolo vybraných barev se v tabulce barev objeví 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.

Posunutí barvy

Vybranou barvu v tabulce barev můžete změnit na jakoukoliv jinou hodnotu RGB. Když optimalizovaný obraz obnovíte, vybraná barva se změní na novou barvu všude, kde se v obraze vyskytuje.

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

Abyste zabránili rozkladu barev v prohlížeči, můžete barvy posunout na jejich nejbližší ekvivalenty ve webové paletě. To zajistí, že barvy se nebudou rozkládat při zobrazení v prohlížečích ve Windows nebo v Mac OS, které jsou schopny zobrazit pouze 256 barev.

Mapování barev na průhlednost

Do optimalizovaného 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

Vybrané barvy můžete z tabulky barev odstranit a tím snížit velikost souboru obrazu. Po odstranění barvy se plochy optimalizovaného obrazu, které tuto barvu předtím obsahovaly, překreslí s použitím nejbližší barvy zůstávající v paletě.

Když odstraníte barvu, tabulka barev se automaticky změní na paletu Jiná. Je to proto, že palety Adaptivní, Perceptuální a Selektivní automaticky přidají odstraněnou barvu zpět do palety, když znovu provedete optimalizaci obrazu – paleta Jiná se při nové optimalizaci obrazu nezmění.

Uložení tabulky barev

Tabulky barev z optimalizovaných obrazů můžete uložit, abyste je mohli použít pro jiné obrazy a můžete načítat tabulky barev, vytvořené v jiných aplikacích. Když načtete do obrazu novou tabulku barev, barvy v optimalizovaném obraze se změní tak, aby odpovídaly barvám v nové tabulce barev.

Načtení tabulky barev

Možnosti optimalizace PNG-24

Formát PNG-24 je vhodný pro kompresi obrazů s plynulými tóny; vytváří ale mnohem větší soubory než formát JPEG. Výhoda použití PNG-24 je v tom, že může v obraze zachovat až 256 úrovní průhlednosti.

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

Zobrazí v prohlížeči v průběhu stahování plného obrazu verzi obrazu s nízkým rozlišením. Prokládání může dobu přenosu zdánlivě zkrátit a může ujistit uživatele, že stahování probíhá. Prokládáním se ale také zvětší velikost souboru.