Existují stovky obrazových formátů, ale pouze některé z nich podporují webové prohlížeče. V tomto článku si popíšeme různé formáty grafických souborů, které jsou k dispozici webdesignérům a v jakém případě by měly být použity.
Formáty grafických souborů, které jsou podporovány nejoblíbenějšími webovými prohlížeči, jsou: Graphic Interchange Format (GIF), Joint Photographic Experts Group (JPEG), Portable Network Graphics (PNG) a Vektorová grafika. Některé vlastnosti grafických souborů:
- Průhlednost – tato vlastnost umožňuje, aby byl obrázek v různém stupni průhlednosti od pevného stavu až po zcela průhledný.
- Komprese - tato vlastnost umožňuje uložit obrázek ve velkém menší soubor, pomocí matematických algoritmů zacházet se skupinou pixelů jako s jedním prvkem.
- Weave - umožňuje načíst obrázek nejprve na liché řádky a poté na sudé řádky. Návštěvník tak uvidí obrázek dříve.
- Animace – vytváří dojem pohybu prostřednictvím série po sobě jdoucích záběrů. Animovaný GIF nevyžaduje plugin prohlížeče a může fungovat téměř na všech zařízeních.
- Progresivní načítání je podobné tkaní v tom, že zpočátku načítá pouze část obrazu, ale není založeno na střídání čar.
GIF byl založen v roce 1980 a byl přijat webovými designéry na počátku 90. let jako hlavní grafický formát pro webové stránky. Soubory GIF používají kompresní algoritmus, díky kterému je velikost souboru malá rychlé načítání. GIF je omezen na 256 barev (8 bitů), podporuje průhlednost a prokládanou grafiku. Pomocí tohoto formátu je také možné vytvářet animovanou grafiku. Všechny prohlížeče umí bez problémů zobrazit soubory GIF.
Výhody GIFů:
- Nejvíce podporovaný grafický formát
- Diagramy vypadají v tomto formátu lépe
- Podpora transparentnosti
Soubory jsou komprimované, ale podporují „skutečné barvy“ (24 bitů) a jsou preferovaným formátem pro fotografie, kde je kvalita velmi důležitá. JPEG podporuje progresivní formát, který vám umožňuje téměř okamžitě vidět obrázek, který se po dokončení stahování zlepší v kvalitě.
Na rozdíl od souborů GIF mohou weboví návrháři spravovat komprimované soubory JPEG, což umožňuje různé úrovně kvality obrazu a velikosti souborů.
Výhody JPEG:
- Vyšší komprese znamená vyšší rychlost stahování.
- Vytváří vynikající kvalitu pro fotografie a složité kresby.
- Podpora 24bitových barev.
PNG je relativně nedávný formát, který byl představen jako alternativa pro soubory GIF. PNG podporuje až 24bitové barvy, průhlednost, vazbu a může obsahovat krátký textový popis obrázku, který používají vyhledávače.
Výhody PNG:
- Překonává 8bitová barevná omezení GIF
- Umožňuje textový popis obrázků pro vyhledávače
- Podporuje transparentnost
- Schémata vypadají lépe než JPEG
Vektorová grafika
Většina webových grafik je bitmapa nebo vzor, který se skládá z mřížky barevných pixelů. Ilustrace musí být vytvořeny ve vektorové grafice, která se skládá z matematického popisu každého prvku, který tvoří tvary čar a barvy obrázku. Vektorová grafika se vytváří pomocí programů jako např Adobe Illustrator nebo CorelDRAW. Pro použití na webových stránkách musí být vektorová grafika převedena do jakéhokoli formátu GIF, JPEG nebo PNG.
Jaký formát by měl být použit?
Webdesignér si pro většinu použití může vybrat buď formát GIF nebo JPEG. Protože však soubory GIF bývají ve srovnání s velikostí souborů JPEG malé, většina webových návrhářů použije formát GIF pro pozadí, rámečky, rámečky a jakoukoli jinou grafiku, která vypadá skvěle s 8bitovými barvami.
Většina návrhářů zvolí formát JPEG pro fotografie a ilustrace, kde komprese nesnižuje vizuální kvalitu obrazu.
Jediný tag se používá k vložení obrázku do textu webové stránky. (Tabulka P 1). Atributy tohoto tagu nastavují všechny parametry obrázku umístěného na stránce. Povinný je atribut SRC, který udává adresu a název grafického souboru. Pokud atribut SRC není nastaven, zobrazí se pouze ikona prázdného obrázku.
Struktura značky s atributem SRC vypadá takto:
.
Pokud je grafický soubor s názvem Institute umístěn ve stejné složce jako webová stránka, pak pro jeho umístění byste měli napsat:
.
Název souboru Format
Chcete-li umístit grafický soubor s názvem MINSK, který se nachází na adrese D:\Collection\Cities\MINSK.GIF, napište .
S visačkou webová stránka hostí grafický soubor umístěný na jiném počítači v globální síti „Internet“.
Pro vytvoření webové stránky s fotografií našeho ústavu, která je znázorněna na obr. 4.1, musíte zadat následující HTML kód:
Náš ústav
Rýže. 4.1. Webová stránka s fotografií ústavu
Ve výše uvedeném příkladu je výška fotografie (HEIGHT) 200 pixelů a šířka (WIDTH) je 300 pixelů. Pro umístění fotografie se vytvoří odstavec se zarovnáním na střed.
vodorovné čáry
Umístění vodorovných čar na webovou stránku se provádí pomocí jediného tagu
. Atributy SIZE, WIDTH, COLOR a ALIGN mění tloušťku, šířku, barvu a zarovnání čar.
Zvažte několik příkladů vysvětlujících umístění vodorovných čar:
1.
- vodorovná čára celá stránka o tloušťce 2 pixely.
2.
WIDTH = "200" ALIGN="RIGHT"> – vodorovná zelená čára 15px tlustá, 200px široká, zarovnána doprava.
3.
- vodorovná čára modré barvy na celé stránce o tloušťce 25 pixelů.
4.
WIDTH = "300" ALIGN = "LEFT"> – červená vodorovná čára o tloušťce 20 pixelů, šířce 300 pixelů, zarovnána doleva.
Linkové mapování pro čtyři zaznamenané příklady je znázorněno na Obr. 4.2.
Rýže. 4.2. Řádky na webové stránce
TABULKY
Vytváření tabulek
Tabulka je vytvořena pomocí spárovaná značka
v HTML kódu.
Každá tabulka se skládá z řádků a řádky se skládají z buněk. K vytvoření řádků a buněk tabulky se používají následující značky:
Tyto značky jsou zapsány uvnitř značky dvojice
Tabulka je tvořena řádek po řádku - nejprve je uveden jeden řádek a v něm je uveden požadovaný počet buněk, poté druhý řádek atd.
Chcete-li získat tabulku zobrazenou na obr. 5.1, musíte zadat následující HTML kód:
| Auta | Cena | Brod | 5000 | Golf | 6000 |
|---|
pak bude tloušťka vnějšího okraje 6 pixelů. Aby se okraje tabulky nezobrazovaly, je nutné atributu BORDER přiřadit hodnotu rovnou 0 nebo tento atribut jednoduše vynechat.
Jak již bylo zmíněno, HTML je dnes základem pro psaní jakékoli webové stránky Celosvětová Síť. V pomocí CSS generování kódu pro jazyk HTML radikálně mění. Může se rozloučit s přeměnou nemotornosti HTML tagy jen získat jedno nebo druhé vizuální efekty. O určitých značkách nebo atributech HTML, jako je například zastaralá značka...
Domov
Objednejte si web a podnikejte!
Tuto frázi lze slyšet a vidět na mnoha stránkách a není to marné!
webová stránka — je tváří společnosti. A je to nejmodernější a nejefektivnější komunikační kanál s potenciálním spotřebitelem. Pouze možnosti internetové stránky umožňují plně využít všechny způsoby, jak uživateli předat informační zprávu. Textové, zvukové a obrazové informace lze odesílat v rámci jedné stránky, aby se s nimi spotřebitel seznámil.
Používáním software můžete přijímat platby, telefonovat, udržovat databáze, odesílat a přijímat faxy, vyměňovat si SMS zprávy a dělat mnoho dalších věcí. Moderní webové stránky jsou informačním centrem nejen pro každou firmu, ale i pro každého uživatele internetu.
A to je oboustranně výhodný způsob efektivní a zároveň jednoduché a vizuální prezentace vašich nápadů nebo vývoje co nejširšímu publiku. A dnes jsou webové dokumenty napsané v hypertextovém značkovacím jazyce HTML nadále hlavní formou reprezentace dat ve webovém prostředí.
Hlavní výhody HTML jsou:
- jednoduchost, která vám umožní naučit se HTML v co nejkratším čase.
- možnost vytvářet si vlastní webové stránky
- a HTML funguje úplně stejně na všech platformách, které dnes existují, není třeba kupovat další hardware. A stačí použít jakýkoli dostupný textový editor, jako je Poznámkový blok.
Na tomto webu jsem se pokusil podrobně popsat celý proces tvorby vlastního webu, konkrétně zveřejnění hotového projektu na internetu, abych k němu měl přístup všem uživatelům.
Doufám, že mnohé z mých článků budou velmi užitečné, protože sám nejsem programátor, ale tato práce mě velmi inspiruje.
Tento tutoriál se zabývá tím, jak ozdobit webovou stránku přidáním grafické obrázky. Seznámíme se s nejběžnějšími formáty obrázků, zjistíme, jaký tag se používá pro přidávání obrázků na stránku, poradíme si s alternativními titulky a zarovnáním textu a grafiky. Seznámíme se také s hlavní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 se to někomu zdát zajímavé, díky informacím na něm uvedeným, ale je nepravděpodobné, že by někdo otočil jazyk, aby to označil 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. Co je ve skutečnosti předmětem dnešní lekce.
Dva nejpoužívanější obrazové formáty na internetu jsou GIF a JPEG. Byl vyvinut a pojmenován skupinou JPEG (Joint Photographic Experts Group) a obecně se 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), což je formát pro výměnu grafických dat. V současné době existuje další nový grafický formát, který získává na popularitě: PNG (Portable Network Graphics). síťová grafika). Očekává se, že časem nahradí formát GIF. Nespěchejte však se znovuuložením všech grafických souborů v tomto formátu, i když jej stále nepodporují všechny prohlížeče.
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ě už můžete určit co tento záznam se skládá ze skutečné značky , jeho atribut (scr) a hodnotu tohoto atributu (location). Protože je však vyžadováno použití atributu scr, je vhodnější odkazovat na tento záznam jako na jednu generickou značku. Pravděpodobně jste si také všimli, že pro značku zdroje obrázku neexistuje žádná odpovídající koncová značka. Toto je samostatná samostatná značka, takže nezapomeňte na její konec přidat koncové lomítko:
.
#1058;D XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1/transitional.dtd"> První obrázky e> Tato grafika byla přidána na mou první webovou stránku. p > 
Přidání alternativních štítků
Při brouzdání po internetu jste si jistě nejednou všimli různých nápisů, které se zobrazují při najetí ukazatelem myši na nějaký grafický prvek webové stránky. Tyto nápisy obvykle některé sdělují Dodatečné informace o samotném obrázku nebo o oblasti stránky, kterou zabírá.
Následující 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 definuje alternativní text pro grafiku přidanou na webovou stránku. Tento text se nazývá alternativní text, protože jej lze zobrazit na obrazovce jako alternativu 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í kanály pro přístup s nízkou rychlostí přenosu dat, může dát svému prohlížeči pokyn, aby nestahoval ani nezobrazoval grafické informace. To jim umožňuje urychlit načítání webových stránek 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 neuvidí na své obrazovce obrázek, bude si moci alespoň přečíst textovou informaci přidanou 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 různé prvky vnější design webové stránky. Chcete-li se takovým chybám vyhnout, můžete nastavit atribut alt takových prvků na prázdnou hodnotu (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ě tato nastavení můžete změnit pomocí značek šablony stylů.
Atributy obrázku
Pro Tag K dispozici jsou atributy, které 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. 3hodnoty těchto atributů jsou nastaveny buď jako pevná množství pixelů nebo v procentech vzhledem k rozměrům stránky. Podívejte se na níže uvedený HTML kód. V prvních velikostech značek původní obrázek, které jste již viděli v předchozích obrázcích tohoto tutoriálu, jsou 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ě si prohlížeč stejně dobře poradí s pixelovými i procentuálními hodnotami. Mějte však na paměti, že počítače návštěvníků vaší webové stránky mohou být nastaveny na jiné rozlišení obrazovky, než jaké máte nastavené pro váš monitor. Co z toho vyplývá? Například rozlišení monitoru je nastaveno na 800x600. V předchozím příkladu byla grafika přidaná na webovou stránku nastavena na šířku 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, zadaných 6 % šířky stránky již bude 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 roztáhne vertikálně nebo horizontálně. Alternativní možnost spočívá v úpravě velikosti obrázku pomocí grafického editoru.
Můžete vytvořit iluzi rychlejšího načítání obrázků. Ať už se velikost obrázku změní nebo ne, vždy zadejte hodnoty atributů výška a šířka, protože prohlížeči sdělí důležité informace o tom, kolik místa by mělo být na stránce pro daný obrázek přiděleno. V tomto případě bude prohlížeč schopen označit místo 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 její návštěvníci nemusí čekat na úplné načtení obrázku, aby konečně viděli další informace uvedené na stránce.
Pokud opravdu chcete, aby obrázek zabíral určité množství místa po šířce stránky, použijte procenta. V tomto případě bude na obrazovce jakéhokoli monitoru obraz zabírat stejnou část stránky jako na vaší obrazovce. Pokud chcete zachovat rozlišení samotného obrázku (jeho velikost v pixelech) konstantní, použijte hodnoty vyjádřené v pixelech.
Zarovnání textu a grafiky
Atribut align značky umožňuje zarovnat obrázek k pravému (pravá hodnota) nebo levému (levá hodnota) okraji textového řetězce. 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 řádku textu). Může mít tři další hodnoty nahoře, dole a uprostřed. Pokud je atribut zarovnání nastaven na horní, horní okraj obrázku je zarovnán s horním okrajem jakéhokoli 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 align nastaven na střed, střed obrázku se zarovná na střed textového řetězce.
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. V HTML je tento úkol snadný, protože obrázky se převádějí na hypertextové odkazy úplně stejným způsobem jako štítky. Chcete-li to provést, musíte také použít značku a ohraničit v ní prvek webové stránky, který by se měl stát odkazem na jiný dokument. Pokud tedy má být po kliknutí na nějaký obrázek následován hypertextový odkaz, musí být tag uzavřen do tagu tohoto obrázku.
V tomto případě se poté, co návštěvník webové stránky najede na obrázek, zobrazí vedle kurzoru 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 použití schopnosti HTML hypertextového odkazu je použití jednoho obrázku k přechodu na jiný. K čemu to je? 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ž dokončí stahová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 o obrázek zájem a chce si stáhnout jeho celou kopii, stačí mu kliknout na tuto miniaturu. Zde je návod, jak vypadají odpovídající HTML kódy.
Jak vidíte, kliknutím na obrázek thumbnail.jpg se otevře další soubor obrázku (image.jpg). Textový řetězec, daný jako hodnota atributu alt, říká návštěvníkovi, jak otevřít hlavní obrázek.
Tajemství úspěšného použití obrázků
Obrázky jsou zajímavé a atraktivní, nesou toho hodně vizuální informace a lze je velmi snadno přidat na webové stránky, ale stále existují určitá pravidla, která byste měli dodržovat, 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. Protože většina uživatelů internetu stále používá nízkonapěťové komunikační kanály pro přístup k síti propustnost, mají pro ně stále zásadní význam velikosti nahrávaných souborů. 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é jsou nejen velikosti souboru jednotlivého obrázku, ale také celková velikost souboru celku HTML dokument. Čím více obrázků je přidáno na webovou stránku, i když jsou malé, tím větší bude velikost souboru konečného dokumentu. Kompletní náhled vaše stránka v různé prohlížeče a odhadněte, jak dlouho trvá každému prohlížeči, než si jej stáhne.
Protože je atribut alt tak důležitý (protože se doporučuje definovat jej 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. Stejná poznámka platí i obráceně: ujistěte se, že obrázky odpovídají textovým informacím uvedeným na webové stránce. Fotografie letadla by byla vhodná na stránce letecké dopravy, ale zcela nadbytečná na stránce s volně žijícími zvířaty.
Na internetu jich najdete mnoho zajímavé obrázky a snadno 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 zobrazený 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, jednoduše klikněte na tento obrázek klikněte pravým tlačítkem myši klikněte a z nabídky, která se otevře, vyberte Uložit obrázek jako. Po uložení obrázku do počítače jej můžete dále používat jako jakýkoli jiný výkres.
Přidání obrázku probíhá ve dvou fázích: nejprve se připraví grafický soubor požadovaný formát a požadovanou velikost, pak se soubor zobrazí na stránce pomocí prvku Pro webovou grafiku jsou široce používány dva formáty – PNG a JPEG. Jejich všestrannost, všestrannost, malý objem zdrojové soubory s dostatečnou kvalitou pro web, posloužily jim dobře, ve skutečnosti je definovaly jako standard pro webové obrázky. Kromě nich se na stránkách používají formáty GIF a SVG. PNG-8 (Portable Network Graphics, přenosná síťová grafika) je bezplatný formát vytvořený jako náhrada GIF, ve kterém na dlouhou dobu byly použity proprietární algoritmy.
.
Formáty souborů
Formát PNG-8
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 používá 24bitový barevný gamut.Podobně jako JPEG zachovává jas a odstín barev na fotografiích. Stejně jako GIF a PNG-8 zachovává detaily obrazu, jako je čárová grafika, 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ž vám umožňuje vytvářet hladký přechod z průhledné oblasti obrázku do barevné oblasti.
- 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 průsvitné plochy, kresby se spoustou barev a jasnými okraji obrázků.
formát JPEG
JPEG (Joint Photographic Experts Group) je populární formát obrazových souborů, který se široce používá k vytváření webových stránek a ukládání fotografií. JPEG podporuje 24bitové barvy a zachovává jas a odstín barev na fotografiích beze změny. Tento formát nazývá se ztrátová komprese, protože algoritmus JPEG selektivně odmítá data. Metoda komprese může způsobit zkreslení obrazu, zejména pokud obsahuje text, jemné detaily nebo ostré hrany. formát JPEG nepodporuje transparentnost. Když uložíte fotografii v tomto formátu, průhledné pixely se vyplní zadanou barvou.
Zvláštnosti
- Počet barev na obrázku je přibližně 16,7 milionu, což je na úsporu docela dost fotografická kvalita Snímky.
- 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 objeví verze obrázku s nízkým rozlišením, než se samotný obrázek plně načte.
Oblast použití
Používá se hlavně pro fotografie. Není příliš vhodný pro kresby obsahující průhledné oblasti, malé detaily nebo text.
formát GIF
GIF (Graphics Interchange Format, formát pro výměnu obrázků) je formát grafického souboru široce používaný k vytváření animovaných obrázků. GIF používá 8bitové barvy a efektivně komprimuje jednobarevné oblasti 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é pozadí než bílé, bude prosvítat skrz "díry" v obrázku.
- Podporuje přechod snímků snímek po snímku, 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á grafika, obrázky s průhlednými plochami, bannery.
formát SVG
SVG (škálovatelná vektorová grafika) - 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 výborný pro ilustrace s výraznými obrysy.
Zvláštnosti
- Obrázky ve formátu SVG lze libovolně zmenšit, aniž by došlo ke ztrátě kvality obrazu.
- Velikost souboru je obvykle malá.
- Podporuje animaci a interaktivitu.
Oblast použití
Text, loga, ilustrace s ostrými okraji.
Přidání obrázku
Prvek se používá k přidání obrázku na webovou stránku. , jehož atribut src určuje adresu grafického souboru. Obecná syntaxe pro přidání obrázku je následující.
Atributy src i alt jsou povinné.
Atribut src nastavuje cestu ke grafickému souboru, k jejímu zadání lze použít absolutní i relativní adresy. Dále zvažte několik různé způsoby, jak určit cestu k obrázku pro jeho 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://), jedná se o absolutní adresu. Obrázek se vždy načte z zadanou adresu na internetu, i když si webovou stránku uložíte 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 tyto typy adres nefungují 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 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řená do jiné, takže se cesta může zvětšit. 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ě lomítka (../) označují, že složka obrázků je ve struktuře složek o jednu úroveň výše než dokument HTML. Na Obr. Obrázek 1 ukazuje soubor source.html, do kterého je potřeba vložit obrázek target.png.
Rýže. 1. Umístění souboru
images/target.png
Název složky bez teček na začátku adresy značí, že HTML dokument a složka s obrázkem jsou na stejné úrovni (obr. 2).
Rýže. 2. Umístění souboru
target.png
Jediný název souboru označuje, že obrázek a webová stránka jsou umístěny na stejném místě (obrázek 3).
Rýže. 3. Umístění souboru
Příklad 1 ukazuje několik způsobů, jak přidat obrázek 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 čtou text z webu a místo obrázků vyslovují 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í viditelné vodítko, měli byste použít globální atribut title, 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
Vzhled 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
Chcete-li změnit velikost obrázku prvku jsou poskytovány atributy width (width) a height (height). Jako hodnota se používají pixely nebo procenta. Příklad 4 ukazuje, jak přidat tyto atributy
.
Příklad 4. Rozměry výkresu
Atributy width a height jsou volitelné, po načtení obrázku prohlížeč automaticky nastaví jeho původní velikost. V zásadě se tyto atributy používají 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 během 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 dojít k přeformátování textu, 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 i dolů. Prohlížeč automaticky odstraní nadbytečné pixely, nebo naopak doplní chybějící, aby získal obrázek vhodné velikosti. Kvalita výsledného obrázku velmi závisí na jeho obsahu, v každém případě musíme pamatovat na to, že zvětšit obrázek bez ztráty detailů je možné pouze ve filmu.
Retina displeje se vyznačují vysokou hustotou pixelů a detailem obrazu, takže na nich normální obrázky vypadají trochu rozmazaně. Pro zlepšení kvality jsou obrázky zdvojnásobeny. 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 některý z těchto atributů není zadán, prohlížeč automaticky nahradí požadovanou hodnotu na základě poměru stran obrázku.
Vzhledem k tomu, že nezávisle dosazujeme šířku a výšku obrázku, můžeme záměrně zkreslit jeho proporce vertikálním nebo horizontálním roztažením obrázku.
Kromě pixelů je přípustné používat jako rozměry i procentuální zápis. V tomto případě je šířka nastavena relativně k nadřazený prvek.
V takových případech jsou potíže s výškou, protože výška obrázku v procentech se bere v úvahu pouze tehdy, když je explicitně definována výška jeho rodiče. Není-li výška nadřazeného prvku nijak specifikována, pak je položka jako height="100%" ignorována.