Pro umístění grafických obrázků na webové stránky. Shrnutí lekce o "obrázcích na webových stránkách"

Číslovaný seznam velmi podobné označenému. Jediný rozdíl je v tom, že před každou položku v číslovaném seznamu se místo grafických značek automaticky umísťují pořadová čísla nebo písmena.

Číslovaný seznam je určen pomocí značek. Stejně jako u seznamu s odrážkami je každá položka označena štítkem

klíčové slovo PÁSKA.

TAPE = 1 - Standardní číslování (1,2,3,4,5, ...)

TAPE = A – Velká písmena (A, B, C, D, ...)

TAPE = a – Velká písmena (a, b, c, d, ...)

TAPE = I - římské číslice (I, II, III, IV, ...)

TAPE = i – malá římská čísla (i, ii, iii, iv, ...)

Seznamy definic vypadají mírně odlišně od ostatních typů seznamů. V tomto případě se k popisu každé položky v seznamu používají dvě značky, nikoli jedna značka.

1. ... Štítek
   určuje jeden prvek, tj. definovaný termín a značku
   - zbytek informací zobrazených na dalším řádku je odsazen. Druhý řádek informací se nazývá definice. Definiční seznam se zadává stejným způsobem jako ostatní seznamy. Jediný rozdíl je v tom, že každý prvek vyžaduje dva tagy.

   Jednou ze skvělých věcí na seznamech je schopnost je vnořovat. Vnoření seznamu do seznamu je stejné jako jednoduché vytvoření seznamu. Na to nejsou žádné speciální. HTML tagy... Abyste předešli zmatení prohlížeče, ujistěte se, že jste zavřeli každý vnitřní seznam pomocí značky... Můžete dokonce investovat jeden do druhého odlišné typy seznamy.

   Přehrajte si všechny výše uvedené seznamy

   Seznamy mají jednu nevýhodu – jsou jednorozměrné. To znamená, že informace můžete umístit pouze na po sobě jdoucí řádky. Tabulky naproti tomu umožňují uspořádat data nejen do řádků, ale také do sloupců.

   K definování tabulek se používá řada značek. Tagy

   a orámovat celou tabulku a řada dalších značek určuje, jak budou informace zobrazeny. Tabulka poskytuje úplný popis značek tabulky.

   
   
   

   HTML tagy pro vytváření tabulek:

   Popis tagů

   a Tyto štítky pokrývají stůl. Štítek

   sděluje prohlížečům, že následuje popis tabulky. Pokud chcete, aby byla viditelná mřížka oddělující řádky a sloupce, přidejte klíčové slovo BORDER.

   zobrazeny jako titulek. K nastavení názvu můžete také použít značky. a.

   Značky zobrazují text s nadpisy řádků nebo sloupců mírně větším tučným písmem.

   a Tagy definují každý řádek tabulky. Štítek nepovinné, ale váš HTML kód bude úplnější a srozumitelnější.

   Tato dvojice značek odděluje text každé buňky v tabulce.

   Vytvořte soubor, do kterého chcete sestavit tabulku s pěti řádky a pěti sloupci.

   Existuje řada značek, které umožňují nastavit barvy pozadí a mřížky tabulky. V prvním případě se do tagu vloží klíčové slovo BGCOLOR

   a Text označený těmito značkami,

   a
   a

   následující obrázky:

   Kromě klíčového slova BGCOLOR existují další způsoby, jak ovládat barvu:

   BORDERCOLOR Změna barvy mřížky tabulky

   BORDERCOLORDARK / Používá se ke změně sítě z

   Další 3D efekt BORDERCOLORLIGHT

   Změňte barvu mřížky tabulky pomocí 3D efektu.

   Lekce 12-13. Pomocí grafiky

   Obrázky a grafika jsou pro WWW velmi důležité. Je to jediný internetový nástroj, který vám umožňuje prohlížet obrázky i text na obrazovce současně.

   Chcete-li umístit obrázek na webovou stránku, musíte vědět, jak značku použít ... Zadejte značku a klíčové slovo SRC = pro označení grafiky ke stažení.

   

   Při zadávání této značky mějte na paměti, že soubor musí být umístěn ve stejné složce jako váš soubor HTML.

   Grafické obrázky umístěné na webové stránce přispívají nejen k lepšímu vnímání informací, ale také činí stránky jasnějšími a zapamatovatelnějšími. Grafické obrázky si můžete připravit sami nebo využít služeb designérů. Lze použít i knihovny grafických souborů softwarových produktů, jako Microsoft Office, CorelDraw atd.

   Umístíme na domovskou stránku webu, který vytváříme, grafický obrázek z knihovny klipartů, která je součástí sady Microsoft Office. Chcete-li to provést, postupujte takto:

   1. Otevřete vytvořený web.
   2. Otevřít domovská stránka dvojitým kliknutím na název souboru index.htm v panelu Seznam složek(Seznam složek).
   3. V nabídce Vložit(Vložit) vyberte příkaz Výkres snímky(Clip Art). V okně FrontPage se zobrazí podokno. Vložte obrázek(Vložte klipart).
   4. V tomto panelu vyberte příkaz Sbírka obrázků(galerie médií). Otevře se dialogové okno umožňující výběr grafického obrázku (obr. 15.8).

   Rýže. 15.8.

   V horní části dialogového okna jsou kromě tlačítek, která ovládají zobrazení objektů zobrazených v okně a také kopírování a mazání objektů, tlačítka přiřazení (viz tabulka).

   1. Panel Seznam sbírek obsahuje složky vašeho počítače s multimediálními soubory a také soubory klipartů z knihovny klipartů. Otevřete složku kategorie obrázků, které vás zajímají. Obrázky této kategorie se objeví v pracovní oblasti okna. Když umístíte kurzor na obrázek, zobrazí se nápověda označující název, velikost obrázku a soubor, který obsahuje, a také formát grafického obrázku (obr. 15.9).

   1. Klepněte na tlačítko se šipkou na pravé straně vybraného obrázku. Zobrazí se kontextová nabídka.
   2. Vyberte příkaz z kontextové nabídky kopírovat(K Soru.)
   3. Přejděte na webovou stránku a vložte do ní obrázek ze schránky pomocí jakéhokoli vhodného nástroje. Například stiskněte kombinaci kláves +.
   4. Uložte webovou stránku s grafickým obrázkem, který se na ní nachází, kliknutím na tlačítko Uložit(Uložit) na standardním panelu nástrojů. Zobrazí se dialogové okno Ukládání vložených souborů(Save Embedded Files) (obr. 15.10), nabízející uložení obrázku umístěného na stránce do složky snímky Web pod názvem, pod kterým byl soubor umístěn v knihovně. Toto okno obsahuje tlačítka pro následující účely:
      • Přejmenovat(Přejmenovat) - umožňuje přejmenovat soubor.
      • Změnit složku(Změnit složku) – otevře dialogové okno Změnit složku(Změnit složku) obsahující složky aktuální webové stránky, což vám umožní vybrat jinou složku pro uložení souboru.
      • Akce(Nastavit akci) otevře dialogové okno Nastavení akce, umožňuje změnit hodnotu Uložit(Uložit) sloupec Akce na Neukládat(Neukládat.) Při výběru hodnoty Uložit obrázek se uloží do složky webu, který jste určili, jinak odkaz na obrázek v knihovně klipartů zůstane na webové stránce.

   Kraj Výkres(Náhled obrázku) zobrazuje hostovaný obrázek. Nastavením v dialogovém okně Ukládání vložených souborů požadované parametry, klikněte OK. Grafický soubor bude uložen do složky, kterou jste zadali na webu.

   

   Rýže. 15.10.

   Umístění grafického obrázku ze souboru

   Probrali jsme umístění grafiky z knihovny Clip Ait na webovou stránku. Chcete-li umístit grafický obrázek ze souboru na stránku, proveďte jednu z následujících akcí:

   • V nabídce Vložit(Vložit) vyberte příkaz Výkres(Obrázek) a poté v otevřené podnabídce - možnost Ze souboru(ze souboru)
   • Klepněte na tlačítko Přidat obrázek ze souboru(Vložit obrázek ze souboru) na standardním panelu nástrojů
   • Klepněte na tlačítko Přidat obrázek ze souboru(Vložit obrázek ze souboru) na panelu nástrojů Výkresy(obrázky)

   Když provedete kteroukoli z těchto akcí, otevře se dialogové okno. Výkres(Obrázek) (obr.15.11). V tomto okně vyhledejte požadovaný grafický soubor a kliknutím na tlačítko jej umístěte na webovou stránku. Vložit(Vložit). Dialogové okno se zavře a obrázek se umístí na stránku.

   

   Rýže. 15.11.

   Nastavení vlastností obrázku

   Po umístění obrázku na webovou stránku je třeba nakonfigurovat jeho vlastnosti pomocí dialogového okna Vlastnosti obrázku(Vlastnosti obrázku) (obr.15.12). Chcete-li jej otevřít, klikněte na obrázek a poté proveďte jednu z následujících akcí:

   • V nabídce Formát(Formát) vyberte příkaz Vlastnosti(Vlastnosti)
   • Vyberte tým kontextová nabídka Vlastnosti obrázku(Vlastnosti obrázku)
   • Stiskněte kombinaci kláves +

   Dialogové okno Vlastnosti obrázku obsahuje tři záložky: Jsou běžné(Všeobecné), Nahrávání videa(Video), Pohled(Vzhled). Podívejme se podrobněji na možnosti nastavení pomocí tohoto dialogového okna.

   

   Přidání obrázku probíhá ve dvou fázích: nejprve se připraví grafický soubor v požadovaném formátu a velikosti, poté se soubor zobrazí na stránce pomocí prvku .

   Formáty souborů

   Pro webovou grafiku jsou široce používány dva formáty – PNG a JPEG. Jejich multifunkčnost, všestrannost, malé množství zdrojových souborů s dostatečnou kvalitou pro web jim posloužily pozitivně, vlastně je definovaly jako standard pro webové obrázky. Kromě nich stránky používají formáty GIF a SVG.

   Formát PNG-8

   PNG-8 (Portable Network Graphics) je bezplatný formát vytvořený jako náhrada GIF, který již dlouho používá proprietární algoritmy.

   Zvláštnosti

   • V obraze používá 8bitovou paletu (256 barev), za kterou dostal v názvu osmičku. V tomto případě si můžete vybrat, kolik barev bude do souboru uloženo - od 2 do 256.
   • Na rozdíl od GIF nezobrazuje animaci.

   Oblast použití

   Formát PNG-24

   PNG-24 je formát podobný PNG-8, ale pomocí 24bitové barevné palety, jako je JPEG, zachovává jas a odstíny barev na fotografiích. Stejně jako GIF a PNG-8 zachovává detaily obrazu, jako jsou perokresby, loga nebo ilustrace.

   

   Zvláštnosti

   • Používá přibližně 16,7 milionů barev na soubor, proto se tento formát používá pro plnobarevné obrázky.
   • Podporuje víceúrovňovou průhlednost, což umožňuje vytvořit plynulý přechod z průhledných do barevných oblastí obrázku.
   • Vzhledem k tomu, že použitý kompresní algoritmus zachovává všechny barvy a pixely v obraze beze změny, má PNG-24 ve srovnání s jinými formáty největší výslednou velikost grafického souboru.

   Oblast použití

   Fotografie, kresby obsahující průhledné a poloprůhledné plochy, kresby se spoustou barev a ostrými hranami obrázků.

   formát JPEG

   JPEG (Joint Photographic Experts Group) je populární formát obrazových souborů široce používaný při vývoji webových stránek a pro ukládání fotografií. JPEG podporuje 24bitové barvy a zachovává jas a barevné tóny vašich fotografií beze změny. Tento formát se nazývá ztrátová komprese, protože algoritmus JPEG selektivně odmítá data. Komprese může deformovat obrázek, zejména pokud obsahuje text, jemné detaily nebo ostré hrany. Formát JPEG nepodporuje průhlednost. Když uložíte fotografii v tomto formátu, průhledné pixely se vyplní zadanou barvou.

   

   Zvláštnosti

   • Počet barev na snímku je přibližně 16,7 milionů, což je dostačující pro zachování fotografické kvality snímku.
   • Hlavní charakteristikou formátu je „kvalita“, která umožňuje řídit konečnou velikost souboru. Kvalita se měří od 0 do 100, čím vyšší hodnota, tím lepší je obrázek, ale také se zvětšuje velikost souboru.
   • Podporuje technologii zvanou progresivní JPEG, ve které se ve výřezu zobrazuje verze obrázku s nízkým rozlišením, dokud se obrázek zcela nenačte.

   Oblast použití

   Používá se především pro fotografie. Není příliš vhodný pro obrázky obsahující průhledné oblasti, malé detaily nebo text.

   formát GIF

   GIF (Graphics Interchange Format) je formát grafického souboru široce používaný při vytváření animovaných obrázků. GIF používá 8bitové barvy a efektivně komprimuje oblasti plné barev při zachování detailů obrazu.

   

   Zvláštnosti

   • Počet barev v obrázku může být od 2 do 256, ale může to být jakákoliv barva z 24bitové palety. Soubor GIF může obsahovat průhledné oblasti. Pokud je použito jiné než bílé pozadí, bude prosvítat „dírami“ v obrázku.
   • Podporuje snímky po jednotlivých snímcích, díky čemuž je tento formát oblíbený pro vytváření jednoduchých animací.
   • Používá metodu bezztrátové komprese

   Oblast použití

   Text, loga, ilustrace s ostrými hranami, animované kresby, obrázky s průhlednými plochami, bannery.

   formát SVG

   SVG (Scalable Vector Graphics) je vektorový formát, ve kterém se obrázek neskládá z pixelů, ale z objektů a křivek. Z tohoto důvodu není vhodný pro rastrové fotografie složené z bodů, ale je skvělý pro ilustrace s výraznými obrysy.

   Zvláštnosti

   • Obrázky ve formátu SVG lze zmenšit podle potřeby bez ztráty kvality obrazu.
   • Velikost souboru je obvykle malá.
   • Podporuje animaci a interaktivitu.

   Oblast použití

   Text, loga, ilustrace s ostrými hranami.

   Přidání obrázku

   Chcete-li přidat obrázek na webovou stránku, použijte prvek , jehož atribut src definuje adresu grafického souboru. Obecná syntaxe pro přidání obrázku je následující.

   "alt =" (! JAZYK:<альтернативный текст>!}">

   Atributy src i alt jsou povinné.

   Atribut src nastavuje cestu ke grafickému souboru, k jejímu zadání můžete použít buď absolutní nebo relativní adresu. Dále se podívejme na několik různých způsobů, jak určit cestu k obrázku pro umístění na webovou stránku. Jako příklad si vezměme soubor s názvem target.png, který je uložen ve složce images kořenového adresáře webu.

   http://example.ru/images/target.png
   Pokud adresa začíná protokolem (http: // nebo https: //), pak mluvíme o absolutní adrese. Obrázek se vždy stáhne ze zadané internetové adresy, a to i při ukládání webové stránky do místního počítače.

   //example.ru/images/target.png
   Toto je absolutní adresa obrázku bez určení protokolu. Prohlížeč nezávisle nahradí požadovaný protokol, na kterém web běží (http: // nebo https: //). Upozorňujeme, že tento druh adresy nefunguje na místních webových stránkách, ale pouze na internetu pod kontrolou webového serveru.

   /images/target.png
   Pokud je na začátku adresy URL lomítko (/), znamená to, že složka obrázků je umístěna v kořenovém adresáři webu. Jedna složka může být vnořena do jiné, takže cesta může být delší. Například /assets/images/target.png znamená, že složka aktiv je umístěna v kořenovém adresáři webu, obsahuje složku obrázků, ve které je umístěn soubor target.png.

   ../images/target.png
   Dvě tečky s lomítkem na začátku adresy (../) označují, že složka s obrázkem je ve struktuře složek o jednu úroveň vyšší než HTML dokument. Na Obr. Obrázek 1 ukazuje soubor source.html, do kterého chcete vložit obrázek target.png.

   

   Rýže. 1. Umístění souborů

   obrázky / target.png
   Název složky bez teček na začátku adresy značí, že HTML dokument a složka obrázků jsou na stejné úrovni (obr. 2).

   

   Rýže. 2. Umístění souborů

   target.png
   Jediný název souboru znamená, že obrázek a webová stránka jsou na stejném místě (obrázek 3).

   

   Rýže. 3. Umístění souborů

   Příklad 1 ukazuje několik způsobů, jak přidat grafiku na webovou stránku.

   Příklad 1. Přidání obrázků

   

   

   

   

   Alternativní text

   Alternativní text je důležitou součástí obrázků a je určen pro zrakově postižené, kteří nevidí obrázky a přijímají informace z webu sluchem. Speciální čtečky obrazovky přečtou text z webu a místo obrázků řeknou text napsaný v atributu alt. V běžných prohlížečích se alternativní obsah zobrazuje pouze tehdy, když se na webové stránce z nějakého důvodu nezobrazují obrázky.

   Atribut alt by měl popisovat obsah obrázku, a pokud obrázek plní dekorativní funkci a nenese žádný smysluplný význam, ponechte alt prázdný (příklad 2).

   Příklad 2. Použití alt

   

   

   Pokud obrázky vyžadují viditelnou nápovědu, měli byste použít atribut globálního názvu, který lze přidat k jakémukoli prvku, nejen k obrázkům. Když najedete na obrázek, zobrazí se text obsahující hodnotu atributu title (příklad 3).

   Příklad 3. Použití titulku

   

   Typ popisku závisí na konkrétním prohlížeči a nelze jej změnit. Na Obr. 2 zobrazuje nápovědu v prohlížeči Firefox.

   

   Rýže. 2. Typ popisku

   Změna velikosti obrázku

   Změna velikosti obrázku prvku jsou uvedeny atributy width (width) a height (height). Jako hodnoty se používají pixely nebo procenta. Příklad 4 ukazuje přidání těchto atributů do .

   Příklad 4. Rozměry obrázku

   

   
   

   Atributy width a height jsou volitelné, po načtení obrázku prohlížeč automaticky nastaví jeho původní velikost. Tyto atributy se používají hlavně pro následující účely:

   • rezervovat místo pro obrázek;
   • zmenšit velikost velkých fotografií;
   • zlepšit kvalitu obrazu pro displeje Retina.

   Pokud jsou rozměry obrázku specifikovány explicitně, pak je prohlížeč použije k zobrazení prázdné oblasti odpovídající obrázku při načítání dokumentu. V opačném případě prohlížeč čeká na úplné načtení obrázku a poté změní šířku a výšku obrázku. V tomto případě může být text přeformátován, protože zpočátku není známa velikost obrázku a je automaticky nastavena na malou.

   Šířku a výšku obrázku lze měnit nahoru nebo dolů. Prohlížeč sám odstraní nadbytečné pixely, nebo naopak doplní chybějící, aby získal obrázek vhodné velikosti. Kvalita výsledného obrázku silně závisí na jeho obsahu, v každém případě je třeba pamatovat na to, že obraz lze nekonečně zvětšovat bez ztráty detailů pouze ve filmu.

   Retina displeje mají vysokou hustotu pixelů a detaily obrazu, takže běžné obrázky vypadají lehce vybledlé. Pro zlepšení jejich kvality jsou obrázky připraveny s dvojnásobnou velikostí. Pokud například webová stránka vyžaduje fotografii o šířce 400 pixelů, pořídíme fotografii o šířce 800 pixelů, ale v hodnotě atributu width ponecháme šířku 400 pixelů.

   Atributy šířka a výška nemusí jít dohromady. Pokud jeden z těchto atributů není zadán, prohlížeč nezávisle nahradí požadovanou hodnotu na základě poměru stran obrázku.

   

   Vzhledem k tomu, že nezávisle dosazujeme šířku a výšku obrazu, můžeme záměrně deformovat jeho proporce vertikálním nebo horizontálním roztažením obrazu.

   

   Kromě pixelů je přípustné používat jako rozměry i procentuální zápis. V tomto případě je šířka relativní k rodičovskému prvku.

   

   V takových případech dochází k potížím s výškou, protože výška obrázku v procentech se bere v úvahu pouze v případě, že je explicitně definována výška jeho rodiče. Pokud není výška nadřazeného prvku žádným způsobem specifikována, bude položka jako height = "100 %" ignorována.

   Grafika a provoz

   Požadavky na krásu a výraznost webových stránek jsou v neustálém rozporu s technickými možnostmi moderního webhostingu. Návrhář 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í dodání informací na webu. Pro úspěšné vyřešení tohoto problému je nutné znát všechny grafické formáty používané na internetu, pochopit rozdíly mezi nimi, rozsah a zvláštnosti jejich použití.

   Chcete-li se vypořádat s velkým množstvím formátů a protokolů akceptovaných na internetu a vytvořit 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 vyhrazený zásuvný modul. Z celé řady formátů jsme vybrali pouze ty, které nejčastěji používají autoři oblíbených stránek a jsou uživateli akceptovány.

   GIF a JPEG jsou dva nejoblíbenější grafické formáty, 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í nic zvláštního software(nebo přídavné moduly). GIF a JPEG - bitmapové formáty obrázky, což podle toho určuje pevný formát (rozlišení) při zobrazování takových obrázků na obrazovce. Když se pokusíte změnit měřítko (poskytováno v některých prohlížečích), bitmapové (pixelové) obrázky výrazně ztrácejí na kvalitě. Pro 8bitový (256barevný) formát GIF možnost výběru barevná paleta.

   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 mnohem menší, pokud jde o úložný / přenosový objem, jsou snadno škálovatelné a prakticky neztrácejí kvalitu při žádných transformacích. Bohužel vektorové formáty jsou na internetu stále málo použitelné, 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 svůj vektorový formát již dávno otevřela. Záblesk rázové vlny další vývojáři a implementovali další moduly pro prohlížení grafiky v tomto formátu pro oblíbené prohlížeče.

   Ne všechny nové produkty jsou však nutně lepší pro všechny aplikace. Nejčastě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.

   Volba formátu tedy v konečném důsledku závisí na vašich úkolech a je jen na vás, které obrázky jsou pro vaši cílovou skupinu vhodnější.

   GIF - formát pro návrh

   CompuServe původně zamýšlel svůj formát GIF pro interaktivní aplikace s omezenými možnostmi standardní grafiky na osobním počítači. Původně se jednalo o 4- a později 8bitový rastrový formát s nastavením barevné palety, který podporoval 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 se nemohou „přichytit“ k paletě 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 bez výjimky (ať už je to PC, Mac, Web-TV nebo jiné), bez ohledu na to, s jakou barevnou hloubkou ten či onen systém pracuje. Této univerzálnosti lze dosáhnout s omezenou paletou 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ě zajišťuje konzistentní, multiplatformní a na hardwaru nezávislé vykreslování. Formát GIF navíc používá schéma bezztrátové komprese (s jednoduchým algoritmem opakování kódová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.

   Avšak právě kvůli těmto vestavěným barevným omezením lze GIF použít pouze pro obrázky, které mají omezený počet barev, jako jsou černobílá schémata nebo obrázky obsahující velké plochy stejné barvy, jako jsou kreslené rámečky nebo digitální kresby. s jednolitou barvou.náplň. Samozřejmě můžete libovolný obrázek uložit ve formátu GIF pomocí tzv. ditheringu a získat tak dostatečně slušnou kvalitu, ale v tomto případě riskujete, že po aplikaci výše uvedené komprese s opakování paměti (v degenerovaném případě, kdy v obraze není žádné sousední opakování, získáte zvětšení souboru přesně dvakrát 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 okrajem 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í k destrukci pevných oblastí a vyhlazování 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 uložte do tohoto formátu (především se jedná o černobílé nebo nekvalitní kresby).

   Pro fotografie, snímky videa nebo jiné plnobarevné obrázky s hladkými barevnými přechody (gradienty) použijte formát JPEG.

   Je také důležité nezapomenout, že pokud se pokoušíte uložit obrázky se spojitými tóny ve formátu GIF, pak pravděpodobně budete muset v procesu přípravy obrázku (při převodu na pevnou paletu) zahodit tolik informací. kompresní metoda používaná v GIF se ukazuje jako natolik neefektivní, že proděláte i finančně (jak z hlediska mzdových nákladů, tak z hlediska velikosti souboru).

   Formát GIF mimo jiné zajišťuje tzv. prokládaný vzhled, který uživatelům s pomalými kanály na samém začátku příjmu pomáhá vyhodnotit obsah obrazu (efekt je podobný postupnému vykreslování neostrého obrazu) a čas potřebný k jeho úplnému předání, a v důsledku toho obdrží rozhodnutí, zda pokračovat v přijímání nebo je lepší jej odmítnout. Na rozdíl od progresivního JPEG je zde však efekt spíše psychologický než skutečný (viz obr.).

   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 nevýhodami, je podpora průhlednosti (přípona GIF89a), která umožňuje zobrazit siluetu s neobdélníkovým obrysy na existují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 dekoraci stránky (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 až do 216 univerzálních barev je nezbytná, pokud jsou vaše obrázky určeny k zobrazení v různých prohlížečích a neznámých platformách.

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

   Formát JPEG získal svůj název podle zkratky Joint Photographic Experts Group сcommittee, která tento standard vytvořila na konci 80. a na začátku 90. let. Formát JPEG je založen na algoritmu ztrátové komprese (diskrétní kosinusová transformace), pomocí kterého je váš obrázek rozdělen na oblasti (obvykle čtverce 8X8 pixelů), uvnitř kterých je rozložení barev nahrazeno matematickou funkcí a pouze koeficienty tato funkce se uloží, což vám umožní obnovit její podobu. Samozřejmě budete čelit určité ztrátě kvality (v závislosti na složitosti funkce použité k nahrazení obrazu) a po restaurování 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á. Ale hlavní výhodou JPEG oproti GIF je to, že zatímco GIF je pouze 8bitový (256barevný), JPEG je 24bitový a dokáže zobrazit až 16,7 milionů barev.

   Z tohoto důvodu plně barevný JPEG přirozeně reprodukuje podstatně více video informací než GIF. Tento formát je nejvhodnější pro obrázky v reálném životě, jako jsou naskenované obrázky nebo digitální fotografie, stejně jako digitalizované snímky videa nebo vykreslené scény 3D počítačové grafiky.

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

   Kompresní poměry se u JPEG značně liší v závislosti na použitém softwaru pro úpravu obrázků, ale webové stránky obvykle používají poměry 10:1 nebo 20:1 (vyjádřené jako objem ve vztahu k původnímu obrázku), které obvykle poskytují přijatelnou kvalitu. ... Přesto lze obraz komprimovat až do extrémních hodnot 100:1 (samozřejmě s výraznou ztrátou kvality).

   Při práci s fotografií JPEG tedy můžete uložit 24bitový obrázek s 16,7 miliony barev a navzdory ztrátě kvality při komprimaci stále odpovídá originálu mnohem více než 256barevné zobrazení GIF. V tomto případě nevyhnutelná ztráta kvality silně závisí na velikosti, kvalitě a typu původního obrazu.

   Kromě toho vám JPEG umožňuje definovat takzvané progresivní zobrazení, to znamená, že při načítání se na obrazovce okamžitě objeví „hrubé“ znázornění obrazu, které se při příjmu dodatečné informace, se postupně zlepšuje (zároveň můžete získat potřebnou představu o podstatě zaslané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 sledování síťového obsahu).

   Tyto nástroje můžete používat libovolně a takový postupný vývoj 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ší verze prohlížečů jej nemusí podporovat.

   PNG - univerzální rastrová novinka

   Zástupce další generace bitmapových formátů, PNG, převzal ty nejlepší vlastnosti z JPEG i GIF a přidal 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ízké, střední a vysokým rozlišením.

   Formát Portable Network Graphics (PNG) je relativně nový formát rastrové grafiky, který byl schválen jako standard W3C a měl by postupně nahradit oba „starší“ formáty, jak GIF, tak JPEG. PNG nabízí indexování barev (až 256 barev), podporu 24bitových i 48bitových barev (True-Color) a práci s průhledným kanálem (alfa kanál) a je také výrazně efektivnější než tradiční formáty úložiště. bitmapy.

   Kompresní algoritmus pro plnobarevné obrázky je v kvalitě lepší než JPEG a s podporou omezené indexované palety (až 256 barev) nový formát provádí bezztrátovou kompresi o 10–30 % lepší než ta implementovaná ve formátu GIF, který je v každém případě optimální pro použití. Nový formát bohužel neumožňuje obětovat kvalitu obrazu výměnou za vyšší kompresní poměr, jako např formát JPEG.

   Podpora transparentnosti v formát PNG na rozdíl od GIFu je plnohodnotný, to znamená, že můžete stavět poloprůhledné obrázky nebo okraje, takže problém "čistých" okrajů, který je tak obtížně řešitelný při použití průhlednosti v souboru GIF, je zde snadno překonán.

   Navzdory všem vylepšením nabízeným v PNG se však nový formát uzdraví pouze tehdy, když jej osloví návrháři webových stránek a výrobci softwaru, aby vykreslili obrázky v novém formátu a připravili je k publikaci. Mezitím je 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 přestože jejich nejnovější verze a podporují PNG, dělají to velmi omezeným způsobem. V současné době je jediným řešením pro uživatele, kteří chtějí vidět plnohodnotný soubor PNG samoinstalace externí modul (jako PNG Live).

   Vývojáři podle všeho váhají a čekají na kompletní přechod uživatelů 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 bitmapové 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é reprezentace tvarů). Vektorová grafika nabízí oproti rastru značné výhody, zejména pokud jde o schémata, text a průmyslovou grafiku (a ekonomika formátů je pro web prvořadá).

   První výhodou je tedy výrazně menší velikost vektorových obrázků 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 potřeba přenést 3-4 čísla: poloměr, souřadnice středu a možná i typ nebo 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 možnost prakticky neomezeného měřítka obrazu (nebo detailování jeho částí) bez ztráty rozlišení nebo čistoty obrazu. Není potřeba žádné úsilí k přizpůsobení vektorové reprezentace dané paletě, platformě, hardwaru nebo designu; a vyjednávání kompresního schématu a kvality zobrazení probíhá bez problémů.

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

   Problémy se zobrazením vektorové grafiky celosvětová síť vznikly proto, že neexistoval jiný způsob zobrazení než rastrový a plugin, který se objevil pro zobrazování souborů ve formátu PDF, neposkytoval potřebnou flexibilitu a vyžadoval uložení veškerého obsahu v jedné podobě – PDF.

   Výbor pro standardy W3C v současnosti 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, zatímco VML podporují Microsoft, Hewlett-Packard, Autodesk, Macromedia a Visio. Oba standardy jsou založeny na rozšířeních značkovacího jazyka XML, který je propagován pro použití na webu jako nástupce HTML a doporučený pro použití v budoucnu organizací W3C.

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

   Flare - dobré rozhodnutí který umožňuje zahrnutí vektorových obrázků, které umožňují téměř neomezeně zvyšovat úroveň detailů na stránce, přičemž jejich velikost je srovnatelná s Shockwave Flash. Tím neříkám, že používání přídavných modulů pro prohlížení obrázků je tak nepohodlné, ale když takové nástroje na svých stránkách používáte, nezapomeňte na to uživatele upozornit a dát mu možnost stáhnout si příslušný modul, než přejde na stránku stránku, která bude obsahovat tyto položky. Krátkodobě to samozřejmě zpomalí proces prohlížení pro nové uživatele, ale postupně budete získávat další a další přívržence, až se odpovídající nástroje konečně dostanou do další verze prohlížeče a doplňkový modul již nebude potřebné pro začátečníky.

   Animace, interaktivita a interakce

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

   V kombinaci s Javou nebo JavaScriptem můžete vytvářet interaktivní animace, které budou reagovat na uživatele.

   Nyní se podívejme na další řešení pro webovou animaci a interaktivní uživatelskou interakci, přičemž hlavní roli zde nadále hraje společnost Macromedia, která již dávno vstoupila na trh se svými programy Shockwave a Flash a neustále zdokonalovala své produkty a zvyšovala jejich efektivitu v souladu s potřebami. uživatelů a designérů....

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

   Při publikování takové animace na svých stránkách na to nezapomeňte upozornit uživatele, aby si předem naskladnil doplňkový modul a připravil se na mučivé čekání na stažení. Nejnovější verze jsou však Netscape Navigator a internet Explorer mít prohlížeče pro Flash animace i 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í. Nicméně staré formáty (pro prezentaci grafiky jsou GIF a JPEG) jsou 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 váš konkrétní účel, aby byla zajištěna rovnováha mezi kvalitou obrazu a velikostí souborů. Například jeden obrázek GIF může zabírat více místa a poskytovat výsledky nižší kvality než obrázek JPEG, ale u jiného je tomu naopak.

   Při prezentaci bitmap se však upřednostňuje PNG, a pokud půjdete ještě dále a pokusíte se použít vektorový obrázek, pak je dnes k vašim službám formát Shockwave Flash od Macromedia.

   Formát SWF (Shockwave Flash) není běžný, ale interní vektorový formát Flash programy od Macromedia (viz "Macromedia Flash Tutorials" na CD-ROM), proto, abyste získali svůj vlastní obrázek nebo animaci, budete si muset zakoupit odpovídající multimediální balíček od Macromedia a uživatel bude muset nainstalovat další modul pro vykreslení výsledku. Existuje tedy řada nepříjemností, které musíte překonat, abyste mohli jednoduše umístit vektorovou grafiku na svou webovou stránku.

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

   ComputerPress 5 "1999