Existujú stovky obrazových formátov, no len niektoré z nich podporujú webové prehliadače. V tomto článku popíšeme rôzne formáty grafických súborov, ktoré sú dostupné webovým dizajnérom a v akom prípade by sa mali použiť.
Formáty grafických súborov, ktoré sú podporované najpopulárnejšími webovými prehliadačmi, 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ôznych stupňoch priehľadnosti od pevného stavu až po úplne priehľadný.
- Kompresia - táto vlastnosť umožňuje uložiť obrázok vo veľkom množstve menší súbor pomocou matematických algoritmov na zaobchádzanie so skupinou pixelov ako s jedným prvkom.
- Weave - umožňuje načítať obrázok najskôr na nepárne a potom na párne riadky. To umožňuje návštevníkovi vidieť obrázok skôr.
- Animácia – vytvára dojem pohybu prostredníctvom série po sebe idúcich záberov. Animovaný GIF nevyžaduje doplnok prehliadača a môže fungovať takmer na všetkých zariadeniach.
- Progresívne načítanie je podobné tkaniu v tom, že spočiatku načíta iba časť obrazu, ale nie na základe striedajúcich sa čiar.
GIF bol založený v roku 1980 a adoptovaný webovými dizajnérmi na začiatku 90. rokov ako hlavný grafický formát pre webové stránky. Súbory GIF používajú kompresný algoritmus, vďaka ktorému je veľkosť súboru malá rýchle načítanie. GIF je obmedzený na 256 farieb (8 bitov), podporuje priehľadnosť a prekladanú grafiku. Pomocou tohto formátu je tiež možné vytvárať animovanú grafiku. Všetky prehliadače dokážu bez problémov zobraziť súbory GIF.
Výhody GIF:
- Najviac podporovaný grafický formát
- Diagramy vyzerajú lepšie v tomto formáte
- Podpora transparentnosti
Súbory sú komprimované, ale podporujú „skutočné farby“ (24 bitov) a sú preferovaným formátom pre fotografie, kde je kvalita veľmi dôležitá. JPEG podporuje progresívny formát, ktorý vám umožňuje takmer okamžite vidieť obrázok, ktorý sa po dokončení sťahovania zlepší v kvalite.
Na rozdiel od súborov GIF môžu weboví dizajnéri spravovať komprimované súbory JPEG, čo umožňuje rôzne úrovne kvality obrazu a veľkosti súborov.
Výhody JPEG:
- Vyššia kompresia znamená vyššiu rýchlosť sťahovania.
- Vytvára vynikajúcu kvalitu fotografií a zložitých kresieb.
- Podpora pre 24-bitové farby.
PNG je relatívne nedávny formát, ktorý bol predstavený ako alternatíva pre súbory GIF. PNG podporuje až 24 bitové farby, priehľadnosť, väzbu 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 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 webovej grafiky je bitová mapa alebo vzor, ktorý pozostáva z mriežky farebných pixelov. Ilustrácie musia byť vytvorené 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 napr Adobe Illustrator alebo CorelDRAW. Vektorová grafika musí byť prevedená do akéhokoľvek formátu GIF, JPEG alebo PNG, aby sa dala použiť na webových stránkach.
Aký formát by sa mal použiť?
Webový dizajnér si môže vybrať formát GIF alebo JPEG pre väčšinu použití. Keďže však súbory GIF majú tendenciu byť malé v porovnaní s veľkosťou súborov JPEG, väčšina webových dizajnérov použije formát GIF pre pozadie, rámčeky, rámy a akúkoľvek inú grafiku, ktorá vyzerá skvele s 8-bitovými farbami.
Väčšina dizajnérov si vyberie formát JPEG pre fotografie a ilustrácie, kde kompresia neohrozuje vizuálnu kvalitu obrázka.
Jedna značka sa používa na vloženie obrázka do textu webovej stránky. (Tabuľka P 1). Atribúty tohto tagu nastavujú všetky parametre obrázku umiestneného na stránke. Povinný je atribút SRC, ktorý udáva adresu a názov grafického súboru. Ak atribút SRC nie je nastavený, zobrazí sa iba ikona prázdneho obrázka.
Štruktúra značky s atribútom SRC vyzerá takto:
.
Ak sa grafický súbor s názvom Institute nachádza v rovnakom priečinku ako webová stránka, na jeho umiestnenie by ste mali napísať:
.
Názov súboru Format
Ak chcete umiestniť grafický súbor s názvom MINSK, ktorý sa nachádza na adrese D:\Collection\Cities\MINSK.GIF, napíšte .
S visačkou webová stránka je hostiteľom grafického súboru umiestneného na inom počítači na internete.
Na vytvorenie webovej stránky s fotografiou nášho ústavu, ktorá je znázornená na obr. 4.1, musíte zadať nasledujúci HTML kód:
Náš inštitút
Ryža. 4.1. Webová stránka s fotografiou ústavu
Vo vyššie uvedenom príklade je výška fotografie (HEIGHT) 200 pixelov a šírka (WIDTH) je 300 pixelov. Na umiestnenie fotografie sa vytvorí odsek so zarovnaním na stred.
vodorovné čiary
Umiestnenie vodorovných čiar na webovú stránku sa vykonáva pomocou jedného tagu
. Atribúty SIZE, WIDTH, COLOR a ALIGN menia hrúbku, šírku, farbu a zarovnanie čiar.
Zvážte niekoľko príkladov vysvetľujúcich umiestnenie vodorovných čiar:
1.
- horizontálna čiara celá strana s hrúbkou 2 pixely.
2.
WIDTH = "200" ALIGN="RIGHT"> – vodorovná zelená čiara hrubá 15 pixelov, šírka 200 pixelov, zarovnaná doprava.
3.
- vodorovná čiara modrej farby na celej strane s hrúbkou 25 pixelov.
4.
WIDTH = "300" ALIGN = "LEFT"> – červená vodorovná čiara hrubá 20 pixelov, šírka 300 pixelov, zarovnaná doľava.
Čiarové mapovanie pre štyri zaznamenané príklady je znázornené na obr. 4.2.
Ryža. 4.2. Čiary na webovej stránke
TABUĽKY
Vytváranie tabuliek
Tabuľka je vytvorená pomocou spárovaný štítok
v HTML kóde.
Každá tabuľka sa skladá z riadkov a riadky sa skladajú z buniek. Nasledujúce značky sa používajú na vytváranie riadkov a buniek tabuľky:
Tieto značky sú napísané vo vnútri párovej značky
Tabuľka je tvorená riadok po riadku - najprv je určený jeden riadok a je v ňom uvedený požadovaný počet buniek, potom druhý riadok atď.
Aby ste získali tabuľku zobrazenú na obr. 5.1, musíte zadať nasledujúci HTML kód:
| Autá | cena | Ford | 5000 | Golf | 6000 |
|---|
potom bude hrúbka vonkajšieho okraja 6 pixelov. Aby sa okraje tabuľky nezobrazovali, je potrebné atribútu BORDER priradiť hodnotu rovnajúcu sa 0, alebo tento atribút jednoducho vynechať.
Ako už bolo spomenuté, HTML je dnes základom pre písanie akejkoľvek webovej stránky World Wide Web. O pomocou CSS generovanie kódu pre jazyk HTML radikálne mení. Môže sa rozlúčiť s prestavovaním nemotorných HTML tagy len získať jedno alebo druhé vizuálne efekty. O určitých značkách alebo atribútoch HTML, ako je napríklad zastaraná značka...
Domov
Objednajte si webovú stránku a podnikajte!
Túto frázu možno počuť a vidieť na mnohých stránkach a nie je to márne!
webové stránky — je tvárou spoločnosti. A je to najmodernejší a najefektívnejší komunikačný kanál s potenciálnym spotrebiteľom. Iba možnosti internetovej stránky vám umožňujú plne využiť všetky spôsoby, ako odovzdať používateľovi informačnú správu. Textové, zvukové a obrazové informácie možno odosielať v rámci jednej stránky, aby sa s nimi spotrebiteľ oboznámil.
Používaním softvér stránky, môžete prijímať platby, telefonovať, udržiavať databázy, odosielať a prijímať faxy, vymieňať si SMS správy a robiť veľa iných vecí. Moderná webová stránka je informačným centrom nielen pre každú firmu, ale aj pre každého používateľa internetu.
A to je obojstranne výhodný spôsob efektívnej a zároveň jednoduchej a vizuálnej prezentácie vašich nápadov alebo vývoja čo najširšiemu publiku. A dnes sú webové dokumenty napísané v hypertextovom značkovacom jazyku HTML naďalej hlavnou formou reprezentácie údajov vo webovom prostredí.
Hlavné výhody HTML sú:
- jednoduchosť, ktorá vám umožní naučiť sa HTML v čo najkratšom čase.
- schopnosť vytvárať si vlastné webové stránky
- a HTML funguje úplne rovnako na všetkých platformách, ktoré dnes existujú, nie je potrebné kupovať ďalší hardvér. A stačí použiť akékoľvek dostupné textový editor, ako je napríklad Poznámkový blok.
Na tejto stránke som sa pokúsil podrobne opísať celý proces tvorby vlastnej webovej stránky, a to zverejnenie hotového projektu na internete s cieľom poskytnúť k nemu prístup všetkým používateľom.
Dúfam, že mnohé z mojich článkov budú veľmi užitočné, pretože sám nie som programátor, ale táto práca ma veľmi inšpiruje.
Tento tutoriál sa zaoberá tým, ako ozdobiť webovú stránku pridaním grafické obrázky. Zoznámime sa s najbežnejšími formátmi obrázkov, zistíme, ktorý tag sa používa na pridávanie obrázkov na stránku, poradíme si s alternatívnymi popiskami a zarovnávaním textu a grafiky. Zoznámime sa tiež s hlavnými atribútmi obrázkov a naučíme sa, ako upraviť šírku a výšku obrázka. Ďalej niekoľko slov o používaní obrázkov ako odkazov a o tom, čo sú miniatúry obrázkov. Na záver uvádzame niekoľko všeobecných tipov na používanie grafiky na webovej stránke.
Pridávanie obrázkov na webovú stránku
Ak webová stránka neobsahuje nič iné ako textové informácie, môže to niekomu pripadať zaujímavé, vďaka informáciám, ktoré sú na ňom uvedené, ale je nepravdepodobné, že by to niekto nazval atraktívnym. Pridávanie obrázkov na webovú stránku je veľmi jednoduché. Pridanie grafiky, ktorá môže dať stránke profesionálny vzhľad, si vyžaduje určité znalosti. Čo je v skutočnosti predmetom dnešnej lekcie.
Dva najpoužívanejšie obrazové formáty na internete sú GIF a JPEG. Vyvinutý a pomenovaný skupinou JPEG (Joint Photographic Experts Group) sa vo všeobecnosti používa na ukladanie obrázkov s plynulými prechodmi farieb, ako sú fotografie.
Takmer všetky ostatné grafické prvky sú uložené vo formáte GIF (Graphics Interchange Format), teda vo formáte grafickej výmeny údajov. V súčasnosti existuje ďalší nový grafický formát, ktorý si získava na popularite: PNG (Portable Network Graphics). sieťová grafika). Očakáva sa, že časom nahradí formát GIF. Neponáhľajte sa však s opätovným ukladaním všetkých grafických súborov v tomto formáte, hoci ho stále nepodporujú všetky prehliadače.
Všetky obrázky sa pridávajú na webovú stránku pomocou rovnakej značky, ktorá sa nazýva značka zdroja obrázka 
. Pravdepodobne už viete určiť, čo tento záznam pozostáva zo skutočného tagu , jeho atribút (scr) a hodnotu tohto atribútu (location). Keďže sa však vyžaduje použitie atribútu scr, je vhodnejšie odkazovať na tento záznam ako na jednu generickú značku. Pravdepodobne ste si tiež všimli, že pre značku zdroja obrázka neexistuje žiadna zodpovedajúca koncová značka. Toto je samostatná samostatná značka, takže na jej koniec nezabudnite pridať koncovú lomku:
.
#1058;D XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1/transitional.dtd"> Prvé obrázky e> Táto grafika bola pridaná na moju prvú webovú stránku. p > 
Pridávanie alternatívnych štítkov
Pri surfovaní po internete ste si už určite neraz všimli rôzne nápisy, ktoré sa zobrazujú pri prejdení kurzorom myši nad nejaký grafický prvok webovej stránky. Tieto nápisy zvyčajne komunikujú niektoré Ďalšie informácie o samotnom obrázku alebo o oblasti stránky, ktorú zaberá.
Nasledujúci príklad kódu HTML ukazuje, ako sa atribút alt pridáva do značky . Podobne ako atribút src, aj atribút alt informuje webový prehliadač o niektorých dodatočných informáciách o obrázku a môže sa tiež vždy použiť v spojení so značkou.
.
Atribút alt definuje alternatívny text pre grafiku pridanú na webovú stránku. Tento text sa nazýva alternatívny text, pretože môže byť zobrazený na obrazovke ako alternatíva k samotnému obrázku. Atribút alt má ešte jeden veľmi dôležitý účel. Mnoho internetových návštevníkov, ktorí používajú prístupové kanály s nízkou rýchlosťou prenosu dát, môže prikázať svojim prehliadačom, aby nesťahovali ani nezobrazovali grafické informácie. To im umožňuje urýchliť načítanie webových stránok na ich počítačoch.
Pamätajte tiež, že nie všetky prehliadače dokážu vo svojich oknách zobraziť grafiku. Napríklad prehliadač Lynx túto funkciu vôbec nepodporuje. Atribút alt teda umožňuje webdizajnérovi mať istotu, že ak návštevník jeho webovej stránky neuvidí na svojej obrazovke obrázok, bude si môcť aspoň prečítať textovú informáciu pridanú k tomuto obrázku.
Aj keď atribút alt môže byť definovaný pre každú značku , dávajte pozor, aby ste k niektorým grafickým prvkom nepriradili nevhodné textové správy. Napríklad nemá zmysel pridávať alternatívne textové štítky rôzne prvky vonkajší dizajn internetové stránky. Aby ste predišli takýmto chybám, môžete nastaviť atribút alt takýchto prvkov na prázdnu hodnotu (alt=” ”). Ak nenastavíte žiadne ďalšie hodnoty atribútov, prehliadač vykreslí obrázok v pôvodnej veľkosti, pričom zarovná horný okraj obrázka s horným okrajom susedného textového reťazca. Obe tieto nastavenia môžete zmeniť pomocou značiek šablóny štýlov.
Atribúty obrázka
Pre Tag K dispozícii sú atribúty, ktoré vám umožňujú zmeniť veľkosť obrázka. Niektoré z týchto atribútov sú uvedené nižšie.
výška- Určené v pixeloch alebo percentách - Určuje výšku obrázka
šírka— Určené v pixeloch alebo percentách — Určuje šírku obrázka.
Nastavenie výšky a šírky obrazu
Rozmery obrázka umiestneného na webovej stránke je možné určiť pomocou atribútov výška a šírka. 3hodnoty týchto atribútov sú nastavené buď ako pevné množstvá pixelov alebo v percentách vzhľadom na rozmery stránky. Pozrite si HTML kód nižšie. V prvých veľkostiach značiek pôvodný obrázok, ktoré ste už videli na predchádzajúcich obrázkoch tohto návodu, sú nastavené na 60 pixelov vertikálne a 60 pixelov horizontálne. V druhej značke je šírka rovnakého obrázka nastavená na 6 % šírky stránky a výška na 10 % výšky stránky. Obrázok ukazuje, ako oba tieto obrázky vyzerajú v okne prehliadača.
Pri zobrazovaní obrázka vo svojom okne prehliadač spracováva rovnako dobre pixelové aj percentuálne hodnoty. Nezabúdajte však, že počítače návštevníkov vašej webovej stránky môžu byť nastavené na iné rozlíšenie obrazovky, než aké máte nastavené pre váš monitor. Čo z toho vyplýva? Napríklad rozlíšenie monitora je nastavené na 800 x 600. V predchádzajúcom príklade bola grafika pridaná na webovú stránku nastavená na šírku 6 % šírky stránky, čo by pri tomto rozlíšení bolo 48 pixelov. Ak si rovnaký obrázok prezeráte na monitore s rozlíšením 1024x800, zadaných 6% šírky stránky už bude zodpovedať šírke 61 pixelov.
Pri zmene veľkosti obrázka nezabudnite nastaviť obe hodnoty tak, aby zodpovedali jeho výške a šírke. Ak zmeníte iba jednu z týchto hodnôt, samotný obraz sa na obrazovke roztiahne vertikálne alebo horizontálne. Alternatívna možnosť spočíva v úprave veľkosti obrázka pomocou grafického editora.
Môžete vytvoriť ilúziu rýchlejšieho načítania obrázkov. Bez ohľadu na to, či sa veľkosť obrázka zmení alebo nie, vždy zadajte hodnoty atribútov výška a šírka, pretože prehliadaču povedia dôležité informácie o tom, koľko miesta by malo byť na stránke vyhradené pre daný obrázok. V takom prípade bude prehliadač schopný označiť priestor potrebný pre obrázok a pokračovať v budovaní ďalších prvkov stránky bez toho, aby prestal načítavať samotný obrázok. Týmto spôsobom sa zdá, že sa stránka načítava rýchlejšie, pretože jej návštevníci nemusia čakať na úplné načítanie obrázka, aby konečne videli ďalšie informácie uvedené na stránke.
Ak naozaj chcete, aby obrázok zaberal určitý priestor po celej šírke stránky, použite percentá. V tomto prípade na obrazovke akéhokoľvek monitora bude obraz zaberať rovnakú časť stránky ako na vašej obrazovke. Ak chcete zachovať rozlíšenie samotného obrázka (jeho veľkosť v pixeloch) konštantné, použite hodnoty vyjadrené v pixeloch.
Zarovnanie textu a grafiky
Atribút align značky umožňuje zarovnať obrázok k pravému (pravá hodnota) alebo ľavému (ľavá hodnota) okraju textového reťazca. Príklady použitia tohto atribútu sú znázornené na obrázku.
Rovnaký atribút možno použiť aj na vertikálne zarovnanie obrázka (opäť vzhľadom na riadok textu). Môže nadobudnúť tri ďalšie hodnoty: hore, dole a v strede. Ak je atribút zarovnania nastavený na vrch, horná časť obrázka je zarovnaná s hornou časťou okolitého textu. Ak je atribút zarovnania nastavený na spodok, spodný okraj obrázka sa zarovná so spodným okrajom okolitého textu. Ak je atribút zarovnania nastavený na stred, stred obrázka sa zarovná na stred textového reťazca.
Používanie obrázkov ako odkazov
Obrázky sú dobré nielen na dizajn webovej stránky. Môžu byť úspešne použité ako hypertextové odkazy na iné dokumenty. V HTML je táto úloha jednoduchá, pretože obrázky sa konvertujú na hypertextové odkazy presne rovnakým spôsobom ako štítky. Ak to chcete urobiť, musíte tiež použiť značku a ohraničiť v nej prvok webovej stránky, ktorý by sa mal stať odkazom na iný dokument. Ak sa teda po kliknutí na nejaký obrázok má nasledovať hypertextový odkaz, tag musí byť uzavretý v tagu tohto obrázku.
V tomto prípade, keď návštevník webovej stránky umiestni kurzor myši na obrázok, vedľa kurzora sa zobrazí textová správa „Toto je môj autoportrét!“. Kliknutím na obrázok sa otvorí dokument DOC2.htm, na ktorý odkazuje hypertextový odkaz.
Miniatúry obrázkov
Ďalším bežným spôsobom využitia možnosti hypertextového prepojenia HTML je použitie jedného obrázka na prechod na iný. Načo to je? Faktom je, že často je veľkosť obrázkov, ktoré chcete zverejniť na webovej stránke, príliš veľká a nie je zaručené, že návštevníci budú mať trpezlivosť čakať, kým dokončia sťahovanie. V takýchto prípadoch sa vytvorí menšia kópia pôvodného obrázka, nazývaná miniatúra, ktorú prehliadač dokáže načítať oveľa rýchlejšie. Ak návštevníka obrázok zaujme a chce si stiahnuť jeho plnú kópiu, stačí mu kliknúť na túto miniatúru. Takto vyzerajú zodpovedajúce HTML kódy.
Ako vidíte, kliknutím na obrázok thumbnail.jpg sa otvorí ďalší súbor obrázka (obrázok.jpg). Textový reťazec, daný ako hodnota atribútu alt, informuje návštevníka o tom, ako otvoriť hlavný obrázok.
Tajomstvo úspešného používania obrázkov
Obrázky sú zaujímavé a príťažlivé, nesú veľa vizuálne informácie a veľmi ľahko sa pridávajú na webové stránky, ale stále existujú určité pravidlá, ktoré by ste mali dodržiavať, ak naozaj chcete vytvoriť stránku, ktorá sa stane populárnou medzi používateľmi internetu.
Čím väčšia je veľkosť súboru obrázka, tým dlhšie bude trvať jeho stiahnutie do počítača používateľa. Pretože väčšina používateľov internetu stále používa nízkonapäťové komunikačné kanály na prístup k sieti priepustnosť, veľkosť nahrávaných súborov má pre nich stále zásadný význam. Určite s tým počítajte a snažte sa umiestniť obrázky na svoje webové stránky čo najmenšie.
Dôležité sú nielen veľkosti jednotlivých obrázkov, ale aj celková veľkosť celého súboru HTML dokument. Čím viac obrázkov sa pridá na webovú stránku, aj keď sú malé, tým väčšia bude veľkosť súboru konečného dokumentu. Dokončiť Náhľad vaša stránka v rôzne prehliadače a odhadnite, ako dlho trvá každému prehliadaču, kým si ho stiahne.
Keďže atribút alt je taký dôležitý (pretože sa odporúča definovať ho pre každú značku , pri používaní buďte opatrní. Uistite sa, že obsah textovej správy sa vždy zhoduje so samotným obrázkom, inak môžu byť návštevníci vašej stránky zavádzaní. Rovnaká poznámka platí aj opačne: uistite sa, že obrázky zodpovedajú textovým informáciám prezentovaným na webovej stránke. Fotografia lietadla by bola vhodná na stránke leteckej dopravy, ale úplne nadbytočná na stránke s voľne žijúcimi zvieratami.
Na internete ich nájdete veľa zaujímavé obrázky a jednoducho ich uložiť do počítača. Mnohé z týchto obrázkov sú však chránené autorským právom. Ak na komerčnej stránke nájdete obrázok, ktorý sa vám páči, skontrolujte, či sa tam nenachádzajú upozornenia na autorské práva a či je obrázok k dispozícii na bezplatné použitie.
Ak obrázok zobrazený na webovej stránke nie je chránený autorským právom, môžete ho skopírovať do pamäte počítača. Ak to chcete urobiť, jednoducho kliknite na tento obrázok kliknite pravým tlačidlom myši kliknite a vyberte Uložiť obrázok ako z ponuky, ktorá sa otvorí. Po uložení obrázku do počítača ho môžete ďalej používať ako akúkoľvek inú kresbu.
Pridanie obrázka prebieha v dvoch fázach: najprv sa pripraví grafický súbor požadovaný formát a požadovanú veľkosť, potom sa súbor zobrazí na stránke pomocou prvku Pre webovú grafiku sú široko používané dva formáty – PNG a JPEG. Ich všestrannosť, všestrannosť, malý objem zdrojové súbory s dostatočnou kvalitou pre stránku im poslúžili dobre, v skutočnosti ich definovali ako štandard pre webové obrázky. Okrem nich sa na stránkach používajú formáty GIF a SVG. PNG-8 (Portable Network Graphics, prenosná sieťová grafika) je bezplatný formát vytvorený ako náhrada GIF, v ktorom na dlhú dobu boli použité proprietárne algoritmy.
.
Formáty súborov
Formát PNG-8
Zvláštnosti
- V obraze využíva 8-bitovú paletu (256 farieb), za čo dostal vo svojom názve číslo osem. V tomto prípade si môžete vybrať, koľko farieb sa uloží do súboru - od 2 do 256.
- Na rozdiel od GIF nezobrazuje animáciu.
Oblasť použitia
Formát PNG-24
PNG-24 je formát podobný PNG-8, ale používa 24-bitový farebný gamut. Podobne ako JPEG zachováva jas a odtieň farieb na fotografiách. Podobne ako GIF a PNG-8 zachováva detaily obrázka, ako sú čiarové grafiky, logá alebo ilustrácie.
Zvláštnosti
- Používa približne 16,7 milióna farieb na súbor, a preto sa tento formát používa pre plnofarebné obrázky.
- Podporuje viacúrovňovú transparentnosť, čo vám umožňuje vytvárať hladký prechod z priehľadnej oblasti obrázka do farebnej oblasti.
- Vďaka tomu, že použitý kompresný algoritmus zachováva všetky farby a pixely v obraze nezmenené, má PNG-24 v porovnaní s inými formátmi najväčšiu výslednú veľkosť grafického súboru.
Oblasť použitia
Fotografie, kresby obsahujúce priehľadné a priesvitné plochy, kresby s množstvom farieb a ostrými okrajmi obrázkov.
formát JPEG
JPEG (Joint Photographic Experts Group) je populárny formát obrazového súboru, ktorý sa bežne používa na vytváranie webových stránok a ukladanie fotografií. JPEG podporuje 24-bitové farby a zachováva jas a odtieň farieb na fotografiách nedotknutý. Tento formát nazývaná stratová kompresia, pretože algoritmus JPEG selektívne odmieta údaje. Metóda kompresie môže spôsobiť skreslenie obrazu, najmä ak obsahuje text, jemné detaily alebo ostré hrany. formát JPEG nepodporuje transparentnosť. Keď uložíte fotografiu v tomto formáte, priehľadné pixely sa vyplnia špecifikovanou farbou.
Zvláštnosti
- Počet farieb na obrázku je približne 16,7 milióna, čo je na úsporu dosť fotografická kvalita Snímky.
- Hlavnou charakteristikou formátu je „kvalita“, ktorá vám umožňuje kontrolovať konečnú veľkosť súboru. Kvalita sa meria od 0 do 100, čím vyššia hodnota, tým lepší je obraz, ale zvyšuje sa aj veľkosť súboru.
- Podporuje technológiu nazývanú progresívny JPEG, pri ktorej sa vo výreze zobrazí verzia obrázka s nízkym rozlíšením ešte pred úplným načítaním samotného obrázka.
Oblasť použitia
Používa sa hlavne na fotografie. Nie je veľmi vhodný pre kresby obsahujúce priehľadné oblasti, malé detaily alebo text.
vo formáte GIF
GIF (Graphics Interchange Format) je grafický formát súboru široko používaný na vytváranie animovaných obrázkov. GIF používa 8-bitové farby a efektívne komprimuje jednofarebné oblasti pri zachovaní detailov obrazu.
Zvláštnosti
- Počet farieb na obrázku môže byť od 2 do 256, ale môže to byť akákoľvek farba z 24-bitovej palety. Súbor GIF môže obsahovať priehľadné oblasti. Ak je použité iné pozadie ako biele, bude presvitať cez „diery“ v obraze.
- Podporuje zmenu obrázkov po jednotlivých snímkach, vďaka čomu je tento formát obľúbený na vytváranie jednoduchých animácií.
- Používa metódu bezstratovej kompresie
Oblasť použitia
Text, logá, ilustrácie s ostrými hranami, animovaná grafika, obrázky s priehľadnými plochami, bannery.
formát SVG
SVG (Scalable Vector Graphics) - vektorový formát, v ktorej sa obraz neskladá z pixelov, ale z objektov a kriviek. Z tohto dôvodu nie je vhodný pre rastrové fotografie pozostávajúce z bodiek, ale je výborný pre ilustrácie s výraznými obrysmi.
Zvláštnosti
- Obrázky vo formáte SVG je možné zmenšiť podľa potreby bez straty kvality obrazu.
- Veľkosť súboru je zvyčajne malá.
- Podporuje animáciu a interaktivitu.
Oblasť použitia
Text, logá, ilustrácie s ostrými okrajmi.
Pridanie obrázka
Element sa používa na pridanie obrázka na webovú stránku. , ktorého atribút src určuje adresu grafického súboru. Všeobecná syntax pridania obrázka je nasledovná.
Povinné sú atribúty src aj alt.
Atribút src nastavuje cestu ku grafickému súboru, na jeho určenie možno použiť absolútnu aj relatívnu adresu. Ďalej zvážte niekoľko rôzne cesty, ako určiť cestu k obrázku, aby ste ho umiestnili na webovú stránku. Ako príklad si vezmime súbor s názvom target.png , ktorý je uložený v priečinku images v koreňovom adresári lokality.
http://example.ru/images/target.png
Ak adresa začína protokolom (http:// alebo https://), ide o absolútnu adresu. Obrázok sa vždy načíta z zadanú adresu na internete, aj keď si webovú stránku uložíte do lokálneho počítača.
//example.ru/images/target.png
Toto je absolútna adresa obrázka bez špecifikácie protokolu. Prehliadač nezávisle nahradí požadovaný protokol, na ktorom stránka beží (http:// alebo https://). Upozorňujeme, že tieto typy adries nefungujú na miestnych webových stránkach, ale iba na internete pod kontrolou webového servera.
/images/target.png
Ak je na začiatku adresy lomka (/), znamená to, že priečinok s obrázkami sa nachádza v koreňovom adresári lokality. Jeden priečinok môže byť vnorený do druhého, takže cesta sa môže zväčšiť. Napríklad /assets/images/target.png znamená, že priečinok aktív sa nachádza v koreňovom adresári lokality, obsahuje priečinok s obrázkami, v ktorom sa nachádza súbor target.png.
../images/target.png
Dve lomky (../) označujú, že priečinok s obrázkami je v štruktúre priečinkov o jednu úroveň vyššie ako dokument HTML. Na obr. Obrázok 1 zobrazuje súbor source.html, do ktorého je potrebné vložiť obrázok target.png.
Ryža. 1. Umiestnenie súboru
images/target.png
Názov priečinka bez bodiek na začiatku adresy znamená, že HTML dokument a priečinok s obrázkom sú na rovnakej úrovni (obr. 2).
Ryža. 2. Umiestnenie súboru
target.png
Jediný názov súboru znamená, že obrázok a webová stránka sú umiestnené na rovnakom mieste (obrázok 3).
Ryža. 3. Umiestnenie súboru
Príklad 1 ukazuje niekoľko spôsobov, ako pridať obrázok na webovú stránku.
Príklad 1: Pridávanie obrázkov
Alternatívny text
Alternatívny text je dôležitou súčasťou obrázkov a je určený pre ľudí so zrakovým postihnutím, ktorí nevidia obrázky a prijímajú informácie zo stránky sluchom. Špeciálne čítačky obrazovky čítajú text z webu a namiesto obrázkov vyslovujú text napísaný v atribúte alt. V bežných prehliadačoch sa alternatívny obsah zobrazuje iba vtedy, keď sa na webovej stránke z nejakého dôvodu nezobrazujú obrázky.
Atribút alt by mal popisovať obsah obrázka a ak obrázok plní dekoratívnu funkciu a nemá žiadny zmysluplný význam, ponechajte alt prázdny (príklad 2).
Príklad 2: Použitie alt
Ak obrázky vyžadujú viditeľnú nápovedu, mali by ste použiť globálny atribút názvu, ktorý možno pridať do akéhokoľvek prvku, nielen do obrázkov. Keď umiestnite kurzor myši na obrázok, zobrazí sa text obsahujúci hodnotu atribútu title (príklad 3).
Príklad 3: Použitie názvu
Vzhľad popisku závisí od konkrétneho prehliadača a nemožno ho zmeniť. Na obr. 2 zobrazuje popis v prehliadači Firefox.
Ryža. 2. Typ popisku
Zmena veľkosti obrázka
Ak chcete zmeniť veľkosť obrázka prvku sú poskytnuté atribúty šírka (šírka) a výška (výška). Ako hodnota sa používajú pixely alebo percentá. Príklad 4 ukazuje, ako pridať tieto atribúty
.
Príklad 4. Rozmery výkresu
Atribúty šírka a výška sú voliteľné, po načítaní obrázka prehliadač automaticky nastaví jeho pôvodnú veľkosť. V zásade sa tieto atribúty používajú na nasledujúce účely:
- rezervovať miesto pre obrázok;
- zmenšiť veľkosť veľkých fotografií;
- zlepšiť kvalitu obrazu pre Retina displeje.
Ak sú rozmery obrázka špecifikované explicitne, prehliadač ich použije na zobrazenie prázdnej oblasti zodpovedajúcej obrázku počas načítavania dokumentu. V opačnom prípade prehliadač počká, kým sa obrázok úplne načíta, a potom zmení šírku a výšku obrázka. V tomto prípade môže dôjsť k preformátovaniu textu, pretože spočiatku nie je známa veľkosť obrázka a automaticky sa nastaví na malú.
Šírka a výška obrazu sa dá meniť hore aj dole. Prehliadač automaticky odstráni nadbytočné pixely, alebo naopak, doplní chýbajúce, aby získal obrázok vhodnej veľkosti. Kvalita výsledného obrázku do značnej miery závisí od jeho obsahu, v každom prípade musíme pamätať na to, že zväčšiť obrázok bez straty detailov je možné len vo filme.
Retina displeje majú vysokú hustotu pixelov a detailov obrazu, takže normálne obrázky vyzerajú trochu vyblednuté. Pre zlepšenie kvality sú obrázky zdvojnásobené. Ak napríklad webová stránka vyžaduje fotografiu so šírkou 400 pixelov, potom urobíme fotografiu so šírkou 800 pixelov, ale v hodnote atribútu width ponecháme šírku 400 pixelov.
Atribúty šírka a výška nemusia ísť spolu. Ak niektorý z týchto atribútov nie je zadaný, prehliadač automaticky nahradí požadovanú hodnotu na základe pomeru strán obrázka.
Vzhľadom na to, že nezávisle nahrádzame šírku a výšku obrazu, môžeme zámerne skresliť jeho proporcie roztiahnutím obrazu vertikálne alebo horizontálne.
Okrem pixelov možno ako veľkosti použiť aj percentá. V tomto prípade je šírka nastavená relatívne k nadradený prvok.
V takýchto prípadoch sú problémy s výškou, pretože výška obrázka v percentách sa berie do úvahy len vtedy, keď je explicitne definovaná výška jeho rodiča. Ak výška nadradeného prvku nie je žiadnym spôsobom špecifikovaná, potom sa položka typu height="100%" ignoruje.