LINUXSOFT.cz Přeskoč levou lištu
Uživatel: Heslo:  
   CZUKPL

> Gimp - GRAFIKA PRO WEB (3.)

Optimalizace grafiky. Dnešní díl pojednává o optimalizaci webové grafiky prostřednictvím gimpu.

31.8.2005 06:00 | Yippee | Články autora | přečteno 46084×

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.

Velikost obrazu
v pixelech
Datová velikost
JPEG
1984x1488592,0 KB
1280x960309,0 KB
1024x786212,0 KB
  800x600142,0 KB
  700x525115,0 KB
  600x450  91,4 KB
  125x94  12,0 KB
    50x38     6,9 KB

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ů.

Počet
barev
GIFPNG
256861 KB752 KB
128678 KB608 KB
  64526 KB485 KB
  32424 KB400 KB
  16317 KB299 KB
    8253 KB240 KB
    4197 KB184 KB
    2  92 KB  80 KB

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.

ParametrVelikost
s komentářem301,268 KB
bez komentáře308,243 KB
prokládané
bez komentáře
308,243 KB
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%.

KvalitaVelikost
100%1360 KB
  75%  459 KB
  50%  261 KB
  25%  155 KB
    0%    28 KB

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.

KompreseVelikost
01 443 KB
5  661 KB
9  651 KB

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.

Verze pro tisk

pridej.cz

 

DISKUZE

screenshoty v jpg 3.9.2005 16:06 mrzout




Příspívat do diskuze mohou pouze registrovaní uživatelé.
> Vyhledávání software
> Vyhledávání článků

13.9.2017 8:00 /František Kučera

Máš rád svobodný software a hardware nebo se o nich chceš něco dozvědět? Zajímá tě DIY, CNC, SDR nebo morseovka? Přijď na sraz spolku OpenAlt – tentokrát netradičně v pondělí: 18. září od 18:00 v Radegastovně Perón (Stroupežnického 20, Praha 5).


Přidat komentář

3.9.2017 20:45 /Redakce Linuxsoft.cz
PR: Dne 21. září 2017 proběhne v Praze konference "Mobilní řešení pro business". Hlavní tématy konference budou: nejnovější trendy v oblasti mobilních řešení pro firmy, efektivní využití mobilních zařízení, bezpečnostní rizika a řešení pro jejich omezení, správa mobilních zařízení ve firmách a další.
Přidat komentář

15.5.2017 23:50 /František Kučera
Máš rád svobodný software a hardware nebo se o nich chceš něco dozvědět? Zajímá tě DIY, CNC, SDR nebo morseovka? Přijď na sraz spolku OpenAlt, který se bude konat ve čtvrtek 18. května od 18:00 v Radegastovně Perón (Stroupežnického 20, Praha 5).
Přidat komentář

12.5.2017 16:42 /Honza Javorek
PyCon CZ, česká konference o programovacím jazyce Python, se po dvou úspěšných ročnících v Brně bude letos konat v Praze, a to 8. až 10. června. Na konferenci letos zavítá např. i Armin Ronacher, známý především jako autor frameworku Flask, šablon Jinja2/Twig, a dalších projektů. Těšit se můžete na přednášky o datové analytice, tvorbě webu, testování, tvorbě API, učení a mentorování programování, přednášky o rozvoji komunity, o použití Pythonu ve vědě nebo k ovládání nejrůznějších zařízení (MicroPython). Na vlastní prsty si můžete na workshopech vyzkoušet postavit Pythonem ovládaného robota, naučit se učit šestileté děti programovat, efektivně testovat nebo si v Pythonu pohrát s kartografickým materiálem. Kupujte lístky, dokud jsou.
Přidat komentář

2.5.2017 9:20 /Eva Rázgová
Putovní konference československé Drupal komunity "DrupalCamp Československo" se tentokrát koná 27. 5.2017 na VUT FIT v Brně. Můžete načerpat a vyměnit si zkušenosti z oblasti Drupalu 7 a 8, UX, SEO, managementu týmového vývoje, využití Dockeru pro Drupal a dalších. Vítáni jsou nováčci i experti. Akci pořádají Slovenská Drupal Asociácia a česká Asociace pro Drupal. Registrace na webu .
Přidat komentář

1.5.2017 20:31 /Pavel `Goldenfish' Kysilka
PR: 25.5.2017 proběhne v Praze konference na téma Firemní informační systémy. Hlavními tématy jsou: Informační systémy s vlastní inteligencí, efektivní práce s dokumenty, mobilní přístup k datům nebo využívání cloudu.
Přidat komentář

15.4.2017 15:20 /František Kučera
Máš rád svobodný software a hardware nebo se o nich chceš něco dozvědět? Zajímá tě IoT a radiokomunikace? Přijď na sraz spolku OpenAlt, který se bude konat ve středu 19. dubna od 18:30 v Šenkovně (Sokolská 60, Praha 2).
Přidat komentář

5.3.2017 19:12 /Redakce Linuxsoft.cz
PR: 23. března proběhne v Praze konferenci na téma Cloud computing v praxi. Hlavními tématy jsou: Nejžhavější trendy v oblasti cloudu a cloudových řešení, Moderní cloudové služby, Infrastruktura současných cloudů, Efektivní využití cloudu, Nástrahy cloudových řešení a jak se jim vyhnout.
Přidat komentář

   Více ...   Přidat zprávičku

> Poslední diskuze

18.9.2017 14:37 / Rojas
high security vault

15.9.2017 7:33 / Wilson
new zealand childcare jobs

31.8.2017 12:11 / Jaromir Obr
Re: ukůládání dat ze souboru

30.7.2017 11:12 / Jaromir Obr
Národní znaky

27.7.2017 12:24 / Jaromir Obr
Cteni/zapis

Více ...

ISSN 1801-3805 | Provozovatel: Pavel Kysilka, IČ: 72868490 (2003-2017) | mail at linuxsoft dot cz | Design: www.megadesign.cz | Textová verze