.

Označiť má požadovaný atribút src, ktorého hodnota je absolútna alebo relatívna cesta k obrázku:

Pre značku sú k dispozícii nasledujúce atribúty:

Tabuľka 1. Atribúty značiek

Atribút	Popis, akceptovaná hodnota
alt	Atribút alt pridá k obrázku alternatívny text. Zobrazuje sa na mieste, kde sa obrázok objaví pred načítaním alebo pri deaktivovanej grafike, a tiež sa zobrazí ako popis, keď na obrázok umiestnite kurzor myši. Syntax: alt \u003d "(! LANG: popis obrázka" . !}
crossorigin	Atribút crossorigin vám umožňuje načítať obrázky zo zdrojov v inej doméne pomocou požiadaviek CORS. Obrázky nahrané na plátno pomocou požiadaviek CORS je možné znova použiť. Povolené hodnoty: anonymný - požiadavka krížového pôvodu sa vykonáva pomocou hlavičky HTTP a nebudú odovzdané žiadne poverenia. Ak server neposkytne poverenia na server, od ktorého sa požaduje obsah, obraz bude poškodený a jeho použitie bude obmedzené. use-credentials - požiadavka na krížový pôvod je vytvorená so zadanými povereniami. Syntax: crossorigin \u003d "anonymný".
výška	Atribút height nastavuje výšku obrázka v pixloch. Syntax: height \u003d "300".
ismap	Atribút ismap naznačuje, že obrázok je súčasťou mapového obrazu hosteného na serveri (map-image je obrázok s klikateľnými oblasťami). Po kliknutí na obrázok mapy sa súradnice odošlú na server ako reťazec dotazu URL. Atribút ismap je povolený iba v prípade, ak je prvok je potomkom prvku s platným atribútom href. Syntax: ismap.
longdesc	Adresa URL rozšíreného popisu obrázka, okrem atribútu alt. Syntax: longdesc \u003d "http://www.example.com/description.txt".
src	Atribút src určuje cestu k obrázku. Syntax: src \u003d "flower.jpg".
veľkosti	Nastavuje veľkosť obrázka v závislosti od parametrov zobrazenia. Funguje iba vtedy, keď je zadaný atribút srcset. Hodnota atribútu je jeden alebo viac reťazcov oddelených čiarkami.
srcset	Vytvorí zoznam zdrojov obrazu, ktoré sa vyberú na základe rozlíšenia obrazovky. Môže byť použitý v spojení s alebo namiesto atribútu src. Hodnota atribútu je jeden alebo viac reťazcov oddelených čiarkami.
usemap	Atribút usemap špecifikuje obrázok ako obrazovú mapu. Hodnota musí začínať znakom #. Hodnota je spojená s hodnotou atribútu name alebo id tagu
šírka	Atribút width nastavuje šírku obrázka v pixloch. Syntax: width \u003d "500".

1.1. Adresa obrázka

Adresu obrázka je možné zadať celú (absolútnu adresu URL), napríklad:
adresa URL (http://anysite.ru/images/anyphoto.png)

Alebo relatívnou cestou z dokument alebo koreňový adresár stránka:
url (../ images / anyphoto.png) - relatívna cesta z dokumentu,
url (/images/anyphoto.png) je relatívna cesta z koreňového adresára.

Toto sa interpretuje takto:
../ - znamená prejsť o jednu úroveň vyššie, do koreňového adresára,
images / - prejsť do priečinka s obrázkami,
anyphoto.png - Ukazuje na obrazový súbor.

1.2. Rozmery obrázka

Bez nastavenia rozmerov obrázka sa kresba zobrazí na stránke v skutočnej veľkosti. Rozmery obrázka môžete upraviť pomocou atribútov šírka a výška. Ak je nastavený iba jeden z atribútov, druhý bude vypočítaný automaticky, aby sa zachovali proporcie obrázka.

1.3. Formáty grafických súborov

Formát JPEG (Spoločná skupina fotografických odborníkov)... Obrázky JPEG sú ideálne pre fotografie, môžu obsahovať milióny rôznych farieb. Komprimuje obrázky lepšie ako súbory GIF, ale text a veľké oblasti jednej farby môžu byť rozmazané.

Formát GIF (Formát výmeny grafiky)... Ideálne na kompresiu obrázkov s jednofarebnými plochami, napríklad logami. GIF vám umožňuje nastaviť jednu z farieb tak, aby bola priehľadná, aby sa pozadie webovej stránky mohlo zobraziť cez časť obrázka. GIF môžu obsahovať aj jednoduché animácie. GIF obsahujú iba 256 odtieňov, vďaka čomu vyzerajú obrázky skvrnité a nereálne ako plagáty.

Formát PNG (Prenosná sieťová grafika)... Zahŕňa najlepšie funkcie formátov GIF a JPEG. Obsahuje 256 farieb a umožňuje vám urobiť jednu z farieb priehľadnými, pričom obrázky komprimujete do menšej veľkosti ako súbor GIF.

Formát APNG (Animovaná prenosná sieťová grafika)... Formát obrázka založený na formáte PNG. Umožňuje ukladanie animácií a podporuje aj priehľadnosť.

Formát SVG (Škálovateľná vektorová grafika)... Výkres SVG pozostáva zo sady geometrických tvarov opísaných vo formáte XML: čiara, elipsa, mnohouholník atď. Podporovaná je statická aj animovaná grafika. Sada funkcií obsahuje rôzne transformácie, alfa masky, efekty filtrov, možnosť používať šablóny. Veľkosť obrázkov SVG je možné meniť bez straty kvality.

Formát BMP (Bitmapový obrázok)... Je to nekomprimovaná (pôvodná) bitmapová šablóna, ktorá je obdĺžnikovou mriežkou pixelov. Bitmapový súbor sa skladá z hlavičky, palety a grafických údajov. Hlavička obsahuje informácie o grafickom obrázku a súbore (hĺbka, výška, šírka a počet farieb pixelov). Paleta je určená iba v tých bitmapových súboroch, ktoré obsahujú obrázky palety (8 alebo menej bitov) a pozostávajú z nie viac ako 256 prvkov. Grafické údaje predstavujú samotný obrázok. Farebná hĺbka v tomto formáte môže byť 1, 2, 4, 8, 16, 24, 32, 48 bitov na pixel.

Formát ICO (Ikona systému Windows)... Formát úložiska pre ikony súborov v systéme Microsoft Windows. Ikona systému Windows sa tiež používa ako ikona na webových stránkach na internete. Je to obrázok tohto formátu, ktorý sa zobrazuje vedľa adresy webu alebo záložky v prehliadači. Jeden súbor ICO obsahuje jednu alebo niekoľko ikon, ktorých veľkosť a farba sa nastavuje osobitne. Veľkosť ikony môže byť ľubovoľnej veľkosti, ale najčastejšie sa používajú štvorcové ikony so stranami 16, 32 a 48 pixelov.

2. Označiť

Označiť

Pre značku je k dispozícii atribút name, ktorý určuje názov mapy. Hodnota atribútu name pre značku

Prvok

3. Označte

Označiť popisuje iba jeden hotspot v rámci obrazovej mapy na strane klienta. Prvok nemá koncovú značku. Ak jeden hotspot prekrýva druhý, bude implementovaný prvý odkaz zo zoznamu rozsahov.

Tabuľka 2. Atribúty značiek

Atribút	Stručný opis
alt	Určuje alternatívny text pre aktívnu oblasť mapy.
coords	Určuje polohu oblasti na obrazovke. Súradnice sú uvedené v dĺžkových jednotkách a sú oddelené čiarkami: pre kruh - súradnice stredu a polomeru kruhu; pre obdĺžnik - súradnice ľavého a pravého dolného rohu; pre mnohouholník - súradnice vrcholov mnohouholníka v požadovanom poradí, pre logické doplnenie obrázku sa tiež odporúča označiť posledné súradnice, ktoré sa rovnajú prvej.
Stiahnuť ▼	Dopĺňa atribút href a informuje prehliadač, že zdroj by sa mal načítať v okamihu, keď používateľ klikne na odkaz, namiesto napríklad jeho predbežného otvorenia (napríklad súboru PDF). Zadaním názvu atribútu tak dáme názov načítanému objektu. Je povolené používať atribút bez uvedenia jeho hodnoty.
href	Určuje adresu URL odkazu. Môže byť zadaná absolútna alebo relatívna adresa odkazu.
hreflang	Určuje jazyk prepojeného webového dokumentu. Používa sa iba v spojení s atribútom href. Prijateľné hodnoty sú skratkou pozostávajúcou z dvojice písmen predstavujúcich kód jazyka.
médiá	Určuje, pre aké typy zariadení bude súbor optimalizovaný. Hodnota môže byť akýkoľvek mediálny dopyt.
rel	Doplňuje atribút href o informácie o vzťahu medzi aktuálnym dokumentom a prepojeným dokumentom. Prijateľné hodnoty: alternate - odkaz na alternatívnu verziu dokumentu (napríklad vytlačiteľná stránka, preklad alebo zrkadlo). autor - odkaz na autora dokumentu. bookmark je trvalá adresa URL používaná pre záložky. help - odkaz na pomoc. licencia - odkaz na informácie o autorských právach pre tento webový dokument. next / prev - označuje vzťah medzi jednotlivými URL. Pomocou tohto označenia môže Google určiť, že obsah týchto stránok je prepojený v logickom poradí. nofollow - zakáže vyhľadávaču sledovať odkazy na tejto stránke alebo konkrétny odkaz. noreferrer - označuje, že po prepojení by prehliadač nemal odosielať hlavičku požiadavky HTTP (Referrer), ktorá zaznamenáva informácie o tom, z ktorej stránky návštevník stránky prišiel. predbežné načítanie - označuje, že cieľový dokument by sa mal uložiť do medzipamäte, t.j. prehliadač na pozadí načíta obsah stránky do svojej medzipamäte. vyhľadávanie - označuje, že cieľový dokument obsahuje vyhľadávací nástroj. tag - označuje kľúčové slovo pre aktuálny dokument.
tvar	Nastavuje tvar aktívneho bodu na mape a jeho súradnice. Môže mať nasledujúce hodnoty: priamy - aktívna oblasť obdĺžnikového tvaru; kruh - aktívna plocha vo forme kruhu; polyaktívna oblasť vo forme mnohouholníka; predvolené - aktívna oblasť zaberá celú oblasť obrázka.
cieľ	Označuje, kam sa dokument po kliknutí na odkaz načíta. Má nasledujúce hodnoty: _self - stránka sa načíta do aktuálneho okna; _blank - stránka sa otvorí v novom okne prehliadača; _parent - stránka sa načíta do nadradeného rámca; _top - stránka sa načíta do celého okna prehliadača.
typu	Určuje typ MIME odkazovaných súborov, t.j. rozšírenie súboru.

4. Príklad vytvorenia obrazovej mapy

1) Označíme pôvodný obrázok na aktívnych plochách požadovaného tvaru. Súradnice oblastí možno vypočítať pomocou programu na spracovanie fotografií, napríklad Adobe Photoshop alebo Maľovať.

Obrázok: 1. Príklad označenia obrázka na vytvorenie mapy

2) Nastavte názov mapy tak, že ju pridáte k značke

Jpg "alt \u003d" (! LANG: flowers_foto" width="680" height="383" usemap="#flowers"> !}
Obrázok: 2. Príklad vytvorenia mapového obrazu, keď stlačíte kurzor myši na kvete, prejdete na stránku s popisom

Grafika a prevádzka

Požiadavky na krásu a výraznosť webových stránok sú v neustálom rozpore s technickými možnosťami moderného webhostingu. Z tohto dôvodu sa návrhár stránok musí stať sprostredkovateľom medzi návrhárom a používateľom a striktne udržiavať rovnováhu medzi vizuálnym príťažlivosťou a primeranou rýchlosťou poskytovania informácií na webe. Aby ste tento problém úspešne vyriešili, musíte poznať všetky grafické formáty používané na internete, rozumieť rozdielom medzi nimi, ich aplikačným oblastiam a zvláštnostiam ich použitia.

Aby ste pochopili veľké množstvo formátov a protokolov akceptovaných na internete a mohli ste si vytvoriť svoju vlastnú stránku, musíte si zvoliť ten, ktorý je najvhodnejší pre vaše konkrétne účely. Niektoré formáty môžu byť špecifické iba pre jeden prehliadač, zatiaľ čo iné vyžadujú vyhradený doplnok. Vybrali sme z celej škály formátov iba tie, ktoré sú najčastejšie používané autormi populárnych stránok a akceptované užívateľmi.

GIF a JPEG sú dva z najpopulárnejších grafických formátov, ktoré sú už dlho de facto štandardmi pre použitie na WWW. Oba sú pomerne univerzálne, čitateľné väčšinou prehľadávačov a nevyžadujú žiadny špeciálny softvér (alebo ďalšie moduly). GIF a JPEG sú bitmapové obrazové formáty, ktoré pri zobrazení týchto obrázkov na obrazovke určujú pevný formát (rozlíšenie). Pri pokuse o zväčšenie (poskytované v niektorých prehliadačoch) rastrové (pixelové) obrázky výrazne strácajú na kvalite. Pre 8-bitový (256 farieb) formát GIF je hlavným problémom aj výber farebnej palety.

Formáty vektorovej grafiky sú oveľa atraktívnejšie na použitie na webe. Na rozdiel od bitmáp je vektorová grafika založená na matematickom (geometrickom) znázornení údajov. Takéto obrázky sú z hľadiska úložného / prenosového objemu oveľa menšie, sú ľahko škálovateľné a pri žiadnej transformácii prakticky nestrácajú kvalitu. Vektorové formáty sú, bohužiaľ, na internete stále málo používané, ale štandardy už boli sformované a mali by byť pre dizajnérov zaujímavé.

Niekoľko vektorových štandardov bolo navrhnutých relatívne nedávno a formáty PGML a VML v súčasnosti zvažuje World Wide Web Consortium (W3C). Spoločnosť Macromedia, spoločnosť VML, však už dávno vystavila svoj vektorový formát Shockwave Flash iným vývojárom a pre populárne prehliadače implementovala ďalšie moduly na prezeranie grafiky v tomto formáte.

Nie všetky nové produkty však musia byť nevyhnutne lepšie pre všetky aplikácie. Najbežnejšie obrázky zverejňované na internete sú stále digitálne fotografie, kresby a skenované obrázky, ktoré sú časovo veľmi náročné a je ťažko ich preložiť do vektorového formátu.

Preto výber formátu nakoniec závisí od vašich úloh a je len na vás, aby ste sa rozhodli, ktoré obrázky sú pre vašu cieľovú skupinu vhodnejšie.

GIF - formát pre dizajn

CompuServe pôvodne zamýšľal svoj formát GIF pre interaktívne aplikácie s obmedzenými možnosťami štandardnej grafiky v osobnom počítači. Pôvodne to bol 4- a potom 8-bitový rastrový formát s nastavením farebnej palety, ktorý podporoval maximálne 256 farieb. Jednou z významných výhod formátu je, že obrázky je možné indexovať na konkrétnu paletu (sadu farieb), zatiaľ čo obrázky JPEG sa nedajú „prichytiť“ k palete a ich „správne“ zobrazenie nie je vždy možné. Táto vlastnosť je obzvlášť dôležitá pre tých vývojárov, ktorí používajú indexovanie palety na optimalizáciu prenosu obrázkov na všetkých platformách bez výnimky (či už je to PC, Mac, Web-TV alebo iné), bez ohľadu na to, s akou farebnou hĺbkou ten či onen systém pracuje. Túto všestrannosť je možné dosiahnuť obmedzenou paletou 216 farieb, ktorá obsahuje všetky bežné farby používané v systéme Windows aj napríklad v systéme MacOS. Dizajn stránky v univerzálnej palete zaisťuje konzistentné vykreslenie naprieč platformami a hardvérom. Formát GIF navyše používa schému bezstratovej kompresie (s jednoduchým algoritmom kódovania opakovania: postupnosť bajtov rovnakej farby je nahradená slovom dvoch bajtov, z ktorých jeden obsahuje vzor tieňovania a druhý určuje počet opakovaní), takže grafické údaje v tomto formáte nestrácajte informácie počas procesu kompresie a obnovy.

Avšak práve kvôli týmto zabudovaným obmedzeniam farieb sa dá súbor GIF použiť iba pre obrázky, ktoré majú obmedzený počet farieb, napríklad čiernobiele schémy alebo tie, ktoré obsahujú veľké plochy rovnakej farby, napríklad kreslené rámy alebo digitálne kresby plnou farbou. plnka. Akýkoľvek obrázok vo formáte GIF môžete samozrejme uložiť pomocou takzvaného ditheringu a získať tak dostatočne slušnú kvalitu, avšak v takom prípade riskujete „narazenie“ na výrazné zväčšenie veľkosti súboru po použití vyššie uvedenej kompresie s pamäťou opakovania (v zdegenerovanom prípade, keď na obrázku nie je susedné opakovanie, získate zväčšenie súboru presne dvakrát v porovnaní s nekomprimovaným originálom).

Hlavnými výhodami formátu GIF teda je použitie bezstratovej kompresie a ekonomické zachovanie celistvých farebných oblastí s jasným okrajom a prísnymi farebnými prechodmi. Formát JPEG sa líši od formátu popísaného v tom, že v závislosti od úrovne kompresie sú tuhé oblasti zničené a ostré farebné prechody sú vyhladené alebo rozmazané.

Hlavné kritérium pre výber formátu GIF: ak ste sami nakreslili obrázok v grafickom balíku, ako je Photoshop alebo Painter, ktorý má veľké plochy rovnakej farby, alebo ste spracovali existujúci obrázok a chcete zachovať vysoký kontrast (potrebný napríklad pri zobrazovaní textu), uložte ho do tento formát (predovšetkým sa týka čiernobielych alebo nekvalitných kresieb).

Pre fotografie, videozáznamy alebo iné plnofarebné obrázky s plynulými farebnými prechodmi (prechodmi) použite formát JPEG.

Je tiež dôležité nezabudnúť, že ak sa pokúšate ukladať obrázky s nepretržitým tónom vo formáte GIF, budete pravdepodobne musieť v procese prípravy obrázka (pri jeho prevode na pevnú paletu) zahodiť toľko informácií a metóda kompresie použitá v GIF sa ukáže byť tak neefektívne, že stratíte aj finančne (jednak z hľadiska mzdových nákladov, jednak z hľadiska veľkosti súboru).

Formát GIF okrem iného poskytuje takzvaný prekladaný vzhľad, ktorý pomáha používateľom s pomalými kanálmi na samom začiatku príjmu vyhodnotiť obsah obrazu (efekt je podobný postupnému vykresľovaniu neostrého obrazu) a času potrebného na jeho úplný prenos a v dôsledku toho prijímať rozhodnutie, či pokračovať v prijímaní alebo je lepšie ho odmietnuť. Avšak na rozdiel od progresívneho JPEG je tu efekt viac psychologický ako skutočný (pozri obr.).

Mali by ste tiež pamätať na jednu dôležitú výhodu formátu GIF, ktorej sa v niektorých prípadoch nezaobídeme ani pri všetkých jeho nevýhodách - je to podpora priehľadnosti (prípona GIF89a), ktorá umožňuje zobraziť siluetu s neobdĺžnikovými obrysmi na existujúcom pozadí. Transparentnosť vo formáte GIF je implementovaná primitívne - jedna farba (zvyčajne pozadie) je priradená ako priehľadná. Táto výhoda sa často používa pri vytváraní tlačidiel a ikon vo výzdobe stránky (JPEG neponúka žiadnu podporu priehľadnosti).

Záverom možno povedať, že GIF je najlepšou voľbou pre efektívny kompromis medzi existujúcim hardvérom a softvérom a schopnosť indexovať 8-bitový obrázok GIF až do 216 univerzálnych farieb je nevyhnutná, ak sa majú vaše obrázky zobrazovať v rôznych prehliadačoch a na neznámych platformách. ...

JPEG - formát pre fotografie a videozáznamy

Názov JPEG dostal názov podľa skratky Joint Photographic Experts Group сommittee, ktorá tento štandard vytvorila koncom 80. a začiatkom 90. rokov. Formát JPEG je založený na stratovom kompresnom algoritme (diskrétna kosínová transformácia), pomocou ktorého je váš obrázok rozdelený na oblasti (zvyčajne štvorce 8 - 8 pixelov), vo vnútri ktorých je distribúcia farieb nahradená matematickou funkciou a sú uložené iba koeficienty tejto funkcie, ktoré umožňujú obnoviť jej vzhľad. Prirodzene, budete čeliť určitej strate kvality (v závislosti od zložitosti funkcie použitej na nahradenie obrázka) a po obnovení získate nie skutočný obraz, ale jeho matematický „náhradník“. V závislosti od kvality originálu a stupňa kompresie však môže byť strata kvality pre diváka úplne neviditeľná. Ale hlavnou výhodou JPEG oproti GIF je, že zatiaľ čo GIF je iba 8-bitový (256 farieb), JPEG je 24-bitový a dokáže zobraziť až 16,7 milióna farieb.

Z tohto dôvodu plnofarebné súbory JPEG prirodzene reprodukujú podstatne viac informácií o videu ako súbory GIF. Tento formát je najvhodnejší pre obrázky z reálneho života, ako sú naskenované obrázky alebo digitálne fotografie, ako aj pre digitalizované videozáznamy alebo vykreslené scény 3D počítačovej grafiky.

Ďalšou výhodou formátu JPEG je, že na rozdiel od formátu GIF umožňuje nezávisle definovať mieru kompresie použitej na pôvodný obrázok, čo umožňuje zachovať potrebnú rovnováhu medzi veľkosťou a kvalitou.

Kompresné pomery sa pre JPEG veľmi líšia v závislosti od použitého softvéru na úpravu obrázkov, avšak webové stránky zvyčajne používajú pomery 10: 1 alebo 20: 1 (vyjadrené ako podiel objemu v porovnaní s pôvodným obrázkom), čo obvykle poskytuje prijateľnú kvalitu ... Napriek tomu je možné obraz skomprimovať až na extrémne hodnoty 100: 1 (samozrejme so značnou stratou kvality).

Takže pri práci s fotografiou vo formáte JPEG môžete uložiť 24-bitový obrázok so 16,7 miliónmi farieb a napriek strate kvality pri komprimácii je stále oveľa vernejší originálu ako 256-farebný GIF. výkon. V takom prípade nevyhnutná strata kvality silne závisí od veľkosti, kvality a typu pôvodného obrázka.

JPEG vám navyše umožňuje definovať takzvané progresívne zobrazenie, to znamená, keď sa po načítaní na obrazovke okamžite objaví „hrubé“ znázornenie obrazu, ktoré sa pri získavaní ďalších informácií postupne vylepšuje (zatiaľ čo získate potrebnú predstavu o podstate predkladaného materiálu) ešte pred dokončením sťahovania a prerušiť proces v ktorejkoľvek fáze, čo výrazne šetrí čas sledovaním sieťového obsahu).

Tieto nástroje môžete používať ľubovoľne a takýto postupný prejav môže byť dobrou pomôckou v boji proti preťaženiu kanála. Jediným problémom progresívneho formátu JPEG (na rozdiel od prekladaného súboru GIF) je, že ho staršie verzie prehľadávačov nemusia podporovať.

PNG - univerzálna rastrová novinka

Zástupca nasledujúcej generácie bitmapových formátov, PNG, prevzal najlepšie vlastnosti z formátov JPEG aj GIF a pridal vlastný jedinečný prístup k prezentácii obrázkov, ktorý umožňuje vložiť rôzne verzie rovnakého obrázka do jedného súboru pre nízke, stredné a vysoké rozlíšenie.

Formát Portable Network Graphics (PNG) je relatívne nový formát rastrovej grafiky, ktorý bol štandardne schválený W3C a mal by postupne nahradiť oba „staršie“ formáty: GIF aj JPEG. PNG ponúka indexovanie farieb (až 256 farieb), podporu 24- aj 48-bitových farieb (True-Color) a prácu s priehľadným kanálom (alfa kanál). Je tiež výrazne efektívnejší ako tradičné formáty ukladania rastrových obrázkov.

Algoritmus kompresie pre plnofarebný obraz je kvalitnejší ako JPEG a s podporou obmedzenej indexovanej palety (až 256 farieb) dosahuje nový formát bezstratovú kompresiu o 10 - 30% lepšiu ako kompresia implementovaná vo formáte GIF, čo ho robí optimálnym na použitie. v každom prípade. Nový formát, bohužiaľ, neumožňuje obetovať kvalitu obrazu výmenou za vyšší kompresný pomer, ako je tomu vo formáte JPEG.

Na rozdiel od GIF je podpora priehľadnosti vo formáte PNG plnohodnotná, to znamená, že môžete vytvárať polopriehľadné obrázky alebo ohraničenia, takže problém „čistých“ ohraničení, ktorý je pri použití priehľadnosti v súbore GIF tak ťažké vyriešiť, je tu ľahko prekonateľný.

Napriek všetkým vylepšeniam ponúkaným v PNG sa však nový formát „zahojí“, až keď ho dizajnéri webových stránok a výrobcovia softvéru oslovia, aby obrázky vykreslili v novom formáte a pripravili na zverejnenie. Medzitým je ťažké nájsť obrázky PNG kdekoľvek na internete, a to aj napriek nedávnemu zahrnutiu podpory tohto formátu do aplikácií Netscape Navigator a Microsoft Internet Explorer.

Aj keď ich najnovšie verzie podporujú PNG, robia to veľmi obmedzeným spôsobom. Jediným riešením pre používateľov, ktorí chcú vidieť kompletný súbor PNG, je v súčasnosti inštalácia doplnku (napríklad PNG Live) sami.

Vývojári zrejme váhajú a čakajú na úplný prechod používateľov do nových formátov. Zdravý konzervativizmus nikdy nie je na škodu, stále však dôrazne odporúčame, aby ste postupne prešli na PNG a nahradili aspoň všetky existujúce spôsoby použitia formátu GIF.

Vektorové znázornenie

JPEG, GIF aj PNG sú bitmapové formáty založené na diskrétnom (pixelovom alebo bodovom) znázornení obrázka, zatiaľ čo vektorové formáty sú založené na matematických vzorcoch (geometrických znázorneniach tvarov). Vektorová grafika ponúka oproti rastru významné výhody, najmä pokiaľ ide o schémy, text a priemyselnú grafiku (a pre web má prvoradý význam ekonomika formátov).

Prvou výhodou je teda podstatne menšia veľkosť vektorových obrázkov v porovnaní s bitmapami, pretože nie je opísaný každý jeden pixel obrázka, ale celá postava ako celok (napríklad na definovanie kruhu je potrebné preniesť 3 - 4 čísla: polomer, stredové súradnice a možno alebo hrúbka čiary a jej atribúty). Matematické vzorce, ktoré popisujú vektorovú reprezentáciu, zaberajú oveľa menej miesta ako jednotlivé pixely a ich atribúty.

Ďalšou nezanedbateľnou výhodou vektorovej reprezentácie je schopnosť prakticky neobmedzeného škálovania obrázkov (alebo detailov jeho častí) bez straty rozlíšenia alebo čistoty obrazu. Na prispôsobenie vektorovej reprezentácie danej palete, platforme, hardvéru alebo dizajnu nie je potrebné nijaké úsilie; a dojednanie kompresnej schémy a kvality zobrazenia prebehne bez problémov.

Nie každý bitmapový obrázok však možno previesť do vektorovej podoby (napríklad fotografie, naskenované obrázky alebo bitmapové kresby sa ťažko vektorizujú). Špeciálne pripravené vektorové kresby (napr. Perokresby, piktogramy, technické ilustrácie, mapy, informačné grafiky a ďalšie, ktoré sú historicky vektorové) sú však jednoducho hlúpe, ak ich rasterizuje a umožňuje zverejnenie na internete, ktoré sa dnes deje všade.

Problémy so zobrazením vektorovej grafiky na World Wide Web nastali, pretože neexistoval iný spôsob zobrazenia ako iba raster a zásuvný modul, ktorý sa objavil na zobrazovanie súborov vo formáte PDF, neposkytoval potrebnú flexibilitu a vyžadoval ukladanie celého obsahu v jednej podobe - PDF.

Výbor pre štandardy W3C v súčasnosti zvažuje dva nové vektorové štandardy: PGML (Precision Graphics Mark-up Language) a VML (Vector Mark), ktoré umožňujú bezproblémové vkladanie vektorovej grafiky do tradičného formátu HTML bez ďalšieho softvéru. -up jazyk). PGML je podporovaný spoločnosťami Adobe Systems, IBM, Netscape a Sun Microsystems a VML je podporovaný spoločnosťami Microsoft, Hewlett-Packard, Autodesk, Macromedia a Visio. Oba štandardy sú založené na rozšíreniach značkovacieho jazyka XML, propagovaných na použitie na webe ako nástupca HTML a odporúčaných W3C pre budúce použitie.

Ale v súčasnosti žiadny z prehľadávačov nepodporuje žiadne štandardy vektorovej grafiky, aj keď už sú k dispozícii doplnky. Medzi najobľúbenejšie spôsoby, ako dnes zobraziť statické vektorové obrázky na webe, patrí formát SWF (Shockwave Flash) spoločnosti Macromedia a doteraz podceňovaný formát Xara Flare.

Flare je dobré riešenie, ktoré umožňuje zahrnutie vektorových obrázkov, ktoré umožňujú takmer na neurčito zvýšiť úroveň detailov na stránke, pričom je veľkosťou stále porovnateľná s Shockwave Flash. To neznamená, že použitie ďalších modulov na prezeranie obrázkov je nepohodlné, ale keď používate také nástroje na svojich stránkach, nezabudnite na to užívateľa upozorniť a dať mu možnosť stiahnuť si vhodný modul skôr, ako prejde na stránku, ktorá bude obsahovať tieto položky. Z krátkodobého hľadiska to samozrejme spomalí proces prehliadania nových používateľov, ale postupne si získate ďalších a ďalších prívržencov, až kým sa príslušné nástroje konečne nedostanú do ďalšej verzie prehliadača a doplnkový modul už nie je potrebný pre začiatočníkov.

Animácia, interaktivita a interakcia

Všeobecne možno obrázky GIF usporiadať do špeciálneho stohu v jednom súbore a výsledný „film“ (flipbook) je možné reprodukovať vytvorením jednoduchej bitmapovej animácie. Aplikácie Netscape aj Microsoft poskytovali podporu animovaných súborov GIF od svojich tretích verzií prehľadávačov, takže ich prítomnosti na webe je dnes ťažké sa vyhnúť. Početné animátory GIF, ktoré vám umožňujú vytvárať takéto komplexy GIF, sú veľmi rozšírené (komerčné aj verejné). Animácia súborov GIF však môže viesť k nezvládnuteľným veľkostiam súborov, pretože každá „vrstva“ takéhoto stohu je samostatným obrázkom GIF, takže typických 15 snímok za sekundu pre počítačovú animáciu môže vyprodukovať nespočetné množstvo kilobajtov.

V kombinácii s Java alebo JavaScript môžete vytvárať interaktívne animácie, ktoré budú reagovať na používateľa.

Teraz sa pozrime na ďalšie riešenia pre webovú animáciu a interaktívnu interakciu používateľov, pričom tu bude naďalej hrať hlavnú rolu spoločnosť Macromedia, ktorá už dlho chodí na trh so svojimi programami Shockwave a Flash a neustále zdokonaľuje svoje produkty, pričom zvyšuje ich efektivitu v súlade s potrebami používateľov a dizajnérov. ...

Shockwave, pôvodne vyvinutý ako formát pre Macromedia Director, je skupina protokolov zameraných predovšetkým na produkciu interaktívneho a grafického obsahu navrhnutého špeciálne pre použitie na internete. A Shockwave Flash je všeobecne jedinečný nástroj a jeden z najlepších spôsobov, ako vytvoriť animáciu a publikovať ju na webovej stránke. Shockwave Flash vytvára veľmi malé súbory (pretože využíva hlavne vektorový formát) a je z hľadiska prípravy pohodlnejší v porovnaní s inými formátmi.

Pri zverejňovaní takejto animácie na svojich stránkach nezabudnite na túto skutočnosť upozorniť používateľa, aby sa vopred zásobil ďalším modulom a pripravil sa na trýznivé čakanie na stiahnutie. Avšak najnovšie verzie - Netscape Navigator aj Internet Explorer - majú prehliadače animácií Flash aj v základnom balíku. Netscape potvrdil, že budúce verzie Navigátora budú mať túto podporu pre Flash, dokonca aj na úrovni kódu.

Konečné rozhodnutie je na vás

Takže prístup k prezentácii webového obsahu sa mení, objavujú sa nové dátové formáty a vývojové nástroje, ktoré ich podporujú. Staré formáty (na prezentáciu grafiky sú GIF a JPEG) sú však stále dosť populárne. Podporujú ich takmer všetky prehľadávače a väčšina vývojárov s nimi má bohaté skúsenosti. Je dôležité používať správny formát pre váš konkrétny účel, aby ste zabezpečili rovnováhu medzi kvalitou obrazu a veľkosťou súboru. Napríklad jeden obrázok GIF môže zaberať viac miesta a produkovať výsledok s nižšou kvalitou ako obrázok JPEG, ale u iného platí opak.

Pri prezentácii bitmapových obrázkov sa však stáva výhodnejším formát PNG. Ak pôjdete ešte ďalej a pokúsite sa použiť vektorový obrázok, dnes je vám k dispozícii formát Shockwave Flash od spoločnosti Macromedia.

Formát SWF (Shockwave Flash) nie je bežný, ale ide o interný vektorový formát programu Flash od spoločnosti Macromedia (pozri Macromedia Flash Tutorials na disku CD-ROM), takže aby ste mohli získať svoj vlastný obrázok alebo animáciu, budete si musieť kúpiť zodpovedajúci multimediálny balík od spoločnosti Macromedia a používateľ si bude musieť na vizualizáciu výsledku nainštalovať ďalší modul. Existuje teda niekoľko nepríjemností, ktoré musíte prekonať, aby ste mohli na svoju webovú stránku umiestniť vektorovú grafiku.

Na ceste sú však aj ďalšie vektorové formáty, ktoré sa čoskoro stanú štandardom.

ComputerPress 5 "1999

Existujú stovky obrazových formátov, ale webové prehliadače podporujú iba niektoré. V tomto článku popíšeme rôzne formáty grafických súborov, ktoré majú webdizajnéri k dispozícii, a v takom prípade by sa mali použiť.

Formáty grafických súborov, ktoré podporujú najpopulárnejšie webové prehľadávače, sú: Graphic Interchange Format (GIF), Joint Photographic Experts Group (JPEG), Portable Network Graphics (PNG) a vektorová grafika. Niektoré vlastnosti grafických súborov:

• Priehľadnosť - táto vlastnosť umožňuje, aby bol obrázok v rôznej miere priehľadnosti od úplnej po úplne priehľadnú.
• Kompresia - táto vlastnosť umožňuje uložiť obrázok do oveľa menšieho súboru pomocou matematických algoritmov na to, aby sa skupina pixelov považovala za jeden prvok.
• Tkanie - umožňuje načítať obrázok najskôr nepárne a potom párne čiary. To umožňuje návštevníkovi vidieť obraz rýchlejšie.
• Animácia - vytvorí vzhľad pohybu vytvorením série postupných snímok. Animovaný GIF nevyžaduje doplnok prehliadača a môže fungovať takmer na všetkých zariadeniach.
• Progresívne načítanie - Podobné ako pri tkaní, pretože iba na začiatku stiahne časť obrázka, ale nie na prekladanom základe.

GIF bol založený v roku 1980 a weboví dizajnéri ho prijali na začiatku 90. rokov ako primárny grafický formát pre webové stránky. Súbory GIF používajú kompresný algoritmus, vďaka ktorému je veľkosť súboru malá na rýchle načítanie. GIF je obmedzený na 256 farieb (8-bitových), priehľadnosť a podpora prekladanej grafiky. Pomocou tohto formátu je tiež možné vytvoriť animovanú grafiku. Všetky prehľadávače môžu bez problémov zobraziť súbory GIF.

Výhody GIF:

• Najčastejšie podporovaný grafický formát
• Diagramy vyzerajú v tomto formáte lepšie
• Podpora transparentnosti

Súbory sú komprimované, ale podporujú „skutočné farby“ (24-bitové) a sú preferovaným formátom pre fotografie, kde je problémom kvalita. JPEG podporuje progresívny formát, ktorý umožňuje vidieť obraz takmer okamžite, čo po dokončení sťahovania zlepší kvalitu.

Na rozdiel od súborov GIF môžu weboví dizajnéri manipulovať s komprimovanými súbormi JPEG, čo umožňuje rôzne úrovne kvality obrazu a veľkosti súborov.

Výhody JPEG:

• Väčšia kompresia znamená vyššiu rýchlosť sťahovania.
• Produkuje vynikajúcu kvalitu fotografií a zložitých kresieb.
• Podpora 24-bitových farieb.

PNG je relatívne nový formát, ktorý bol zavedený ako alternatíva k súborom GIF. PNG podporuje až 24-bitové farby, priehľadnosť, prekladanie a môže obsahovať krátky textový popis obrázka, ktorý používajú vyhľadávače.

Výhody PNG:

• Prekonáva 8-bitové obmedzenia farieb v GIF
• Umožňuje textový popis obrázkov pre vyhľadávače
• Podporuje transparentnosť
• Schémy vyzerajú lepšie ako JPEG

Vektorová grafika

Väčšina webových grafík je bitmapa alebo grafika, ktorá je tvorená mriežkou farebných pixelov. Ilustrácie by mali byť vytvárané vo vektorovej grafike, ktorá pozostáva z matematického popisu každého prvku, ktorý tvorí tvary čiar a farby obrázka. Vektorová grafika sa vytvára pomocou programov ako Adobe Illustrator alebo CorelDRAW. Vektorová grafika musí byť pre použitie na webových stránkach prevedená do ľubovoľného formátu GIF, JPEG alebo PNG.

Aký formát by ste mali použiť?

Webový dizajnér môže pre väčšinu aplikácií zvoliť formát GIF alebo JPEG. Ale keďže súbory GIF majú tendenciu byť malé v porovnaní s veľkosťou súborov JPEG, väčšina webových dizajnérov použije GIF na pozadie, škatule, rámy a akúkoľvek inú grafiku, ktorá vyzerá skvele s 8-bitovými farbami.

Väčšina dizajnérov zvolí pre fotografie a ilustrácie formát JPEG, kde kompresia neohrozuje vizuálnu kvalitu obrazu.