Příprava obrázků

Datový formát - Grafický program - Datový objem - JPG - GIF - Další formáty - Průhledné obrázky - Animované gify

Datový formát

Obrázek je soubor. Na internetu se běžně používají dva grafické formáty -- .jpg a .gif. Stručně řečeno jpg je lepší na fotografie, gif na všechno ostatní.

Jak udělat obrázek (pro začátečníky)

Jak se dá získat obrázkový soubor:

Jinými slovy, možností je více, ale cílem musí být soubor ve formátu .gif nebo .jpg

Grafický program

Existují jich tisíce. Například já používám program Paint Shop 5. Pro současné potřeby webové grafiky je naprosto dokonalý a neznám nikoho, kdo by v něm rozuměl všem funkcím. Nižší verze tak dobré nejsou. Adobe Photoshop se dá také použít, ale je dražší a záhadněji ovladatelný. Microsoft dodává s FrontPagem 98 nějaký grafický program, který je podle mých zkušeností naprosto (naprosto) nepoužitelný, FrontPage 2000 u sebe editor nemá.

Hlavním kritériem použitelnosti editoru je, zda umí ukládat do jpg a gif. Takže třeba Malování z Windowsů je na nic.

Datový objem

Hlavní přikázání webového grafika zní: obrázky se nesmějí dlouho stahovat. (Proto jsou gif i jpg formáty kompresní.)

forma optimum snesitelné maximum
tlačítko 2 kB 5 kB
pozadí stránky 2 kB 10 kB
reklamní baner 8 kB 20 kB
fotografie 15 kB 40 kb
zmenšenina fotky 5 kB 10 kB
obrázkový nadpis 3 kB 8 kB
diagram, komix 60 kB

Dávat na web obrázek větší než takových 60 kB je vcelku nesmysl, protože se na jedné obrazovce stejně nemůže patřičně zobrazit.

JPG

Formát JPG (též JPEG) je vhodný pro ukládání fotografií a obrázků s velkou barevnou hloubkou. Jpeg neumožňuje dělat průhledné nebo animované obrázky.

Používá ztrátovou kompresi, to znamená, že část informace vypouští. Dělá to tak, aby to lidské oko pokud možno nepoznalo. Míra této komprese se dá nastavit v grafickém programu. Ale pozor, po každém znovuotevření a uložení se opět provádí komprese, takže se tím obrázek stále znehodnocuje. Je proto dobré mít předlohu uloženou v něčem neztrátovém a po každé úpravě importovat do jpg. 

GIF

GIF také používá kompresi, ale neztrátovou, takže jsou ty soubory relativně větší než JPG, ale zato jsou přesné (zachovávají barvy a kontury). Může se v něm vyskytovat maximálně 256 barev. Jedna z barev se může označit jako průhledná (tu prohlížeč potom nezobrazí), gify též podporují animace.

Barevná hloubka GIFu

Na Internetu záleží na každém bitu, a proto čím jsou obrázkové soubory menší, tím lépe. Je zbytečné kódovat v gifu 256 barev, když používá třeba jenom dvě nebo čtyři. Pokud se v grafickém programu sníží barevná hloubka (počet barev), podstatně se ušetří velikost souboru (u černobílého souboru až osminásobně). Postup při snižování počtu barev se opět liší od programu k programu. V angličtině je to obvykle příkaz "decrease color depht" nebo "export - bitmap".

Další formáty

Existuje "nový" formát png, který by měl mít výhody gifu i jpegu. Ale příliš se nepoužívá, pravděpodobně kvůli nepodpoře starších prohlížečů.

Prohlížeče verze 4 v sobě mají podporu i jiných formátů; kupříkladu IE 4 podporuje minimálně bmp. Ale takový soubor rozhodně nedoporučuji do stránek zařazovat, protože je moc velký a prohlížeče kromě IE 4 (a výš) jej stejně číst neumějí.

Převážná většina grafických formátů potřebuje ke svému zobrazení plužinu (plug-in), což je podpůrný program prohlížeče. Chcete-li umístit na stránky něco hodně netradičního, musíte si na webu najít plužinu. Obrázek pak nezadávat jako <img>, ale jako <object> s odkazem na umístění plužiny.

Průhledné obrázky

V grafickém editoru můžete udělat gif, který bude mít některé části průhledné. Výhody jsou tyto:

Zprůhlednění se v každém editoru dělá jinak, idea je taková, že se vybere jedna barva a ta se nastaví jako průhledná. Jak na to:

  1. Snižte barevnou hloubku nejvýše na 256 barev, raději méně.
  2. Všechny oblasti, které mají být průhledné, vyplňte nějakou barvou (doporučuji něco kontrastního, stejně pak zmizí).
  3. Tuto barvu pak nastavte jako průhlednou. Většinou na to existuje příkaz, který dovoluje ťuknout na tu barvu. Pokud máte anglický grafický editor, hledejte příkaz, ve kterém se vyskytuje slovo "transparent".
  4. Uložte jako gif.

Opravdovým problémem průhledných gifů jsou různé přechody, které obsahují mnoho odstínů. Takové obrázky doporučuji raději dávat do jpg a zprůhlednění oželet.

Jiným problémem může být to, že je potřeba zprůhlednit více než jednu barvu. To nejde. Je potřeba všechny takové odstíny převést na jeden a ten zprůhlednit.

Animované gify

Formát gif dovoluje poskládat v sobě několik obrázků a sestavit z nich animaci. Musíte na to mít speciální program, většinou se to jmenuje "bla bla Animator". V normálním editoru si připravíte grafické sekvence, které v animátoru poskládáte, nastavíte časování a uložíte do gifu. Animované gify se ve stránkách používají úplně stejně jako normální gify, což je fantastická výhoda.

Nevýhodou animovaných gifů je značná rušivost pro čtenáře (takže se používá pouze v reklamách) a někdy i dost velký datový objem.

Další: Obrázky v HTML
Vizte též: práce se soubory

Píše Yuhů
dusan@pc-slany.cz
mail formulářem
Jak psát web O tvorbě, údržbě a zlepšování internetových stránek.

Základy HTML CSS FrontPage Hledání

Obsah

Hlavní stránka

Novinky

Download

Zdroje

Hledání


Rozšířené

Základní kurs

Jak udělat stránku

Základy HTML

Publikování

Zásady psaní

Editory

Různé prohlížeče

Editory

FrontPage 2000

FP Editor 98

Word 97

FrontPage Express

HTML tipy

Příprava obrázků

Obrázky

Odkazy

Vychytávky odkazů

Záložky

Aktivní mail

Tabulky

Úprava tabulek

Novinky tabulek

Design tabulkami

Rámy

Formátování rámů

Rámy nepoužívat

Iframe

Formuláře

Formuláře v HTML

Zápis barev

Seznam definic

Formátovací chyby

Provoz webu

Vzdálené služby

Vyhledávače

Katalogy

Správa souborů

Obsah / forma

Čeština

Meta tagy

Nastavení serveru

Používání prohlížeče

CSS styly

CSS styly

Úvod do CSS

Struktura textu

CSS prakticky

Přehled vlastností

Složitější deklarace

Délkové jednotky

Pozicování

Sloupce pozicováním

Okraje objektů

Odlišení prohlížečů

Omezení CSS

Odlišný tisk

Dynamické HTML

Filtry

Příklady filtrů

Různé barvy odkazů

Barva rolovací lišty

 


Jak psát web: http://dusan.pc-slany.cz/internet/

Píše Yuhů: autorova stránka, mail: dusan@pc-slany.cz

Sláva kočkám! Poslední aktualizace 05.05.2001