Jak jsem optimalizoval jedno logo

A jakpak je to s grafikou?

Nikdo učený z nebe nespadl a všichni děláme chyby! Jedno pravidlo, jak být úspěšný v zaměstnání dokonce drze tvrdí, že žádný šéf nebude zaměstnávat podřízeného, který se nikdy nemýlí.

Znám ale křišťálovou studánku,
kde nejhlubší je net,
jejíž autor pouští se
na příliš tenký led.

Dosti shovívavé poezie - pojďme se dnes podívat na nám již dobře známý server "nejenom o technologiích". Máte pravdu! Pro změnu se podíváme opět na NetDay v jeho dnešní podobě. (Zde je nutno podotknout, že "dnes" je 25. června 2001 a NetDay má za sebou avizovaný konec, jenže zase na druhou stranu je již ohlášen i jeho další nový (a lepší :-) začátek. To je i důvod, proč se neodkazujeme na námi kritizované prvky přímo na server Netday - http://www.netday.cz - nýbrž ony pranýřované souborky vystavujeme z našich vlastních zdrojů. Ano, není to ideální stav a je to svým způsobem i porušení autorských práv. Budiž nám polehčující okolností, že tak činíme nezištně, s uvedením zdroje a pro potřeby osvěty.)
Přestaňme ale chodit okolo horké kaše a vrhněme se přímo do barevného světa grafiky! Čtěte dále...

No, zase tak barevné to nebude - NetDay má (znovu upozorňuji, že "dnes má") střízlivý a nenápaditý šedo-šedý design. Nu což, vkus může být různý a jednoduchým designem se nikdy nic nepokazí. Opravdu nikdy? No, snad někdy ano...

Vím, pan Cendra není grafik (já také ne), ale některé základní věci by vědět měl. I programátor přece ví, že musí maximálně minimalizovat (děkuji panu Wencovi za krásné sousloví plné cizích slov ;-) tok dat po síti. A grafika je, dlužno přiznat, zpravidla hlavní žrout přenesených B, KB, MB, GB, TB, ....(jak je to dál? :-). Pojďme si posvítit na logo serveru NetDay:

Uvedené logo je původní, stažené ze serveru NetDay dne 25. 6. 2001 v 11:00

velikost: 20.400 B (19,9 kB)

formát: jpg (!)

Maminko, proč má to logo napravo takovej volnej prostor?
Nevím, synáčku, asi tvůli layoutu (neboli rozložení) obrázků na stránce. Je to jednoduché a rychlé - jednobarevná plocha zase tolik nezabere - pokud je zvolen vhodný formát. Ty to ale tak nedělej! Obrázek si můžeš umístit pomocí CSS stylů. Co říkáš? Že to ne vždycky a všude ideálně funguje? No, to máš pravdu. Můžeš to udělat i tak, že vedle přesně oříznutého loga vložíš obrázek, který bude mít velikost 1x1 pixel v potřebné barvě (nebo transparentní), a který roztáhneš pomocí parametrů HEIGHT="" a WIDTH="" na potřebnou velikost.
Tatínku, ty jsi říkal, že formát JPEG je vhodný na fotky! Myslíš, že bych udělal dobře, kdybych to logo zkusil převíst do formátu GIF, kterej se mi zdá pro tento typ grafiky vhodnější?
Kluku, z tebe jednou něco bude! Ano, máš pravdu. JPEG používá ztrátovou kompresi, kterou si můžeš zpravidla nastavit. Používej ho všude tam, kde je množství barev bez ostrých ohraničení, zato se spoustou barevných přechodů. Naopak GIF umožňuje uložit pouze 256 barev. Co je pro nás ale nejdůležitější? No přece to, že těch barev umožňuje uložit i daleko méně! No a na tom logu tedy moc barev nevidím. Zkus ho uložit třeba jen se šesti barvama. Ještě si tam zvol, aby použitá paleta pro GIF byla "bezpečná pro web" - to znamená, že se použijí pouze barvy, které se skutečně a určitě zobrazí všem uživatelům stejně. Navíc Ti ještě musím prozradit, že GIF používá neztrátovou komprimaci, která si nejlépe poradí s velkými jednobarevnými plochami. To se nám hodí, ne?
Babičko, já to tady převádím do toho GIFu a ňák se mi tu mění ty barvy nebo co!?
No tak to bude asi proto, že původní obrázek nebyl v bezpečných barvách. On ani být nemohl, protože byl ve formátu JPEG, který nemá pevně danou paletu barev, ale barevný "popis" pomocí barevných složek RGB (Red Green Blue). Jestli si o tom chceš něco málo přečíst, podívej se článek, který napsal pan Wenca - tam se dozvíš, jak pan Cendra (ne)převádí RGB barvy do jejich hexadecimálního vyjádření. Tak už nezdržuj a ukaž, co jsi to vyrobil?!

Uvedené logo je upravené a převedené do formátu GIF

velikost: 2.850 B (2,78 kB)

formát: gif

Dědečku, a co když pan Cendra přece jen potřeboval z nějakýho důvodu JPEG? Co když jeho grafickej program neumí s GIFem pracovat?
Pan Cendra (nebo jeho grafik) používá k práci Adobe Photoshop 5.0 - jak můžeme z původního loga vyčíst. NetDay asi hodně nese, že si může dovolit pro pár obrázků zakoupit tak drahý program. Tento program je špička mezi grafickými programy a GIF určitě umí. No ale máš pravdu, co když? Víš ty co?! Zkus ten jeho JPEG trošku zoptimalizovat - nastav kompresi tak, aby to bylo ještě použitelné.... Ukááááž? No, pěkně Ti to jde!

Uvedené logo je optimalizované ve formátu JPEG. Kvalita je (myslím) ještě stále použitelná.

velikost: 4.714 B (4,6 kB)

formát: jpg

Strejdo, já jsem ale číman! Koukej, jak jsem zmenšil tuhle grafiku...
Tím se moc nechlub! to by mělo být samozřejmostí. I v grafice platí, že každý přenesený byte (bajt :-) se neplatí. No a že se Ti povedlo zmenšit ono logo z 20.400 bytů na 2.850 bytů? To o něčem svědčí. Doufám jen, že si to zapamatuješ a budeš používat vhodnou optimalizaci a správné grafické formáty. Tak si běž ještě něco zkusit!

Tetóóó, hele, co jsem proved' s Cendrou
Ale já nic nevidím! Žádný rozdíl! Možná, že ta fotka, co se mi tu zobrazila jako první je trošku flekatější. Ale že bych musela na tu hezčí čekat o tolik dýl?...

Foto pana Cendry z jeho serveru NetDay velikost: 3.981 B (3,88 kB) formát: jpg	Totéž foto po optimalizaci velikost: 1.889 B (1,84 kB) formát: jpg

Grafici! Jste tu? Jestli ano, zkuste mi to, prosím ještě vysvětlit... Nikdo z rodiny není grafik, takže jim až zas tam moc nevěřím. Výsledky to ale nějaké přineslo, ne?

Přeji Vám, panu Cendrovi i sobě jen samé optimalizované kódy a grafiku!

Váš s úctou Álois Gustavson