Optimalizace webové grafiky

Obrázkové soubory obsahují mnoho informací, a tudíž je nutné je optimalizovat, pokud je chceme vkládat na webovou stránku. Optimalizací zajistíme jejich menší datovou velikost, a tím umožníme rychlejší načítání stránky.

Optimalizace obrazových dat znamená určení optimálního nastavení parametrů obrazu pro snížení objemu dat při zachování potřebné kvality obrazu. Jednotlivými parametry se rozumí rozlišení a velikost obrazu; paleta barev; formát souboru a komprese dat. Optimalizace grafiky v Gimpu není podpořena speciálním nástrojem jako u Adobe PhotoShopu, ale i tak je možné ji provádět. Z důvodu absence speciálního nástroje je nutné, aby tvůrce grafiky znal jednotlivá pravidla a způsoby optimalizace grafiky. V následujících odstavcích se s těmito pravidly a postupy seznámíme.

Rozlišení a velikost obrazu

Rozlišení (viz díl č. 3.) a velikost obrazu hraje nemalou roli při tvorbě optimalizované grafiky pro web. Webdesignéři jsou postaveni díky rozmanitosti zařízení (Palm, Mobily, PC ..), umožňující čtení web stránek, před nelehký úkol, spočívající ve výběru správné velikosti webové prezentace. Nejčastějším zařízením, prostřednictvím kterého uživatelé přistupují na web, je PC. Podle statistik je nejpoužívanějším rozlišením monitoru 800x600, ale neustále se zvyšuje podíl uživatelů pracující na rozlišení 1024x786. Proto je většina webových prezentací navržena na rozlišení 800x600. Z přecházejících řádků je zřejmé, že maximální velikost celoobrazovkové grafiky pro web se bude pohybovat v rozmezí 700-600 pixelů na šířku a 500-400 pixelů na výšku.

Změna velikosti obrazu se provádí pomocí menu Obrázek --> Velikost obrázku. V dialogovém okně se nastaví požadovaná velikost. Pokud při zmenšení dojde ke ztrátě kvality fotografie, je zapotřebí vybrat jiný způsob interpolace bodů. Gimp nabízí tři způsoby interpolace (Žádná, Lineární, Kubická), nejlepších výsledků dosahuje posledně jmenovaný způsob interpolace (Kubická).

Následující tabulka ukazuje, jak změna velikosti obrazu ovlivní datovou velikost souboru. Pro každou fotografii se tyto parametry mohou lišit. Naše referenční fotografie je vidět níže.

Paleta barev

Teorie barev byla popsána v předcházejícím dílu seriálu (viz díl č. 2.). Výběrem vhodné barevné palety je možné snížit datovou velikost obrázku. Tuto výhodu je možné uplatnit jen u obrázků uložených do grafického formátu gif a png.

Při uložení obrázku do GIF či PNG je nutné převést obrázek na indexované barvy. Převod lze realizovat dvěma způsoby: automaticky při uložení či ručně (Obrázek --> Režim --> Indexovaná).

Na přecházejícím obrázku je okno Převod indexované barvy. Při převodu je možné vybrat si jeden z několika způsobů jeho provedení. Pro webové stránky nejčastěji využijeme možnost nastavení maximálního počtu barev či převod na web save paletu. Následující tabulka ukazuje, jak počet barev ovlivňuje velikost GIF a PNG obrázků.

Formát souboru a komprese dat

Grafické formáty vhodné pro webovské stránky byly probrány v prvním dílu seriálu, věnované webové grafice. Grafiku pro webové stránky je možné ukládat do jednoho z těchto formátů: JPEG, GIF nebo PNG. Pro kreslenou grafiku je vhodným formátem GIF. Pro fotografie je nejvhodnější JPEG. PNG je, jako jediný oficiální grafický formát pro webovou grafiku, vhodný pro fotografie i kreslené obrázky. Vypadá to, že formátu PNG se svítá na lepší časy, jelikož nová verze Internet Exploreru přináší jeho plnou podporu.

Následující obrázky ukazují nevhodnost použití JPEGu pro grafiku, u které jsou ostré barevné přechody či je v ní použité písmo. První z dvojice obrázků je ve skutečné velikosti a druhý je zvětšený na 600 %.

GIF

 
 

JPEG

 
 

PNG

 
 

Následující obrázky ukazují nevhodnost použití GIFu na fotografie. Nejzřetelněji je ruch vidět na zemi.

JPEG

GIF

PNG

GIF

Při ukládání obrázku do grafického formátu GIF, máme možnost nastavit několik parametrů, které mohou ovlivnit výslednou velikost souboru a rychlost načítaní na www stránce.

První z nich je možnost vložení/nevložení komentáře k obrázku do výsledného souboru. Množství ušetřených bajtů při nevložení komentáře závisí na délce textu komentáře. Dalším parametrem je prokládání, které neovlivní přímo velikost souboru ale rychlost jeho načítání. Při uložení s prokládáním se obrázek na www stránce načítá postupně; nejdříve liché řádky a pak sudé. Zobrazení obrázků, u něhož není nastaveno prokládání, funguje tak, že obrázek se nejdříve celý načte (přenese ze serveru na klienta) a poté se až zobrazí. Prokládání je výhodnější a rychlejší v tom, že obrázek se zobrazí již po přenesení poloviny dat.

Již při tvorbě kresleného obrázku je možné ovlivnit výslednou velikost souboru. Lze toho docílit co nejmenším počtem barev v obrázku - čím větší plochy stejné barvy, tím lepší výsledky komprese a tím menší soubor.

JPG

Stejně jako u gifu tak i při ukládání do jpegu lze výslednou datovou velikost souboru ovlivnit několika parametry.

Nejdůležitějším z těchto parametrů je kvalita (udává se v procentech).

• 100 % kvalita --> velká datová velikost souboru --> 0 % komprese --> maximální kvalita obrazu
• 0 % kvalita --> malá datová velikost souboru --> 100 % komprese --> minimální kvalita obrazu

Další vlastnosti se skrývají pod tlačítkem pokročilá nastavení. Možnost vložení/nevložení komentáře, exif dat a miniatury obrázku. Optimalizovat a progresivní nejsou parametry, ale jedná se o typ JPEG Formátu. U optimalizovaného typu je komprese ještě o něco lepší, ale některé staré prohlížeče ho nepodporují. Progresivní typ je jakousi obdobou prokladu známého z formátu GIF - obdobně jako v něm je progresivní JPEG přenášen a zobrazován coby sekvence datových balíčků, přičemž první balíčky poskytují pouze hrubý náhled, který se s dalším přenosem zpřesňuje k finální kvalitě. Pozor progresivní typ JPEGu některé aplikace nepodporují. Vyhlazení nastavené na maximální hodnotu (1,00) zmenší velikost souboru o cca 2-5%.

Pokud chcete docílit efektivního využití Jpeg komprese, je možne obrázek před uložením mírně rozmáznout. K rozmáznutí lze použít Filtry --> Rozostření --> Gaussovo rozostření. Velikost rozostření nastavte na relativně malou hodnotu. Pro obrázek, který se nachází níže, bylo použito rozostření o velikosti 10.

Bez rozmáznutí

Velikost: 459 KB

S rozmáznutím

Velikost: 181 KB

PNG

I při ukládání do formátu PNG je možné nastavit několik parametrů.

Mezi nejjednodušší parametry, které lze nastavit patří: vložení/nevložení komentáře, data vytvoření, barvy pozadí a hodnoty barvy u průhledných barev. Důležitým parametrem je možnost vložení informace o Gamatu. Posuvník komprese umožnuje nastavit úroveň použité komprese. Prokládání Adam7 je obdoba prokladu známého z formátu GIF.

Závěr

Z předcházejících odstavců je zřejmé, že optimalizace grafiky pro webovské stránky není nijak komplikovaná. I když by bylo lepší, pokud by šlo odlišně nastavit různé části obrázku, stejně jako u Photoshopu.