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, toto je ten popisek 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
Příbuzná témata:  Odkazy  Formuláře 

Jestliže máte dotaz, tak mi napište: biaggi@biaggi.cz

Poslední aktualizace: 29. 9. 2001











Tvorba internetových stránek od 1.000 Kč



Výroba www stránek od 1.000 Kč
reklama

Programování HTML

Menu :  Html  CSS  Ostatni  Odkazy