Optimalizace a ukládání obrázků GIF

Po vytvoření animace ve Photoshopu je nutné ji uložit do některého z dostupných formátů, z nichž jeden je GIF . Zvláštností tohoto formátu je, že je určen k zobrazení (přehrávání) v prohlížeči.

Pokud máte zájem o další možnosti uložení animace, doporučujeme si přečíst tento článek:

Lekce: Jak uložit video ve Photoshopu

Proces vytváření animace GIF byl popsán v jedné z předchozích lekcí a dnes budeme hovořit o tom, jak soubor uložit ve formátu GIF ao nastavení optimalizace.

Lekce: Vytvořte jednoduchou animaci ve Photoshopu

Uložení GIF

Nejdříve zopakujeme materiál a seznámíme se s oknem nastavení uložení. Otevře se kliknutím na položku "Uložit pro web" v nabídce "Soubor" .

Okno se skládá ze dvou částí: bloku náhledu

a bloku nastavení.

Blok náhledu

Volba počtu možností prohlížení je vybrána v horní části bloku. V závislosti na vašich potřebách můžete vybrat požadované nastavení.

Obraz v každém okně, s výjimkou originálu, je nakonfigurován samostatně. To je provedeno, aby bylo možné zvolit nejlepší možnost.

V horní levé části bloku je malá sada nástrojů. Budeme používat pouze "Ruka" a "Měřítko" .

Pomocí "Hands" můžete obrázek přesunout uvnitř vybraného okna. Volba je také provedena tímto nástrojem. "Scale" provádí stejnou akci. Chcete-li přiblížit a oddálit, můžete použít tlačítka v dolní části rámečku.

O něco málo je tlačítko s nápisem "Zobrazit" . Otevře vybranou možnost ve výchozím prohlížeči.

V okně prohlížeče můžeme kromě sady parametrů získat i HTML kód hypha.

Blok nastavení

V tomto bloku jsou parametry obrazu upraveny, budeme je brát v úvahu podrobněji.

1. Barevná schéma. Toto nastavení určuje, která tabulka indexovaných barev bude použita během optimalizace.
   • Percepční a jednoduše "schéma vnímání". Když jej použijete, Photoshop vytvoří barevný graf, který bude řízen aktuálními odstíny obrazu. Podle vývojářů je tato tabulka co nejblíže tomu, jak lidské oko vidí barvy. Plus - obrázek nejblíže originálu, barvy jsou maximálně zachovány.
   • Selektivní schéma je podobná předchozí, ale používá především barvy týkající se trezoru pro web. I zde je kladen důraz na zobrazování odstínů, které jsou blízké původním odstínům.
   • Adaptivní . V tomto případě je tabulka vytvořena z barev, které se nejčastěji nacházejí v obraze.
   • Limited . Skládá se ze 77 barev, z nichž některé vzorky jsou nahrazeny bílou formou tečky (zrna).
   • Vlastní . Když zvolíte tuto schéma, můžete vytvořit vlastní paletu.
   • Černá a bílá . V této tabulce se používají pouze dvě barvy (černé a bílé), a to i pomocí zrnitosti.
   • V gradách šedé . Zde se používají různé úrovně odstínů šedé.
   • MacOS a Windows . Údaje tabulky jsou sestaveny na základě vlastností zobrazování obrázků v prohlížečích pod řízením těchto operačních systémů.

   Zde je několik příkladů aplikačních schémat.

   Jak vidíte, první tři vzorky mají zcela přijatelnou kvalitu. Navzdory skutečnosti, že vizuálně se téměř neodlišují od sebe navzájem, na různých snímcích tyto systémy fungují jinak.

2. Maximální počet barev v tabulce barev.

   Počet odstínů v obraze přímo ovlivňuje jeho hmotnost, a tedy i rychlost stahování v prohlížeči. Nejběžnější hodnota je 128 , protože toto nastavení má téměř žádný vliv na kvalitu, zatímco snižuje hmotnost sádry.

3. Webové barvy. Toto nastavení nastavuje toleranci s tím, které odstíny jsou převedeny na ekvivalent ze zabezpečené webové palety. Hmotnost souboru je určena hodnotou nastavenou posuvníkem: hodnota je vyšší - soubor je menší. Při nastavování barev webu byste neměli zapomenout na kvalitu.

   Příklad:

4. Dithering umožňuje hladké přechody mezi barvami smícháním odstínů obsažených ve vybrané indexové tabulce.

   Také ladění pomůže, pokud je to jen možné, zachovat gradienty a integritu monochromatických záplat. Při použití ditheringu se zvýší váha souboru.

   Příklad:

5. Transparentnost. Formát GIF podporuje pouze absolutně transparentní nebo absolutně neprůhledné pixely.

   Tento parametr, bez další úpravy, špatně zobrazuje zakřivené čáry a ponechává pixelový žebřík.

   Úprava se nazývá "Matt" (v některých vydáních "Kayma" ). Díky tomu můžete upravit smíchání obrazových pixelů s pozadím stránky, na které se budou nacházet. Pro nejlepší zobrazení zvolte barvu, která odpovídá barvě pozadí webu.

6. Prokládané. Jeden z nejužitečnějších nastavení pro web. V případě, že má soubor významnou váhu, umožňuje vám okamžitě zobrazit obrázek na stránce a zvýšit jeho kvalitu při načítání.

7. Konverze sRGB pomáhá zachovat maximální množství originálních barev při ukládání.

Nastavení "Transparentní průhlednost" výrazně zhoršuje kvalitu obrazu a v praktické části lekce budeme hovořit o parametru "Ztráta" .

Pro nejlepší pochopení procesu nastavení ukládání hypha ve Photoshopu musíte pracovat.

Praxe

Cílem optimalizace obrazu pro internet je maximalizovat hmotnost souboru při zachování kvality.

1. Po zpracování obrazu přejděte do nabídky "File - Save for Web" .
2. Režim zobrazení nastavíme na "4 možnosti" .

3. Poté budete potřebovat jednu z možností, která se bude nejvíce podobat originálu. Nechť je obrázek napravo od zdroje. To se provádí za účelem vyhodnocení velikosti souboru při maximální kvalitě.

   Nastavení parametrů jsou následující:

   • Barevná schéma je "selektivní" .
   • "Barvy" - 265.
   • "Rozlišení" - "Náhodně" , 100%.
   • Před parametrem "Interlaced" odstraníme daw, protože konečný objem obrazu bude poměrně malý.
   • "Webové barvy" a "Ztráty" jsou nulové.

   Porovnejte výsledek s originálem. Ve spodní části okna s ukázkou můžeme vidět aktuální velikost sádry a její rychlost stahování při určené rychlosti internetu.

4. Přejděte na obrázek níže jen nastavit. Zkusme to optimalizovat.
   • Ponecháme diagram beze změny.
   • Počet barev se zmenší na 128.
   • Hodnota "Dithering" se sníží na 90%.
   • Webové barvy se nedotýkají, protože v tomto případě nám nepomáhá udržovat kvalitu.

   Velikost hyfy klesla z 36,59 KB na 26,85 KB.

5. Vzhledem k tomu, že obrázek již obsahuje zrnitost a malé chyby, pokusíme se zvýšit ztráty . Tento parametr určuje přijatelnou úroveň ztráty dat při kompresi GIF . Změňte hodnotu na hodnotu 8.

   Podařilo se nám snížit velikost souboru, při ztrátě trochu kvality. Gifka nyní váží 25,9 kilobajtů.

   Celkově jsme mohli snížit velikost obrazu asi o 10 KB, což je více než 30%. Velmi dobrý výsledek.

6. Další akce jsou velmi jednoduché. Klikněte na tlačítko "Uložit" .

   Vyberte místo pro ukládání, uveďte název hyfy a znovu klikněte na tlačítko Uložit .

   Všimněte si, že je možné vytvořit HTML dokument spolu s GIF , ve kterém bude náš obrázek vložen. Chcete-li to provést, je nejlepší vybrat prázdnou složku.

   V důsledku toho získáme stránku a složku s obrázkem.

Tip: při přiřazování názvu souboru se pokuste nepoužívat znaky cyrilika, protože ne všechny prohlížeče jsou schopny je přečíst.

V této lekci o uložení obrázku ve formátu GIF je dokončen. Na tom jsme zjistili, jak optimalizovat soubor pro zasílání na internetu.

• ← Praktické použití obráběcích masek ve Photoshopu
• Snižte pas v Photoshopu →