|
Obrázky
Úvod
"Povolené" velikosti souborů Grafický editor
Animované gify a průhledné obrázky Tag IMG
Úvod
V podstatě se používají dva grafické formáty - GIF a JPG. Oba dva formáty
používají kompresi. Přitom GIF je přesnější, protože komprese je neztrátová,
ale na úkor velikosti souboru. U formátu JPG je komprese ztrátová a díky tomu
je i velikost obrázku menší, ale neumí zase ukládat průhledné obrázky, nebo
vytvářet animace.
Takže, JPG je vhodný pro fotografie nebo obrázky, kde je
počet barev větší jak 256, neboť gif může mít maximálně 256 barev.
GIF je zase vhodný pro animace, průhledné obrázky (loga apod.). Používejte
vždy, pokud to jde, co nejméně barev, tím ušetříte lidem čas při stahování, protože
čím více barev, tím větší velikost souboru. Pomoci by vám mohla tabulka "povolených"
velikostí.
"Povolené" velikosti souborů
Možnost |
Optimální |
Snesitelné |
Pozadí |
2 KB |
10 KB |
Foto |
15 KB |
40 KB |
Zmenšenina fotografie |
5 KB |
10 KB |
Reklamní baner |
8 KB |
20 KB |
Tlačítka |
2 KB |
5 KB |
Jestliže narazíte na další formáty, tak bych je
nedoporučoval umisťovat na stránky, protože buď je nebudou podporovat různé
prohlížeče nebo budou mít příliš velkou velikost např. BMP.
Grafický editor
Na našem trhu je mnoho grafických editorů
(Paint Shop Pro, Adobe Photoshop, GIMP pro Windows). Liší se svoji cenou a
možnostmi. Být vámi, tak bych si našel editor, který umí hlavně pracovat a ukládat
formáty JPG a GIF. Existují i verze zadarmo, ale nemají tolik možností jako např.
Paint Shop Pro. Dobrým programem (ale jen na vytváření gif animací) je Animagic GIF.
Animované gify a průhledné obrázky
Animovaný gif je v podstatě posloupnost jednotlivých obrázků uložených ve
formátu gif v jeden. Budete nato potřebovat program, opět je tady hodně programů
zadarmo nebo za peníze, já používám Animagic GIF. V grafickém editoru si uděláte
obrázky tak, jak půjdou za sebou (jako snímky ve filmu), uložíte si je, nejlépe
jmeno001.gif, jmeno002.gif atd. a pak to spojíte ve speciálním programu, kde si
můžete ještě nastavit rychlost, různé efekty a já nevím co ještě.
Průhledné obrázky "transparentní" mají své výhody a já je hodně používám.
Jde o to, že můžete nastavit některou barvu v obrázku průhlednou
"transparentní". Obrázek může mít však nejvíce jen 256 barev.
A bude nejlépe, když ho uložíte jako gif. Tyto obrázky se používají jako loga,
tlačítka, nebo i do animovaných gifů. Největší výhoda je ta, že můžete klidně měnit pozadí na
stránkách a obrázek necháte být.
Tag <img>
Tag img může vypadat takhle: <img src="obrazek.xxx" border="0" alt="popis"
width="60" height="40" align="right"> Teď se pokusím jednotlivé položky popsat.
Především samotný IMG tag je nepárový (nemusí být ukončený tagem </img>
a hned první položka 'src' je povinná (jako jediná v tomhle tagu). Ukazuje cestu,
kde je umístěn obrázek. V našem případě je umístěn ve stejném adresáři jako samotná
stránka a je formátu xxx. Kdyby byl obrázek umístěn třeba ještě v adresáři img,
tak by to vypadalo asi takhle: src="img/obrazek.xxx". Může se i použít absolutní
adresa typu http://www.neco.cz/img/obrazek.xxx.
Položka border obalí obrázek rámečkem. Velikost tloušťky rámečku se udává v pixelech.
Jestliže nechcete žádný rámeček, tak zadejte jako v našem případě border="0".
Položka alt popisuje obrázek,
když na něj najedete myší a chvíli počkáte. Ještě navíc
usnadňuje nevidomým lépe číst vaše stránky, protože používají hlasové programy, které čtou
tyhle popisky, tak když vás to moc neunaví, tak je používejte.
Položky height a weight udávají velikost obrázku v pixelech.
Height je šířka a weight je výška. Pokud můžete, tak je používejte, ale vždy udávejte takovou
velikost jaká je skutečná velikost obrázku. Protože, při větší velikosti obrázek bude
"rozpixelovaný" (ztratí se kvalita) a při menší počítejte s tím, že se obrázek bude zbytečně stejně
dlouho natahovat jako skutečná velikost a navíc se nemusí vykreslit správně.
Ještě jde zadat velikost v procentech, ale to bych nepoužíval. Jestli chcete
mít menší obrázek, třeba jako náhled, tak to udělejte v grafickém programu.
Položka align je pro nastavení obtékání textu (podobně jako obrázky ve wordu), kdy
right je pravá strana a left je levá strana. Typickým příkladem pravé
strany je obrázek pivního kríglu nahoře. Položka align ještě umožňuje umístění na řádku,
jako třeba na střed (center) a další, ale to se tak moc nepoužívá.
Do tagu IMG se mohou přidávat další položky jako např. usemap (tzv. klikací mapa), ale ty už jsou ve spojení
s dalšími tagy.
Nahoru
|
|