.

Štítek má povinný atribut src, jehož hodnota je absolutní nebo relativní cesta k obrázku:

Pro značku K dispozici jsou následující atributy:

Tabulka 1. Atributy značek

Atribut	Popis, přijatá hodnota
alt	Atribut alt přidá k obrázku alternativní text. Zobrazuje se tam, kde se obrázek zobrazuje před načtením nebo když je grafika zakázána, a zobrazuje se také jako nápověda při najetí myší na obrázek. Syntaxe: alt="(!JAZYK:popis obrázku" . !}
crossorigin	Atribut crossorigin vám umožňuje načíst obrázky ze zdrojů v jiné doméně pomocí požadavků CORS. Obrázky načtené na plátno pomocí požadavků CORS lze znovu použít. Povolené hodnoty: anonymní – požadavek na křížový původ se provádí pomocí hlavičky HTTP a nepřenášejí se žádné přihlašovací údaje. Pokud server neposkytne přihlašovací údaje serveru, ze kterého je obsah požadován, bude obraz poškozen a jeho použití bude omezeno. use-credentials — Cross-origin požadavek se provádí předáním přihlašovacích údajů. Syntaxe: crossorigin="anonymní" .
výška	Atribut height určuje výšku obrázku v px. Syntaxe: height="300" .
ismap	Atribut ismap označuje, že obrázek je součástí mapového obrázku umístěného na serveru (mapový obrázek je obrázek s klikacími oblastmi). Když kliknete na obrázek mapy, souřadnice se odešlou na server jako řetězec URL dotazu. Atribut ismap je povolen pouze v případě, že prvek je potomkem prvku s platným atributem href. Syntaxe: ismap.
longdesc	Rozšířená adresa URL popisu obrázku, která doplňuje atribut alt. Syntaxe: longdesc="http://www.example.com/description.txt" .
src	Atribut src určuje cestu k obrázku. Syntaxe: src="kvetina.jpg" .
velikosti	Nastaví velikost obrázku v závislosti na možnostech zobrazení. Funguje pouze tehdy, když je zadán atribut srcset. Hodnota atributu je jeden nebo více řetězců oddělených čárkami.
srcset	Vytvoří seznam zdrojů obrazu, které budou vybrány na základě rozlišení obrazovky. Lze použít společně s nebo místo atributu src. Hodnota atributu je jeden nebo více řetězců oddělených čárkami.
mapa použití	Atribut usemap určuje obrázek jako obrázkovou mapu. Hodnota musí začínat symbolem #. Hodnota je spojena s hodnotou atributu name nebo id značky
šířka	Atribut width udává šířku obrázku v px. Syntaxe: width="500" .

1.1. Adresa obrázku

Adresu obrázku lze zadat celou (absolutní URL), například:
url (http://anysite.ru/images/anyphoto.png)

Nebo přes relativní cestu z dokument nebo kořenový adresář webová stránka:
url(../images/anyphoto.png) - relativní cesta z dokumentu,
url(/images/anyphoto.png) - relativní cesta z kořenového adresáře.

To je interpretováno následovně:
../ - znamená přejít o úroveň výš, do kořenového adresáře,
obrázky/ - přejděte do složky s obrázky,
anyphoto.png - ukazuje na soubor obrázku.

1.2. Rozměry obrázku

Bez nastavení rozměrů obrázku se kresba zobrazí na stránce ve skutečné velikosti. Rozměry obrázku můžete upravit pomocí atributů width a height. Pokud je zadán pouze jeden z atributů, druhý bude vypočítán automaticky, aby byly zachovány proporce obrázku.

1.3. Formáty grafických souborů

formát JPEG (Joint Photographic Experts Group). Obrázky JPEG jsou ideální pro fotografie a mohou obsahovat miliony různých barev. Obrázky se komprimují lépe než obrázky GIF, ale text a velké plochy plné barev mohou být skvrnité.

formát GIF (Formát pro výměnu grafiky). Ideální pro kompresi obrázků, které mají oblasti plné barvy, jako jsou loga. GIFy umožňují nastavit jednu z barev jako průhlednou, což umožňuje pozadí webové stránky prosvítat přes část obrázku. GIFy mohou také obsahovat jednoduché animace. Obrázky GIF obsahují pouze 256 odstínů, takže obrázky vypadají skvrnitě a nerealisticky v barvách jako plakáty.

formát PNG (přenosná síťová grafika). Obsahuje nejlepší vlastnosti formátů GIF a JPEG. Obsahuje 256 barev a umožňuje zprůhlednit jednu z barev při komprimaci obrázků na velikost menší než soubor GIF.

formát APNG (Animovaná přenosná síťová grafika). Formát obrázku založený na formátu PNG. Umožňuje ukládat animace a také podporuje průhlednost.

formát SVG (Škálovatelná vektorová grafika). Výkres SVG se skládá ze sady geometrických tvarů popsaných ve formátu XML: čára, elipsa, mnohoúhelník atd. Podporována je jak statická, tak animovaná grafika. Sada funkcí zahrnuje různé transformace, alfa masky, efekty filtrů a možnost používat šablony. Velikost obrázků SVG lze změnit bez ztráty kvality.

formát BMP (Bitmapový obrázek). Jedná se o nekomprimovaný (originální) bitmapový obrázek, jehož šablonou je obdélníková mřížka pixelů. Bitmapový soubor se skládá ze záhlaví, palety a grafických dat. V záhlaví jsou uloženy informace o grafickém obrázku a souboru (hloubka pixelu, výška, šířka a počet barev). Paleta je označena pouze v těch bitmapových souborech, které obsahují obrazy palet (8 nebo méně bitů) a sestávají z ne více než 256 prvků. Grafická data představují samotný obrázek. Barevná hloubka v tomto formátu může být 1, 2, 4, 8, 16, 24, 32, 48 bitů na pixel.

ICO formát (ikona Windows). Formát úložiště ikon souborů v systému Microsoft Windows. Ikona Windows se také používá jako ikona na webových stránkách na internetu. Je to obrázek tohoto formátu, který se zobrazuje vedle adresy webu nebo záložky v prohlížeči. Jeden ICO soubor obsahuje jednu nebo více ikon, přičemž velikost a barvu každé z nich lze nastavit samostatně. Velikost ikony může být libovolná, ale nejběžnější jsou čtvercové ikony se stranami 16, 32 a 48 pixelů.

2. Označte

Štítek

Tag má k dispozici atribut name, který udává název mapy. Hodnota atributu name pro značku

Živel

3. Označte

Štítek popisuje pouze jednu aktivní oblast jako součást obrazové mapy na straně klienta. Prvek nemá uzavírací značku. Pokud se jedna aktivní oblast překrývá s jinou, bude implementován první odkaz ze seznamu oblastí.

Tabulka 2. Atributy značek

Atribut	Stručný popis
alt	Nastaví alternativní text pro aktivní oblast mapy.
souřadnic	Určuje polohu oblasti na obrazovce. Souřadnice jsou uvedeny v jednotkách délky a odděleny čárkami: Pro kruh— souřadnice středu a poloměru kružnice; Pro obdélník— souřadnice levého horního a pravého dolního rohu; Pro polygon— souřadnice vrcholů polygonu v požadovaném pořadí, pro logické dokončení obrázku se také doporučuje uvést poslední souřadnice rovnající se prvnímu.
stažení	Doplňuje atribut href a říká prohlížeči, že zdroj by měl být načten v okamžiku, kdy uživatel klikne na odkaz, namísto toho, aby jej například musel nejprve otevřít (jako soubor PDF). Zadáním názvu atributu tedy pojmenujeme načtený objekt. Je povoleno použít atribut bez uvedení jeho hodnoty.
href	Určuje adresu URL odkazu. Lze zadat absolutní nebo relativní adresu odkazu.
hreflang	Určuje jazyk přidruženého webového dokumentu. Používá se pouze ve spojení s atributem href. Akceptované hodnoty jsou zkratka skládající se z dvojice písmen označujících kód jazyka.
média	Určuje, pro jaké typy zařízení bude soubor optimalizován. Hodnotou může být jakýkoli mediální dotaz.
rel	Rozbalí atribut href o informace o vztahu mezi aktuálním a souvisejícím dokumentem. Přijímané hodnoty: alternativní - odkaz na alternativní verzi dokumentu (například tištěná podoba stránky, překlad nebo zrcadlo). autor — odkaz na autora dokumentu. záložka – Trvalá adresa URL používaná pro záložky. help - odkaz na nápovědu. licence - odkaz na informace o autorských právech k tomuto webovému dokumentu. další/předchozí - označuje vztah mezi jednotlivými URL. Díky tomuto označení může Google určit, že obsah těchto stránek souvisí v logickém sledu. nofollow – zabrání vyhledávači sledovat odkazy na dané stránce nebo konkrétním odkazu. noreferrer - označuje, že při sledování odkazu by prohlížeč neměl odesílat hlavičku HTTP požadavku (Referrer), která zaznamenává informaci o tom, ze které stránky návštěvník webu přišel. prefetch - označuje, že cílový dokument by měl být uložen do mezipaměti, tzn. Prohlížeč na pozadí stáhne obsah stránky do své mezipaměti. hledat – Označuje, že cílový dokument obsahuje vyhledávací nástroj. tag - určuje klíčové slovo pro aktuální dokument.
tvar	Určuje tvar aktivní oblasti na mapě a její souřadnice. Může nabývat následujících hodnot: rect — obdélníková aktivní oblast; kruh — aktivní plocha ve tvaru kruhu; poly — aktivní plocha ve tvaru mnohoúhelníku; výchozí — aktivní plocha zabírá celou plochu obrázku.
cílová	Určuje, kam se dokument po kliknutí na odkaz stáhne. Přijímá následující hodnoty: _self — stránka se načte do aktuálního okna; _blank — stránka se otevře v novém okně prohlížeče; _parent — stránka se načte do nadřazeného rámce; _top – stránka se načte v celém okně prohlížeče.
typ	Určuje typ MIME souborů odkazů, tj. přípona souboru.

4. Ukázka tvorby obrazové mapy

1) Označte původní obrázek do aktivních oblastí požadovaného tvaru. Souřadnice oblastí lze vypočítat pomocí programu pro zpracování fotografií, např. Adobe Photoshop nebo Malovat.

Rýže. 1. Příklad označení obrázku pro vytvoření mapy

2) Nastavte název karty přidáním ke štítku

Jpg" alt="(!JAZYK:foto_květin" width="680" height="383" usemap="#flowers"> !}
Rýže. 2. Ukázka tvorby obrázkové mapy, když kliknete kurzorem myši na květinu, přejdete na stránku s popisem

Tento tutoriál se zabývá tím, jak ozdobit webovou stránku přidáním grafiky. Seznámíme se s nejběžnějšími formáty obrázků, zjistíme, který tag se používá pro přidávání obrázků na stránku, pochopíme alternativní popisky a zarovnání textu a grafiky. Seznámíme se také se základními atributy obrázků a naučíme se, jak upravit šířku a výšku obrázku. Dále několik slov o používání obrázků jako odkazů a o tom, co jsou miniatury obrázků. Na závěr uvádíme několik obecných tipů pro použití grafiky na webové stránce.

Přidávání obrázků na webovou stránku
Pokud webová stránka neobsahuje nic jiného než textové informace, může být pro někoho zajímavá díky informacím na ní prezentovaným, ale je nepravděpodobné, že by se někdo odvážil označit ji za atraktivní. Přidání obrázků na webovou stránku je velmi snadné. Přidání grafiky, která může dát stránce profesionální vzhled, vyžaduje určité znalosti. O tom je dnešní lekce.

Dva nejpoužívanější obrazové formáty na internetu jsou GIF a JPEG. Formát vyvinutý a pojmenovaný skupinou JPEG (Joint Photographic Experts Group) se obvykle používá k ukládání obrázků s plynulými barevnými přechody, jako jsou fotografie.

Téměř všechny ostatní grafické prvky jsou uloženy ve formátu GIF (Graphics Interchange Format) – formátu pro výměnu grafiky. V současné době existuje další nový grafický formát, který je stále populárnější: PNG (Portable Network Graphics). Očekává se, že časem nahradí formát GIF. S ukládáním všech grafických souborů v tomto formátu však nespěchejte, protože ještě není podporován všemi prohlížeči.

Všechny obrázky jsou přidány na webovou stránku pomocí stejné značky, která se nazývá zdrojová značka obrázku . Pravděpodobně nyní můžete sami určit, že tato položka se skládá ze skutečné značky , jeho atribut (scr) a hodnotu tohoto atributu (location). Protože je však použití atributu scr povinné, je vhodnější hovořit o tomto záznamu jako o jedné obecné značce. Možná jste si také všimli, že značka zdroje obrázku nemá odpovídající uzavírací značku. Toto je samostatná, samostatná značka, takže nezapomeňte na konec přidat koncové lomítko: .

#1058;D XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DТD/xhtml1/transitional.dtd"> První obrázky e> Tento obrázek byl přidán na mou první webovou stránku.r >

Přidání alternativních titulků
Při cestování po internetu jste si jistě nejednou všimli různých nápisů, které se zobrazí, když najedete myší na nějaký grafický prvek webové stránky. Tyto štítky obvykle poskytují některé další informace o samotném obrázku nebo o oblasti stránky, kterou zabírá.

Níže uvedený příklad kódu HTML ukazuje, jak je atribut alt přidán do značky . Stejně jako atribut src i atribut alt sděluje webovému prohlížeči některé další informace o obrázku a lze jej také vždy použít ve spojení se značkou .

Atribut alt určuje alternativní text pro grafický prvek přidaný na webovou stránku. Tento text se nazývá alternativní text, protože se může objevit na obrazovce jako alternativa k samotnému obrázku. Atribut alt má ještě jeden velmi důležitý účel. Mnoho návštěvníků internetu, kteří používají nízké přenosové rychlosti, může dát svému prohlížeči pokyn, aby nenačítal ani nezobrazoval grafické informace. To jim umožňuje rychleji načítat webové stránky na jejich počítačích.

Pamatujte také, že ne všechny prohlížeče jsou schopny zobrazovat grafiku ve svých oknech. Například prohlížeč Lynx tuto funkci vůbec nepodporuje. Atribut alt tedy umožňuje webdesignérovi mít jistotu, že pokud návštěvník jeho webové stránky na své obrazovce neuvidí obrázek, bude moci vidět alespoň textové informace přidané k tomuto obrázku.

Ačkoli atribut alt lze definovat pro každou značku , dejte pozor, abyste k některým grafickým prvkům nepřiřadili nevhodné textové zprávy. Například nemá smysl přidávat alternativní textové popisky k různým prvkům vzhledu webové stránky. Chcete-li se těmto chybám vyhnout, můžete atribut alt takových prvků přiřadit prázdné hodnotě (alt=""). Pokud nenastavíte žádné další hodnoty atributů, prohlížeč vykreslí obrázek v původní velikosti a zarovná horní okraj obrázku s horním okrajem sousedního textového řetězce. Obě tyto možnosti můžete změnit pomocí značek šablony stylů.

Atributy obrázku
Pro značku K dispozici jsou atributy, které vám umožňují změnit velikost obrázku. Některé z těchto atributů jsou uvedeny níže.
výška— Určeno v pixelech nebo procentech — Určuje výšku obrázku
šířka— Určeno v pixelech nebo procentech — Určuje šířku obrázku.

Nastavení výšky a šířky obrazu
Rozměry obrázku umístěného na webové stránce lze určit pomocí atributů výška a šířka. Hodnoty těchto atributů jsou zadány buď jako pevný počet pixelů, nebo jako procento vzhledem k velikosti stránky. Podívejte se na níže uvedený HTML kód. V prvním tagu jsou rozměry původního obrázku, které jste již viděli v předchozích nákresech této lekce, nastaveny na 60 pixelů vertikálně a 60 pixelů horizontálně. Ve druhém tagu je šířka stejného obrázku nastavena na 6 % šířky stránky a výška na 10 % výšky stránky. Obrázek ukazuje, jak oba tyto obrázky vypadají v okně prohlížeče.

Při zobrazení obrázku ve svém okně je prohlížeč stejně dobrý ve zpracování hodnot zadaných v pixelech a procentech. Uvědomte si však, že počítače návštěvníků vaší webové stránky mohou být nastaveny na jiné rozlišení obrazovky než nainstalované pro váš monitor. Co z toho vyplývá? Například rozlišení monitoru je nastaveno na 800x600. V předchozím příkladu byla šířka grafiky přidávané na webovou stránku nastavena na 6 % šířky stránky, což by při tomto rozlišení bylo 48 pixelů. Pokud si stejný obrázek prohlížíte na monitoru s rozlišením 1024x800, bude zadaným 6 % šířky stránky odpovídat šířce 61 pixelů.

Při změně velikosti obrázku nezapomeňte nastavit obě hodnoty tak, aby odpovídaly jeho výšce a šířce. Pokud změníte pouze jednu z těchto hodnot, samotný obraz se na obrazovce objeví vertikálně nebo horizontálně roztažený. Alternativní možností je upravit velikost obrázku pomocí grafického editoru.

Můžete vytvořit iluzi, že se obrázek načítá rychleji. Bez ohledu na to, zda je velikost obrázku změněna nebo ne, vždy zahrňte hodnoty atributů výšky a šířky, protože prohlížeči sdělí důležité informace o tom, kolik místa by mělo být na stránce přiděleno pro umístění obrázku. V tomto případě může prohlížeč určit prostor potřebný pro obrázek a pokračovat ve vytváření dalších prvků stránky, aniž by zastavil načítání samotného obrázku. Tímto způsobem se zdá, že se stránka načítá rychleji, protože návštěvníci nebudou muset čekat na úplné načtení obrázku, než konečně uvidí další informace prezentované na stránce.

Pokud opravdu potřebujete, aby obrázek zabíral určité množství místa po šířce stránky, použijte procentuální hodnoty. V tomto případě bude obraz na obrazovce jakéhokoli monitoru zabírat stejnou část stránky jako na vaší obrazovce. Pokud chcete, aby rozlišení samotného obrázku (jeho velikost v pixelech) zůstalo konstantní, použijte hodnoty vyjádřené v pixelech.

Zarovnání textu a grafiky
Atribut zarovnání značek umožňuje zarovnat obrázek k pravému (pravá hodnota) nebo levému (levá hodnota) okraji textového řádku. Příklady použití tohoto atributu jsou uvedeny na obrázku.

Stejný atribut lze také použít k vertikálnímu zarovnání obrázku (opět vzhledem k textovému řetězci). Může mít tři další hodnoty: nahoře, dole a uprostřed. Pokud je atribut zarovnat nastaven na horní, horní okraj obrázku je zarovnán s horním okrajem libovolného okolního textu. Pokud je atribut zarovnat nastaven na dolní, spodní okraj obrázku je zarovnán se spodním okrajem okolního textu. Pokud je atribut zarovnání nastaven na střed, střed obrázku se zarovná na střed textového řádku.

Použití obrázků jako odkazů
Obrázky jsou dobré pro více než jen design webových stránek. Lze je úspěšně použít jako hypertextové odkazy na jiné dokumenty. HTML tento problém řeší snadno, protože obrázky jsou přeměněny na hypertextové odkazy přesně stejným způsobem jako titulky. Chcete-li to provést, musíte také použít značku, která ohraničuje prvek webové stránky, který by se měl stát odkazem na jiný dokument. Pokud má být po kliknutí na obrázek použit hypertextový odkaz, musí značka obsahovat značku pro tento obrázek.

a>

V tomto případě poté, co návštěvník webové stránky najede myší na tento obrázek, se vedle kurzoru zobrazí textová zpráva „Toto je můj autoportrét!“. Kliknutím na obrázek se otevře dokument DOC2.htm, na který odkazuje hypertextový odkaz.

Miniatury obrázků
Dalším běžným způsobem, jak využít schopnost HTML vytvářet hypertextové odkazy, je použít některé obrázky k propojení s jinými. Proč je to nutné? Faktem je, že často je velikost obrázků, které chcete publikovat na webové stránce, příliš velká a není zaručeno, že návštěvníci budou mít trpělivost čekat, až se dokončí načítání. V takových případech se vytvoří menší kopie původního obrázku, nazývaná miniatura, kterou prohlížeč dokáže načíst mnohem rychleji. Pokud má návštěvník zájem o obrázek a chce si stáhnout jeho plnou kopii, stačí kliknout na tuto miniaturu. Zde je návod, jak vypadají odpovídající HTML kódy.

a>

Jak vidíte, kliknutím na obrázek thumbnail.jpg se otevře další soubor obrázku (image.jpg). Textový řetězec, zadaný jako hodnota atributu alt, říká návštěvníkovi, jak otevřít hlavní obrázek.

Tajemství úspěšného používání obrázků
Obrázky jsou zajímavé a atraktivní, poskytují mnoho vizuálních informací a velmi snadno se přidávají na webové stránky, přesto byste se měli řídit některými z následujících pravidel, pokud opravdu chcete vytvořit web, který se stane populárním mezi uživateli internetu.

Čím větší je velikost souboru obrázku, tím déle bude trvat jeho stažení do počítače uživatele. Vzhledem k tomu, že většina internetových návštěvníků stále používá k přístupu na web připojení s nízkou šířkou pásma, velikost stahování souborů je pro ně stále kriticky důležitá. Určitě s tím počítejte a snažte se na své webové stránky umístit obrázky co nejmenší.

Důležitá je nejen velikost souboru jednotlivého obrázku, ale také celková velikost souboru celého HTML dokumentu. Čím více obrázků přidáte na webovou stránku, a to i malých, tím větší bude velikost souboru konečného dokumentu. Prohlédněte si svou stránku v různých prohlížečích a odhadněte, jak dlouho bude každému prohlížeči trvat, než ji načte.

Protože atribut alt je tak důležitý (doporučujeme jej definovat pro každou značku , při používání buďte opatrní. Ujistěte se, že obsah textové zprávy vždy odpovídá samotnému obrázku, jinak mohou být návštěvníci vaší stránky uvedeni v omyl. Totéž platí i obráceně: ujistěte se, že obrázky odpovídají textovým informacím prezentovaným na webové stránce. Fotka letadla by se hodila na web o letecké dopravě, ale na web o divoké přírodě úplně nemístná.

Na internetu můžete najít mnoho zajímavých obrázků a snadno si je uložit do počítače. Mnoho z těchto obrázků je však chráněno autorským právem. Pokud na komerční stránce najdete obrázek, který se vám líbí, zkontrolujte, zda tam nejsou nějaké poznámky o autorských právech a zda je obrázek k dispozici pro bezplatné použití.

Pokud obrázek prezentovaný na webové stránce není chráněn autorským právem, můžete jej zkopírovat do paměti počítače. Chcete-li to provést, klikněte pravým tlačítkem myši na tento obrázek a z nabídky, která se otevře, vyberte Uložit obrázek jako. Jakmile obrázek uložíte do počítače, můžete jej dále používat jako jakýkoli jiný obrázek.

Ahoj milí čtenáři blogu! V tomto článku se dozvíte vše o jak vložit obrázek do html stránky. Máte několik obrázků, které chcete umístit na svou stránku nebo chcete na svůj web umístit logo? To vše je snadné. Po přečtení tohoto článku budete moci bez problémů vkládat obrázky do svých html stránek. Chcete-li to provést, budeme podrobně mluvit o img tag a jeho atributy, se krátce podíváme na formáty grafických souborů, jako jsou gif, jpeg a png, a také se podíváme na nové funkce HTML5, které usnadňují vkládání videa a zvuku na váš web.

Protože grafická data a html text nelze kombinovat v jednom souboru, zobrazují se na webu jinak než s jinými prvky html stránek. Za prvé, grafické obrázky a další multimediální data jsou uložena v samostatných souborech. A k jejich vložení do webové stránky se používají speciální značky, které obsahují odkazy na tyto jednotlivé soubory. Zejména taková značka je img tag. Když prohlížeč narazí na takovou značku s adresou, nejprve si z webového serveru vyžádá odpovídající soubor s obrázkem, zvukem nebo videem a teprve poté jej zobrazí na webové stránce.

Volají se všechny grafické obrázky a obecně veškerá data, která jsou uložena v souborech oddělených od webové stránky implementováno prvky stránky.

Než vložíte obrázky a podrobně se podíváte na značku „img“, stojí za to naučit se něco o grafických formátech.

Grafické obrazové formáty.

Existuje mnoho různých grafických formátů, ale prohlížeče podporují jen některé. Podívejme se na tři z nich.

1. formát JPEG(Společná skupina fotografických expertů). Poměrně oblíbený formát používaný pro ukládání obrázků. Podporuje 24bitové barvy a zachovává všechny polotóny na fotografiích beze změny. Jpeg ale nepodporuje průhlednost a deformuje malé detaily a text v obrázcích. JPEG se používá především pro ukládání fotografií. Soubory v tomto formátu mají přípony jpg, jpe, jpeg.

2. formát GIF(Formát výměny grafiky). Hlavní výhodou tohoto formátu je možnost uložit více obrázků najednou do jednoho souboru. To vám umožní vytvářet celá animovaná videa. Za druhé, podporuje transparentnost. Hlavní nevýhodou je, že podporuje pouze 256 barev, což není vhodné pro ukládání fotografií. GIF se používá hlavně k ukládání log, bannerů, obrázků s průhlednými oblastmi a obsahujících text. Soubory v tomto formátu mají příponu gif.

3. formát PNG(Přenosná síťová grafika). Tento formát byl vyvinut jako náhrada za starší GIF a do určité míry i JPEG. Podporuje průhlednost, ale neumožňuje animaci. Tento formát má příponu png.

Při tvorbě webových stránek obvykle používají obrázky ve formátu JPEG nebo GIF, ale někdy používají PNG. Hlavní věcí je pochopit, v jakých případech je lepší použít který formát. Ve zkratce:

JPEG se nejlépe používá pro ukládání fotografií nebo obrázků ve stupních šedi, které neobsahují text;

• GIF se používá především pro animaci;
• PNG je formát pro vše ostatní (ikony, tlačítka atd.).

Vkládání obrázků do html stránek

Jak tedy vložíte obrázek na webovou stránku? Můžete vložit obrázek pomocí jednoho img tag. Prohlížeč umístí obrázek na místo na webové stránce, kde narazí na značku img.

Kód pro vkládání obrázků do html stránka vypadá takto:

Tento html kód umístí na webovou stránku obrázek uložený v souboru image.jpg, který se nachází ve stejné složce jako webová stránka. Jak jste si možná všimli, adresa obrázku je uvedena v atribut src. Už jsem ti řekl, co to je. Atribut src je tedy povinný atribut, který slouží k označení adresy souboru s obrázkem. Bez atributu src nemá značka img smysl.

Zde je několik dalších příkladů zadání adresy souboru s obrázkem:

Tento html kód vloží na stránku obrázek s názvem image.jpg, který je uložen ve složce obrázky umístěné v kořenovém adresáři webu.

Atribut src může obsahovat více než jen relativní odkazy na obrázky. Vzhledem k tomu, že obrázky jsou uloženy online spolu s html stránkami, má každý soubor obrázku svou vlastní adresu URL. Adresu URL obrázku tedy můžete vložit do atributu src. Například:

Tento kód vloží na stránku obrázek z webu mysite.ru. Adresa URL se obvykle používá, když odkazujete na obrázek na jiném webu. Pro obrázky uložené na vašem webu je lepší používat relativní odkazy.

Značka img je vložený prvek, takže je lepší ji umístit do prvku bloku, například do značky „P“ - odstavec:

Pojďme si to procvičit a vložit na naši stránku obrázek z předchozích článků o html. Vytvořím složku „images“ vedle html souboru své stránky a umístím tam soubor obrázku „bmw.jpg“, který vypadá takto:

Potom bude html kód stránky s vloženým obrázkem vypadat takto:

A podívejte se na výsledek zobrazení v prohlížeči:

Jak vidíme, na umístění obrázků na webové stránky není nic složitého. Dále se podívejme na několik dalších důležitých atributů značky „img“.

Atribut alt je záložní možnost

Protože soubory obrázků jsou uloženy odděleně od webových stránek, musí prohlížeč k jejich načtení zadat samostatné požadavky. Ale co když je na stránce mnoho obrázků a rychlost připojení k síti je nízká, pak stahování dalších souborů zabere značnou dobu. A je to ještě horší, pokud byl obrázek smazán ze serveru bez vašeho vědomí.

V těchto případech se webová stránka sama načte úspěšně, místo obrázků se zobrazí pouze bílé obdélníky. Proto, abyste uživateli řekli, o jaký obrázek jde, . Pomocí tohoto atributu určíte tzv. náhradní text, který se bude zobrazovat v prázdném obdélníku, dokud se obrázek nenačte:

A zhruba takhle to vypadá:

Nastavte rozměry obrázku

Stále existuje několik atributů značek img, o kterých byste měli vědět. Toto je několik atributů šířka A výška. Pomocí nich můžete určit rozměry obrázku:

Oba atributy udávají velikost v pixelů. Atribut width prohlížeči říká, jak široký by měl být obrázek, a atribut height, jak vysoký by měl být. Tyto dva atributy lze použít společně nebo samostatně. Pokud například zadáte pouze atribut width, pak prohlížeč automaticky vybere výšku v poměru k zadané šířce a také v případě použití pouze atributu height. Pokud tyto atributy nezadáte vůbec, prohlížeč před zobrazením na obrazovce automaticky určí velikost obrázku. Za zmínku stojí pouze to, že zadáním velikostí obrázků se prohlížeč při zobrazování stránky mírně zrychlí.

To je zatím vše o vkládání obrázků na stránky, pak se podíváme na to, jak vložit zvuk nebo video na web...

Vkládání videa a zvuku pomocí HTML 5

Nová specifikace html5 zavádí několik nových značek, které velmi usnadňují vkládání mediálních souborů. To se týká především obrazu a zvuku.

Vložit Zvuk HTML5 poskytuje párovou značku ZVUK. Adresa souboru, ve kterém je uložen zvukový klip, je označena pomocí atributu src, který je nám již známý:

Značka „audio“ vytváří na stránce prvek bloku. Ve výchozím nastavení prohlížeč nepřehraje zvukový klip. Aby to bylo možné, musíte v audio tagu zadat speciální atribut automatické přehrávání. Zvláštní, protože na tom nezáleží. K tomu, aby se projevil, stačí pouhá přítomnost tohoto atributu ve značce.

Ve výchozím nastavení se zvukový klip na webové stránce nezobrazuje. Pokud však do tagu „audio“ vložíte atribut bez hodnoty řízení, prohlížeč zobrazí ovládací prvky pro přehrávání zvukového klipu na místě webové stránky, kde je umístěn zvukový tag. Zahrnují tlačítko přehrávání/pozastavení, lištu přehrávání a ovládání hlasitosti.

Grafika a provoz

Požadavky na krásu a výraznost designu webových stránek jsou v neustálém rozporu s technickými možnostmi moderního webhostingu. Návrhář webových stránek se proto musí stát prostředníkem mezi návrhářem a uživatelem a přísně udržovat rovnováhu mezi vizuální přitažlivostí a přiměřenou rychlostí doručení informací na webu. Chcete-li tento problém úspěšně vyřešit, musíte znát všechny grafické formáty používané na internetu, pochopit rozdíly mezi nimi, oblasti jejich použití a vlastnosti použití.

Abyste porozuměli velkému množství formátů a protokolů akceptovaných na internetu a vytvořili si vlastní stránku, musíte si vybrat, co je pro vaše konkrétní účely nejvhodnější. Některé formáty mohou být specifické pouze pro jeden prohlížeč, zatímco jiné budou vyžadovat speciální plug-in. Z široké škály formátů jsme vybrali pouze ty, které nejčastěji používají autoři oblíbených stránek a přijímají je uživatelé.

GIF a JPEG jsou dva z nejpopulárnějších grafických formátů, které se již dlouho staly de facto standardy pro použití na WWW. Oba jsou poměrně univerzální, čitelné pro většinu prohlížečů a nevyžadují speciální software (nebo další moduly). GIF a JPEG jsou formáty rastrových obrázků, které podle toho určují pevný formát (rozlišení) při zobrazování takových obrázků na obrazovce. Když se pokusíte změnit měřítko (u některých prohlížečů je k dispozici), rastrové (pixelové) obrázky výrazně ztratí kvalitu. U 8bitového (256barevného) formátu GIF je velkým problémem také výběr barevné palety.

Formáty vektorové grafiky jsou pro použití na webu mnohem atraktivnější. Na rozdíl od bitmap je vektorová grafika založena na matematickém (geometrickém) znázornění dat. Takové obrázky jsou výrazně menší, pokud jde o objem úložiště/přenosu, snadno se škálují a prakticky neztrácejí kvalitu při žádné konverzi. Bohužel vektorové formáty jsou na internetu stále málo používané, ale standardy již byly vytvořeny a měly by být zajímavé pro designéry.

Několik vektorových standardů bylo navrženo relativně nedávno a formáty PGML a VML jsou v současné době zvažovány World Wide Web Consortium (W3C). Společnost Macromedia, která VML propaguje, však již dávno otevřela svůj vektorový formát Shockwave Flash dalším vývojářům a implementovala další moduly pro prohlížení grafiky v tomto formátu pro populární prohlížeče.

Nové produkty však nemusí být nutně lepší pro všechny aplikace. Nejběžnějšími obrázky publikovanými na internetu jsou stále digitální fotografie, kresby a naskenované obrázky, které jsou velmi pracné a lze je jen stěží převést do vektorového formátu.

Výběr formátu tedy v konečném důsledku závisí na vašich cílech a je na vás, abyste se rozhodli, které obrázky nejlépe vyhovují vaší cílové skupině.

GIF - formát pro návrh

CompuServe původně zamýšlel svůj formát GIF pro interaktivní aplikace v kontextu omezených možností standardní grafiky na osobním počítači. Původně se jednalo o 4bitový a poté 8bitový rastrový formát se zadanou barevnou paletou, která podporovala maximálně 256 barev. Jednou z významných výhod formátu je, že obrázky lze indexovat do konkrétní palety (sady barev), zatímco obrázky JPEG nelze „zamknout“ na paletu a jejich „správné“ zobrazení není vždy možné. Tato vlastnost je zvláště důležitá pro ty vývojáře, kteří používají indexování palet k optimalizaci přenosu obrázků pro všechny platformy (ať už PC, Mac, Web-TV nebo jiné), bez ohledu na to, s jakou barevnou hloubkou konkrétní systém pracuje. Této všestrannosti je dosaženo prostřednictvím omezené palety 216 barev, která zahrnuje všechny běžné barvy používané jak ve Windows, tak například v MacOS. Návrh webu v univerzální paletě zaručuje konzistentní, multiplatformní a na hardwaru nezávislé zobrazení. Formát GIF navíc používá schéma bezztrátové komprese (s jednoduchým algoritmem kódování opakování: sekvence bajtů stejné barvy je nahrazena slovem o dvou bajtech, z nichž jeden obsahuje vzor stínování a druhý určuje počet opakování), aby grafická data v tomto formátu neztrácela informace během procesu komprese a obnovy.

Nicméně právě kvůli těmto vestavěným omezením barev lze formát GIF použít pouze pro obrázky, které mají omezený počet barev – jako jsou černobílé diagramy nebo ty obsahující velké plochy jedné barvy, jako např. kreslené rámečky nebo digitální kresby s plnými barvami. Samozřejmě můžete libovolný obrázek uložit ve formátu GIF pomocí tzv. ditheringu a získat tak poměrně slušnou kvalitu, ale v tomto případě riskujete výrazné zvětšení velikosti souboru po použití výše popsané komprese paměti (v degenerovaném případě např. když na obrázku není jediné sousední opakování, získáte přesně dvojnásobnou velikost souboru ve srovnání s nekomprimovaným originálem).

Hlavními výhodami formátu GIF je tedy použití bezztrátové komprese a ekonomické zachování jednolitých barevných ploch s jasným ohraničením a přísnými barevnými přechody. Formát JPEG se od popsaného liší tím, že v závislosti na úrovni komprese dochází ke zničení pevných oblastí a vyhlazení nebo rozmazání ostrých barevných přechodů.

Hlavní kritérium pro výběr formátu GIF: pokud jste sami nakreslili obrázek v grafickém balíčku, jako je Photoshop nebo Painter, který má velké plochy stejné barvy, nebo zpracovali již existující obrázek a chcete zachovat vysoký kontrast (nutné např. zobrazení textu), pak jej v tomto formátu uložte (platí především pro černobílé nebo nekvalitní kresby).

Pro fotografie, videa nebo jiné plnobarevné obrázky, které používají plynulé barevné přechody (přechody), použijte formát JPEG.

Je také důležité si uvědomit, že pokud se pokoušíte uložit obrázky se spojitými tóny jako GIF, budete pravděpodobně muset zahodit tolik informací v procesu přípravy obrázku (při převodu na pevnou paletu) a komprimaci GIF bude tak neefektivní, že přijdete i finančně (jak z hlediska mzdových nákladů, tak velikosti souboru).

Formát GIF poskytuje mimo jiné tzv. prokládaný vzhled, který pomáhá uživatelům s pomalými kanály na samém začátku příjmu vyhodnotit obsah obrázku (efekt je podobný postupnému vykreslování out-of- zaostřený snímek) a dobu potřebnou k jeho úplnému přenosu, a v důsledku toho přijmout rozhodnutí, zda v fotografování pokračovat, nebo zda je lepší s pořizováním přestat. Na rozdíl od progresivního JPEG je zde však účinek spíše psychologický než skutečný (viz obrázek).

Nezapomeňte také na jednu důležitou výhodu formátu GIF, které se v některých případech nelze vyhnout ani se všemi jeho nedostatky, je podpora průhlednosti (rozšíření GIF89a), která umožňuje zobrazit siluetu s nepravoúhlými obrysy na stávajícím pozadí. . Průhlednost ve formátu GIF je implementována primitivně - jedna barva (obvykle pozadí) je přiřazena jako průhledná. Této výhody se často využívá při vytváření tlačítek a ikon v designu stránek (JPEG nenabízí žádnou podporu průhlednosti).

Na závěr můžeme říci následující: GIF - nejlepší volba Chcete-li dosáhnout efektivního kompromisu mezi stávajícím hardwarem a softwarem, a schopnost indexovat 8bitový obrázek GIF na 216 univerzálních barev je nezbytná, pokud chcete, aby se vaše obrázky zobrazovaly v různých prohlížečích a neznámých platformách.

JPEG - formát pro fotografie a snímky videa

Formát JPEG získal svůj název podle zkratky výboru Joint Photographic Experts Group, který tento standard vytvořil na konci 80. a na začátku 90. let. Formát JPEG je založen na algoritmu ztrátové komprese (diskrétní kosinusová transformace), který rozdělí váš obrázek na oblasti (obvykle čtverce 8x8 pixelů), ve kterých je rozložení barev nahrazeno matematickou funkcí a ukládají se pouze koeficienty této funkce, což umožňuje můžete rekonstruovat jeho vzhled. Přirozeně se setkáte s určitou ztrátou kvality (v závislosti na složitosti funkce použité k nahrazení obrazu) a po obnově již nezískáte skutečný obraz, ale jeho matematickou „náhradu“. V závislosti na kvalitě vašeho originálu a stupni komprese však může být ztráta kvality pro diváka zcela neviditelná. Hlavní výhodou formátu JPEG oproti GIF je ale to, že zatímco GIF je pouze 8bitový (256 barev), JPEG je 24bitový a dokáže zobrazit až 16,7 milionů barev.

Z tohoto důvodu plnobarevný JPEG přirozeně reprodukuje podstatně více video informací než GIF. Tento formát se nejlépe hodí pro obrazy v reálném životě – naskenované obrázky nebo digitální fotografie, stejně jako digitalizované snímky videa nebo vykreslené 3D počítačové grafické scény.

Další výhodou JPEG je to, že na rozdíl od GIF umožňuje přizpůsobit míru použité komprese původní obrázek, což umožňuje zachovat potřebnou rovnováhu mezi velikostí a kvalitou.

Kompresní poměry pro JPEG se značně liší v závislosti na použitém programu pro úpravu obrázků, ale webové stránky obvykle používají poměry 10:1 nebo 20:1 (vyjádřené jako poměr objemu vzhledem k původnímu obrázku), které obecně poskytují přijatelnou kvalitu. Obrázek však můžete komprimovat na extrémní hodnoty 100:1 (samozřejmě s výraznou ztrátou kvality).

Takže při práci s fotografií ve formátu JPEG máte možnost uložit 24bitový obrázek s 16,7 miliony barev a i přes ztrátu kvality při kompresi je stále mnohem konzistentnější s originálem než 256- barevný GIF výkon. V tomto případě nevyhnutelná ztráta kvality silně závisí na velikosti, kvalitě a typu původního obrazu.

JPEG navíc umožňuje definovat tzv. progresivní zobrazení, to znamená, kdy se při načítání na obrazovce okamžitě objeví „hrubé“ zobrazení obrázku, které se s příjmem dalších informací postupně zlepšuje (při zároveň můžete získat potřebnou představu o podstatě zasílaného materiálu ještě před dokončením stahování a přerušit proces v jakékoli fázi, což výrazně šetří čas při prohlížení online obsahu).

Tyto nástroje můžete používat, jak chcete, a takový postupný projev může být dobrým pomocníkem v boji proti přetížení kanálu. Jediným problémem progresivního JPEG (na rozdíl od prokládaných GIFů) je, že starší prohlížeče jej nemusí podporovat.

PNG - univerzální rastrová novinka

Další generace rastrových formátů, PNG, využívá ty nejlepší vlastnosti JPEG a GIF a přidává svůj vlastní jedinečný přístup k prezentaci obrázků, který umožňuje vložit různé verze stejného obrázku do jednoho souboru pro nízkou, střední a vysokou úroveň. usnesení.

Formát PNG (Portable Network Graphics) je relativně nový rastrový grafický formát, který byl schválen jako standard konsorciem W3C a měl by postupně nahradit oba „zastaralé“ formáty: GIF i JPEG. PNG nabízí indexování barev (až 256 barev), podporu 24bitových i 48bitových barev (True-Color) a práci s kanálem průhlednosti (alfa kanál) a je mnohem efektivnější než tradiční formáty ukládání rastrových obrázků. .

Kompresní algoritmus pro plnobarevný obrázek je kvalitnější než JPEG a s podporou omezené indexované palety (až 256 barev) poskytuje nový formát bezztrátovou kompresi o 10–30 % lepší než ta implementovaná ve formátu GIF, což jej činí optimálním pro použití v každém případě. Nový formát bohužel neumožňuje obětovat kvalitu obrazu výměnou za více vysoký stupeň komprese, jako v formát JPEG.

Podpora průhlednosti ve formátu PNG je na rozdíl od GIF plnohodnotná, to znamená, že můžete vytvářet průsvitné obrázky nebo okraje, takže problém „čistých“ okrajů, tak obtížně řešitelný při použití průhlednosti v souboru GIF, je snadno překonán tady.

Navzdory všem vylepšením, která PNG nabízí, se však nový formát ujme až poté, co jej použijí návrháři webových stránek a tvůrci softwaru k vykreslování obrázků v novém formátu a k jejich přípravě k publikaci. Mezitím je docela obtížné najít obrázky PNG kdekoli na internetu, a to i přes nedávné zahrnutí podpory tohoto formátu do Netscape Navigator a Microsoft Internet Explorer.

A ačkoli oni nejnovější verze a podporují PNG, činí tak velmi omezeným způsobem. V současnosti je jediným řešením pro uživatele, kteří chtějí vidět celý soubor PNG, nainstalovat si externí modul (podobný PNG Live) sami.

Vývojáři zřejmě otálejí a čekají, až uživatelé zcela přejdou na nové formáty. Inu, zdravý konzervatismus nikdy neuškodí, ale i tak důrazně doporučujeme postupně přejít na PNG a nahradit tak alespoň všechna dosavadní použití formátu GIF.

Vektorové znázornění

JPEG, GIF i PNG jsou rastrové formáty založené na diskrétní (pixelové nebo bodové) reprezentaci obrázku, zatímco vektorové formáty jsou založeny na matematických vzorcích (geometrické znázornění obrazců). Vektorová grafika poskytuje značné výhody oproti rastrové, zejména pokud jde o diagramy, text a průmyslovou grafiku (a cenově výhodné formáty jsou pro internet velmi důležité).

První výhoda je tedy významná menší velikost vektorové obrázky ve srovnání s bitmapami, protože není popsán každý jednotlivý pixel obrázku, ale celý obrazec (například pro definování kruhu je třeba předat 3-4 čísla: poloměr, souřadnice středu a případně typ, popř. tloušťka čáry a její atributy). Matematické vzorce, které popisují vektorovou reprezentaci, zabírají mnohem méně místa než jednotlivé pixely a jejich atributy.

Další důležitou výhodou vektorové reprezentace je schopnost téměř neomezeně měnit měřítko obrázku (nebo jeho detailů) bez ztráty rozlišení nebo jasnosti obrázku. Není potřeba žádné úsilí k přizpůsobení vektorové reprezentace konkrétní paletě, platformě, hardwaru nebo konstrukčním prvkům; a koordinace kompresního schématu a kvality zobrazení probíhá bez problémů.

Ne každý rastrový obrázek je však možné převést do vektorové podoby (např. fotografie, naskenované obrázky nebo rastrové kresby je obtížné vektorizovat). Je ale prostě hloupost převádět speciálně připravené vektorové kresby (jako jsou perokresby, piktogramy, technické ilustrace, mapy, informační grafika a další, které jsou historicky vektorové) do rastrové podoby pro publikaci na internetu, což se dnes děje všude.

Problémy se zobrazením vektorová grafika na World Wide Web vznikl proto, že neexistoval jiný způsob zobrazení než rastr a vestavěný modul, který se objevil pro zobrazování souborů ve formátu PDF, neposkytoval dostatečnou flexibilitu a vyžadoval uložení veškerého obsahu v jedné formě – PDF.

Aby bylo možné bezproblémově vkládat vektorovou grafiku do tradičního formátu HTML bez dalšího softwaru, výbor pro standardy W3C v současné době zvažuje dva nové vektorové standardy: PGML (Precision Graphics Mark-up Language) a VML (Vector Mark-up Language). ). PGML podporují Adobe Systems, IBM, Netscape a Sun Microsystems a VML podporují Microsoft, Hewlett-Packard, Autodesk, Macromedia a Visio. Oba standardy jsou založeny na rozšířeních značkovacího jazyka XML, propagovaných pro použití na webu jako nástupce HTML a doporučených W3C pro budoucí použití.

V současné době však žádný z prohlížečů nepodporuje žádné standardy vektorové grafiky, i když jsou již k dispozici další moduly (Plug-ins). Mezi nejoblíbenější způsoby zobrazení statických vektorových obrázků na webu dnes patří formát SWF (Shockwave Flash) společnosti Macromedia a stále podceňovaný formát Xara Flare.

Světlice- dobré rozhodnutí, který umožňuje zahrnutí vektorových obrázků, které umožňují téměř neomezené zvýšení úrovně detailů stránky, přičemž jejich velikosti jsou srovnatelné s Záblesk rázové vlny. To neznamená, že používání dalších modulů pro prohlížení obrázků je tak nepohodlné, ale pokud takové nástroje používáte na svých stránkách, nezapomeňte na to uživatele upozornit a dát mu možnost stáhnout si odpovídající modul, než přejde na stránku. který bude obsahovat tyto prvky. Krátkodobě to samozřejmě zpomalí proces prohlížení nových uživatelů, ale postupně si budete získávat další a další příznivce, až se odpovídající nástroje konečně dostanou do další verze prohlížeče a začátečníci již nebudou potřebovat doplňkový modul.

Animace, interaktivita a interakce

Obecně lze říci, že obrázky GIF lze uspořádat jako speciální zásobník v jednom souboru a výsledný „film“ (flipbook) lze reprodukovat vytvořením jednoduché rastrové animace. Netscape i Microsoft poskytují podporu pro animované GIFy od svých třetích verzí svých prohlížečů, takže jejich přítomnosti na webu je nyní těžké se vyhnout. Mnoho GIF animátorů, které vám umožní vytvářet podobné GIF stacky, je rozšířené (jak komerční, tak veřejně dostupné). „Oživení“ formátu GIF však může vést k nekontrolovatelnosti velikosti souborů, protože každá „úroveň“ takového balíčku je samostatný obrázek GIF, takže typických 15 snímků za sekundu pro počítačová animace může „produkovat“ nespočetné množství kilobajtů.

V kombinaci s Javou nebo JavaScriptem můžete vytvořit interaktivní animaci, která bude reagovat na uživatele.

Nyní se podívejme na další řešení pro webovou animaci a interaktivní uživatelskou interakci, kde hlavní roli zde nadále hraje společnost Macromedia, která na trh dlouhodobě vstoupila se svými Programy rázové vlny a Flash a neustále zdokonaluje své produkty a zvyšuje jejich efektivitu v souladu s potřebami uživatelů a designérů.

Shockwave, původně vytvořený jako formát pro Macromedia Director, je rodina protokolů zaměřených především na produkci interaktivního a grafického obsahu vytvořeného speciálně pro použití na internetu. A Shockwave Flash je obecně jedinečný nástroj a jeden z nejvíce nejlepší způsoby vytvořit animaci a publikovat ji na webové stránce. Shockwave Flash vytváří velmi malé soubory (protože používá převážně vektorový formát reprezentace) a ve srovnání s jinými formáty je z hlediska přípravy nejpohodlnější.

Při publikování takové animace na vašich stránkách na to nezapomeňte upozornit uživatele, aby si mohl předem naskladnit další modul a připravit se na zdlouhavé čekání na stahování. Nejnovější verze Netscape Navigator a internet Explorer mít prohlížecí moduly pro Flash animace již v základním balíčku. Netscape potvrdil, že budoucí verze Navigatoru budou mít tuto podporu pro Flash, a to i na úrovni kódu.

Konečné rozhodnutí je na vás

Mění se tedy přístup k prezentaci webového obsahu, objevují se nové datové formáty a vývojové nástroje, které je podporují. Starší formáty (GIF a JPEG pro prezentaci grafiky) jsou však stále poměrně populární. Podporují je téměř všechny prohlížeče a většina vývojářů s nimi má bohaté zkušenosti. Je důležité použít správný formát pro konkrétní účel, aby byla zajištěna rovnováha mezi kvalitou obrazu a velikostí souborů. Například jeden obrázek ve formátu GIF může zabírat více místa a produkovat méně kvalitní výsledek než ve formátu JPEG, zatímco u jiného tomu bude naopak.

Při reprezentaci rastrových obrázků se však PNG stává preferovaným formátem, a pokud půjdete ještě dále a pokusíte se použít vektorový obrázek, pak je vám dnes k službám formát Shockwave Flash od Macromedia.

Formát SWF (Shockwave Flash) není běžně používaný, ale interní vektorový formát programu Macromedia Flash (viz „Lekce Macromedia Flash"na CD-ROM), takže abyste získali svůj vlastní obrázek nebo animaci, budete si muset zakoupit příslušný multimediální balíček od Macromedia a uživatel si bude muset nainstalovat další modul pro vizualizaci výsledku. Tedy, aby se jednoduše umístil vektorové kreslení na svou webovou stránku, budete muset překonat celá řada nepohodlí.

Další vektorové formáty jsou však na cestě a brzy se stanou standardem.

ComputerPress 5" 1999