.

Címke rendelkezik egy kötelező src attribútummal, amelynek értéke a kép abszolút vagy relatív elérési útja:

Címkéhez A következő attribútumok állnak rendelkezésre:

1. táblázat Címke attribútumok

Tulajdonság	Leírás, elfogadott érték
alt	Az alt attribútum alternatív szöveget ad a képhez. Megjelenik, ahol a kép megjelenik a betöltés előtt, vagy ha a grafika le van tiltva, és eszközleírásként is megjelenik, amikor az egeret a kép fölé viszi. Szintaxis: alt="képleírás" . !}
crosseredet	A crossorigin attribútum lehetővé teszi, hogy képeket töltsön be egy másik tartomány erőforrásaiból CORS-kérésekkel. A CORS-kérésekkel a vászonra betöltött képek újra felhasználhatók. Engedélyezett értékek: névtelen – A kereszteredetű kérelmek HTTP-fejléc használatával készülnek, és nem küldenek át hitelesítő adatokat. Ha a szerver nem ad hitelesítési adatokat annak a szervernek, amelyről a tartalmat kérik, a kép megsérül, és a használata korlátozott lesz. use-credentials — A kereszt-eredetű kérelmet hitelesítő adatok átadásával hajtják végre. Szintaxis: crossorigin="anonymous" .
magasság	A height attribútum adja meg a kép magasságát px-ben. Szintaxis: height="300" .
ismap	Az ismap attribútum azt jelzi, hogy a kép a szerveren található térképkép része (a térképkép egy kattintható területekkel rendelkező kép). Ha egy térképképre kattint, a koordináták URL-lekérdezési karakterláncként kerülnek elküldésre a szervernek. Az ismap attribútum csak akkor engedélyezett, ha az elem az elem leszármazottja érvényes href attribútummal. Szintaxis: ismap.
longdesc	Egy kiterjesztett képleíró URL, amely kiegészíti az alt attribútumot. Szintaxis: longdesc="http://www.example.com/description.txt" .
src	Az src attribútum adja meg a kép elérési útját. Szintaxis: src="virág.jpg" .
méretek	Beállítja a képméretet a megjelenítési beállításoktól függően. Csak akkor működik, ha az srcset attribútum meg van adva. Az attribútum értéke egy vagy több karakterlánc, vesszővel elválasztva.
srcset	Létrehoz egy listát a képernyőfelbontás alapján kiválasztott képforrásokról. Használható az src attribútummal együtt vagy helyett. Az attribútum értéke egy vagy több karakterlánc, vesszővel elválasztva.
használati térkép	A usemap attribútum a képet képtérképként határozza meg. Az értéknek a # szimbólummal kell kezdődnie. Az érték a címke nevének vagy id attribútumának értékéhez van társítva
szélesség	A width attribútum adja meg a kép szélességét px-ben. Szintaxis: width="500" .

1.1. Kép címe

A kép címe megadható teljes egészében (abszolút URL), például:
url (http://anysite.ru/images/anyphoto.png)

Vagy egy relatív útvonalon keresztül dokumentum vagy gyökérkönyvtár weboldal:
url(../images/anyphoto.png) - relatív elérési út a dokumentumból,
url(/images/anyphoto.png) - relatív elérési út a gyökérkönyvtárból.

Ez a következőképpen értelmezhető:
../ - azt jelenti, hogy egy szinttel feljebb, a gyökérkönyvtárba,
images/ - lépjen a képeket tartalmazó mappába,
anyphoto.png - egy képfájlra mutat.

1.2. Kép méretei

A képméretek beállítása nélkül a rajz a tényleges méretében jelenik meg az oldalon. A kép méreteit a szélesség és magasság attribútumok segítségével szerkesztheti. Ha csak az egyik attribútum van megadva, a második automatikusan kiszámításra kerül a kép arányainak megőrzése érdekében.

1.3. Grafikus fájlformátumok

JPEG formátum (Közös fotószakértői csoport). A JPEG képek ideálisak fényképekhez, és több millió különböző színt tartalmazhatnak. A képek jobban tömörítenek, mint a GIF-ek, de a szöveg és a nagyméretű egyszínű területek foltossá válhatnak.

GIF formátum (Grafikus csereformátum). Ideális olyan képek tömörítéséhez, amelyeken egyszínű területek találhatók, például logók. A GIF-ek lehetővé teszik, hogy az egyik színt átlátszóra állítsa, így a weboldal háttere átlátszóvá válik a kép egy részén. A GIF-ek egyszerű animációt is tartalmazhatnak. A GIF-képek mindössze 256 árnyalatot tartalmaznak, ami miatt a képek foltosnak és irreális színűnek tűnnek, mint a plakátok.

PNG formátum (Hordozható hálózati grafika). A GIF és JPEG formátumok legjobb tulajdonságait tartalmazza. 256 színt tartalmaz, és lehetővé teszi az egyik szín átlátszóvá tételét, miközben a képeket kisebb méretűre tömöríti, mint egy GIF fájl.

APNG formátum (Animált hordozható hálózati grafika). A PNG formátumon alapuló képformátum. Lehetővé teszi animációk tárolását, és támogatja az átláthatóságot is.

SVG formátum (Skálázható vektorgrafika). Az SVG rajz XML formátumban leírt geometriai alakzatok halmazából áll: vonal, ellipszis, sokszög stb. A statikus és animált grafika egyaránt támogatott. A függvénykészlet különféle átalakításokat, alfamaszkokat, szűrőeffektusokat és sablonhasználati lehetőséget tartalmaz. Az SVG képek minőségromlás nélkül átméretezhetők.

BMP formátum (Bittérképes kép). Ez egy tömörítetlen (eredeti) raszteres kép, amelynek sablonja egy pixelekből álló téglalap alakú rács. A bittérképes fájl fejlécből, palettából és grafikus adatokból áll. A fejléc információkat tárol a grafikus képről és a fájlról (pixelmélység, magasság, szélesség és színek száma). A paletta csak azokban a bittérképes fájlokban jelenik meg, amelyek palettaképeket (8 vagy kevesebb bitet) tartalmaznak, és legfeljebb 256 elemből állnak. A grafikus adatok magát a képet reprezentálják. A színmélység ebben a formátumban 1, 2, 4, 8, 16, 24, 32, 48 bit lehet pixelenként.

ICO formátum (Windows ikon). Fájl ikon tárolási formátum a Microsoft Windows rendszerben. Ezenkívül a Windows ikon ikonként használatos az internetes webhelyeken. Ez egy ilyen formátumú kép, amely a webhely címe vagy a könyvjelző mellett jelenik meg a böngészőben. Egy ICO fájl egy vagy több ikont tartalmaz, amelyek mérete és színe külön-külön beállítható. Az ikon mérete bármilyen méretű lehet, de a leggyakoribbak a négyzet alakú, 16, 32 és 48 pixeles oldalak.

2. Címke

Címke

A címkének elérhető egy name attribútuma, amely megadja a térkép nevét. A címke name attribútumának értéke

Elem

3. Címke

Címke csak egy aktív régiót ír le az ügyféloldali képtérkép részeként. Az elemnek nincs záró címkéje. Ha egy aktív terület átfedésben van egy másikkal, akkor a területek listájából az első hivatkozás kerül megvalósításra.

2. táblázat Címkeattribútumok

Tulajdonság	Rövid leírás
alt	Alternatív szöveget állít be az aktív térképterülethez.
koordináták	Meghatározza a terület helyzetét a képernyőn. A koordinátákat hosszegységben adjuk meg, és vesszővel választjuk el: Mert kör— a kör középpontjának és sugarának koordinátái; Mert téglalap— a bal felső és a jobb alsó sarok koordinátái; Mert poligon— a sokszög csúcsainak koordinátái a kívánt sorrendben, az ábra logikai kiegészítéséhez ajánlott az elsővel megegyező utolsó koordinátákat is feltüntetni.
Letöltés	Kiegészíti a href attribútumot, és közli a böngészővel, hogy az erőforrást abban a pillanatban kell betölteni, amikor a felhasználó rákattint a hivatkozásra, ahelyett, hogy például először meg kellene nyitnia (mint egy PDF-fájl). Egy attribútum nevének megadásával így nevet adunk a betöltött objektumnak. Egy attribútum használata az érték megadása nélkül megengedett.
href	Megadja a hivatkozás URL-jét. Abszolút vagy relatív linkcím is megadható.
hreflang	Meghatározza a társított webdokumentum nyelvét. Csak a href attribútummal együtt használatos. Az elfogadott értékek a nyelvkódot jelző betűpárból álló rövidítés.
média	Meghatározza, hogy a fájl milyen típusú eszközökre lesz optimalizálva. Az érték bármilyen médialekérdezés lehet.
rel	Kibővíti a href attribútumot az aktuális és a kapcsolódó dokumentum közötti kapcsolatra vonatkozó információkkal. Elfogadott értékek: alternatív - hivatkozás a dokumentum alternatív változatára (például az oldal nyomtatott formájára, fordítására vagy tükörképére). szerző – link a dokumentum szerzőjére. könyvjelző – A könyvjelzőkhöz használt állandó URL. help - link a segítséghez. licenc – link a webdokumentum szerzői jogi információira. következő/előző – az egyes URL-ek közötti kapcsolatot jelzi. Ennek a jelölésnek köszönhetően a Google meg tudja állapítani, hogy ezeknek az oldalaknak a tartalma logikai sorrendben kapcsolódik-e egymáshoz. nofollow - megakadályozza, hogy a keresőmotor kövesse az adott oldalon vagy egy adott hivatkozáson található hivatkozásokat. noreferrer - azt jelzi, hogy egy hivatkozás követésekor a böngészőnek nem szabad HTTP kérés fejlécet (Referrer) küldenie, amely információt rögzít arról, hogy az oldal látogatója melyik oldalról érkezett. prefetch - azt jelzi, hogy a céldokumentumot gyorsítótárban kell tárolni, pl. A háttérben működő böngésző letölti az oldal tartalmát a gyorsítótárába. keresés – Azt jelzi, hogy a céldokumentum keresőeszközt tartalmaz. címke – az aktuális dokumentum kulcsszavait adja meg.
alak	Megadja az aktív terület alakját a térképen és koordinátáit. A következő értékeket veheti fel: rect — téglalap alakú aktív terület; kör — kör alakú aktív terület; poli — sokszög alakú aktív terület; alapértelmezett - az aktív terület a kép teljes területét elfoglalja.
cél	Meghatározza, hogy a hivatkozásra kattintva hova kerüljön letöltésre a dokumentum. A következő értékeket fogadja el: _self — az oldal betöltődik az aktuális ablakba; _blank — az oldal új böngészőablakban nyílik meg; _parent — az oldal betöltődik a szülőkeretbe; _top - az oldal a teljes böngészőablakban töltődik be.
típus	Megadja a hivatkozásfájlok MIME típusát, pl. fájlkiterjesztés.

4. Példa képtérkép készítésére

1) Jelölje be az eredeti képet a kívánt alakú aktív területekre. A területek koordinátái egy fotófeldolgozó programmal kiszámíthatók, pl. Adobe Photoshop vagy Festék.

Rizs. 1. Példa képjelölésre térkép létrehozásához

2) Állítsa be a kártya nevét úgy, hogy hozzáadja a címkéhez

Jpg" alt="flowers_foto" width="680" height="383" usemap="#flowers"> !}
Rizs. 2. Példa képtérkép létrehozására, amikor az egérkurzorral egy virágra kattint, egy leírást tartalmazó oldalra lép.

Ez az oktatóanyag bemutatja, hogyan lehet egy weboldalt grafika hozzáadásával díszíteni. Megismerkedünk a legelterjedtebb képformátumokkal, megtudjuk, milyen címkével illesztjük a képeket az oldalra, megértjük az alternatív címkéket, a szöveg és a grafika igazítását. Megismerkedünk a képek alapvető attribútumaival és megtanuljuk a kép szélességének és magasságának beállítását. Ezután néhány szót a képek hivatkozásként való használatáról, és arról, hogy mi a képek miniatűrje. Végezetül itt van néhány általános tipp a grafikák weboldalon való használatához.

Képek hozzáadása egy weboldalhoz
Ha egy weboldal szöveges információn kívül mást nem tartalmaz, lehet, hogy valaki érdekesnek találja a rajta szereplő információk miatt, de nem valószínű, hogy valaki vonzónak merné nevezni. Képek hozzáadása egy weboldalhoz nagyon egyszerű. Az oldal professzionális megjelenését biztosító grafikák hozzáadása bizonyos ismereteket igényel. Erről szól a mai lecke.

Az interneten a két leggyakrabban használt képformátum a GIF és a JPEG. A JPEG (Joint Photographic Experts Group) csoport által kifejlesztett és elnevezett formátumot jellemzően egyenletes színátmenetű képek, például fényképek mentésére használják.

Szinte az összes többi grafikai elem GIF formátumban (Graphics Interchange Format) van mentve - ez egy grafikus csereformátum. Jelenleg van egy másik új grafikai formátum, amely egyre népszerűbb: a PNG (Portable Network Graphics). Várhatóan végül felváltja a GIF formátumot. Azonban ne rohanjon el menteni az összes grafikus fájlt ebben a formátumban, mivel még nem támogatja minden böngésző.

Minden kép ugyanazzal a címkével, az úgynevezett képforrás címkével kerül hozzáadásra a weboldalhoz . Valószínűleg most már maga is megállapíthatja, hogy ez a bejegyzés a tényleges címkéből áll , attribútuma (scr) és ennek az attribútumnak az értéke (location). Mivel azonban az scr attribútum használata kötelező, kényelmesebb, ha erről a bejegyzésről egyetlen általános címkeként beszélünk. Azt is észrevehette, hogy a képforrás címkéjének nincs megfelelő záró címkéje. Ez egy különálló, önálló címke, ezért ne felejtsen el beírni egy perjelet a végére: .

#1058;D XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DТD/xhtml1/transitional.dtd"> Első képek e> Ezt a képet az első weboldalamra adtuk.r >

Alternatív feliratok hozzáadása
Az interneten való utazás során valószínűleg többször is észrevett már különféle feliratokat, amelyek akkor jelennek meg, amikor az egeret a weboldal valamely grafikus eleme fölé viszi. Ezek a címkék általában további információkat nyújtanak magáról a képről vagy az oldal azon területéről, amelyet elfoglal.

Az alábbi példa HTML-kód bemutatja, hogyan kerül az alt attribútum a címkébe . Az src attribútumhoz hasonlóan az alt attribútum további információkat közöl a webböngészővel a képről, és mindig használható egy címkével együtt .

Az alt attribútum alternatív szöveget ad meg egy weboldalhoz hozzáadott grafikus elemhez. Ezt a szöveget alternatív szövegnek nevezik, mert megjelenhet a képernyőn magának a képnek az alternatívájaként. Az alt attribútumnak van egy másik nagyon fontos célja is. Sok internetes látogató, aki alacsony adatátviteli sebességet használ, utasíthatja böngészőjét, hogy ne töltsön be vagy jelenítsen meg grafikus információkat. Ez lehetővé teszi számukra, hogy gyorsabban töltsék be a weboldalakat a számítógépükre.

Ne feledje továbbá, hogy nem minden böngésző képes grafikát megjeleníteni az ablakaiban. Például a Lynx böngésző egyáltalán nem támogatja ezt a funkciót. Így az alt attribútum lehetővé teszi a webdesigner számára, hogy megbizonyosodjon arról, hogy ha a weboldalának látogatója nem lát képet a képernyőjén, akkor legalább láthatja a képhez hozzáadott szöveges információkat.

Bár az alt attribútum minden címkéhez definiálható , ügyeljen arra, hogy egyes grafikai elemekhez ne rendeljen nem megfelelő szöveges üzeneteket. Például nincs értelme alternatív szöveges címkéket hozzáadni egy weboldal megjelenésének különböző elemeihez. Az ilyen hibák elkerülése érdekében az ilyen elemek alt attribútuma üres értékhez (alt="") rendelhető. Ha nem ad meg más attribútumértékeket, a böngésző az eredeti méretben jeleníti meg a képet, és a kép felső szélét a szomszédos szöveglánc felső széléhez igazítja. Mindkét beállítás módosítható stíluslapcímkék használatával.

Képtulajdonságok
Címkéhez Olyan attribútumok állnak rendelkezésre, amelyek lehetővé teszik a kép átméretezését. Ezen attribútumok közül néhányat az alábbiakban sorolunk fel.
magasság— Képpontban vagy százalékban megadva — Meghatározza a kép magasságát
szélesség— Képpontban vagy százalékban megadva — Meghatározza a kép szélességét.

A kép magasságának és szélességének beállítása
A weboldalon elhelyezett kép méreteit a magasság és szélesség attribútumokkal lehet megadni. Ezen attribútumok értéke vagy rögzített pixelszámként, vagy az oldalmérethez viszonyított százalékban van megadva. Vessen egy pillantást az alábbi HTML-kódra. Az első címkében az eredeti kép méretei, amelyeket a lecke előző rajzain már láthattunk, függőlegesen 60 képpontra, vízszintesen pedig 60 képpontra vannak beállítva. A második címkében ugyanannak a képnek a szélessége az oldal szélességének 6%-a, magassága pedig az oldal magasságának 10%-a. A képen látható, hogyan néz ki mindkét kép a böngészőablakban.

Amikor egy képet megjelenít az ablakában, a böngésző egyformán jól tudja feldolgozni a pixelben és százalékban megadott értékeket. Ügyeljen azonban arra, hogy a weboldal látogatóinak számítógépe a telepítetttől eltérő képernyőfelbontásra állítható a monitorodhoz. Mi következik ebből? Például a monitor felbontása 800x600-ra van állítva. Az előző példában a weboldalhoz hozzáadott grafika szélessége az oldal szélességének 6%-ára volt beállítva, ami ennél a felbontásnál 48 pixel lenne. Ha ugyanazt a képet 1024x800-as felbontású monitoron tekinti meg, az oldalszélesség megadott 6%-a 61 pixeles szélességnek felel meg.

Egy kép átméretezésekor ügyeljen arra, hogy mindkét értéket a magasságának és szélességének megfelelően állítsa be. Ha ezen értékek közül csak az egyiket módosítja, maga a kép függőlegesen vagy vízszintesen megfeszítve jelenik meg a képernyőn. Egy másik lehetőség a képméret beállítása grafikus szerkesztővel.

Azt az illúziót keltheti, hogy a kép gyorsabban töltődik be. Függetlenül attól, hogy a kép átméretezett-e vagy sem, mindig adja meg a magasság és szélesség attribútumok értékeit, mivel ezek fontos információkat közölnek a böngészővel arról, hogy mennyi helyet kell lefoglalni az oldalon a kép elhelyezéséhez. Ebben az esetben a böngésző kijelölheti a képhez szükséges helyet, és folytathatja az oldal többi elemének építését anélkül, hogy leállítaná magának a képnek a betöltését. Ily módon úgy tűnik, hogy az oldal gyorsabban töltődik be, mivel a látogatóknak nem kell megvárniuk a kép teljes betöltődését, mielőtt végre más információkat is láthatnak az oldalon.

Ha valóban arra van szüksége, hogy a kép meghatározott mennyiségű helyet foglaljon el az oldal szélességében, használjon százalékos értékeket. Ebben az esetben bármely monitor képernyőjén a kép az oldal ugyanazt a részét fogja elfoglalni, mint az Ön képernyőjén. Ha azt szeretné, hogy magának a képnek a felbontása (mérete pixelben) állandó maradjon, használja a pixelben kifejezett értékeket.

Szöveg és grafika összehangolása
Címke igazítási attribútum lehetővé teszi a kép igazítását a szövegsor jobb (jobb érték) vagy bal (bal érték) széléhez. Az attribútum használatának példái az ábrán láthatók.

Ugyanez az attribútum használható egy kép függőleges igazítására is (ismét a szöveghez képest). Három másik értéket vehet fel: felső, alsó és középső. Ha az igazítás attribútum a tetejére van állítva, a kép felső széle a környező szöveg felső széléhez igazodik. Ha az igazítás attribútum alsó értékre van állítva, a kép alsó széle a környező szöveg alsó széléhez igazodik. Ha az igazítás attribútum középre van állítva, a kép közepe a szövegsor közepéhez igazodik.

Képek használata linkként
A képek nem csak weboldaltervezésre alkalmasak. Sikeresen használhatók hiperhivatkozásként más dokumentumokhoz. A HTML könnyen megoldja ezt a problémát, mert a képek pontosan ugyanúgy hiperhivatkozásokká alakulnak, mint a feliratok. Ehhez egy címkét is fel kell helyeznie, amely egy weboldal elemet tartalmaz, amely egy másik dokumentumra mutató hivatkozás lesz. Így, ha egy hiperhivatkozást kell követni egy képre kattintás után, a címkének tartalmaznia kell az adott kép címkéjét.

a>

Ebben az esetben, miután egy weboldal látogatója a kép fölé viszi az egeret, a kurzor mellett megjelenik az „Ez az én önarcképem!” szöveges üzenet. A képre kattintva megnyílik a DOC2.htm dokumentum, amelyre a hiperhivatkozás mutat.

Miniatűr képek
A HTML hiperhivatkozások létrehozására szolgáló képességének egy másik gyakori módja az, hogy egyes képeket másokhoz kapcsolnak. Miért van erre szükség? Az a tény, hogy gyakran túl nagy a weboldalon közzétenni kívánt képek mérete, és nincs garancia arra, hogy a látogatóknak lesz türelmük megvárni a betöltés befejezését. Ilyenkor az eredeti képről egy kisebb másolat készül, úgynevezett miniatűr, amit a böngésző sokkal gyorsabban tud betölteni. Ha a látogatót érdekli a kép, és le akarja tölteni annak teljes példányát, csak erre a miniatűrre kell kattintania. Így néznek ki a megfelelő HTML-kódok.

a>

Mint látható, a thumbnail.jpg képre kattintva egy másik képfájl (image.jpg) nyílik meg. Az alt attribútum értékeként megadott szöveges karakterlánc megmondja a látogatónak, hogyan nyissa meg a fő képet.

A képek sikeres használatának titkai
A képek érdekesek és tetszetősek, sok vizuális információt adnak, és nagyon könnyen felvehetők a weboldalakra, de akkor is tartsa be az alábbi szabályokat, ha valóban olyan oldalt szeretne létrehozni, amely népszerűvé válik az internetezők körében.

Minél nagyobb a képfájl mérete, annál tovább tart a letöltés a felhasználó számítógépére. Mivel a legtöbb internetes látogató továbbra is alacsony sávszélességű kapcsolatot használ az internet eléréséhez, a fájlok letöltési mérete továbbra is kritikus fontosságú számukra. Ezt mindenképpen vegye figyelembe, és próbáljon meg minél kisebb képeket elhelyezni weboldalain.

Nemcsak az egyes képek fájlmérete fontos, hanem a teljes HTML-dokumentum teljes fájlmérete is. Minél több képet ad hozzá egy weboldalhoz, akár kicsiket is, annál nagyobb lesz a végleges dokumentum fájlmérete. Tekintse meg az oldal előnézetét különböző böngészőkben, és becsülje meg, mennyi ideig tart az egyes böngészők betöltése.

Mivel az alt attribútum nagyon fontos (ajánlott minden címkéhez megadni , legyen óvatos használat közben. Ügyeljen arra, hogy a szöveges üzenet tartalma mindig megegyezzen magával a képpel, ellenkező esetben félrevezethetik az oldal látogatóit. Ugyanez fordítva is érvényes: győződjön meg arról, hogy a képek megegyeznek a weboldalon megjelenő szöveges információkkal. Repülőgépről készült fénykép megfelelő lenne egy légi utazással foglalkozó weboldalon, de teljesen helytelen a vadon élő állatokkal foglalkozó weboldalon.

Sok érdekes képet találhat az interneten, és könnyen mentheti őket számítógépére. Sok ilyen kép azonban szerzői jogvédelem alatt áll. Ha egy kereskedelmi oldalon talál egy Önnek tetsző képet, ellenőrizze, hogy ott vannak-e szerzői jogi megjegyzések, és hogy a kép ingyenesen használható-e.

Ha a weboldalon megjelenő képet nem védi szerzői jog, átmásolhatja számítógépe memóriájába. Ehhez egyszerűen kattintson a jobb gombbal erre a képre, és válassza a Kép mentése másként lehetőséget a megnyíló menüből. Miután elmentette a képet a számítógépére, tovább használhatja, mint bármely más képet.

Sziasztok kedves blogolvasók! Ebből a cikkből mindent megtudhat hogyan lehet képet beszúrni egy html oldalba. Van több képed, amit el szeretnél helyezni az oldaladra, vagy szeretnél logót elhelyezni a webhelyeden? Mindez könnyű. A cikk elolvasása után minden nehézség nélkül beilleszthet képeket a html oldalaiba. Ehhez részletesen fogunk beszélni img címkeés attribútumait, gyorsan áttekintjük a grafikus fájlformátumokat, például a gif-et, a jpeg-et és a png-t, valamint megvizsgáljuk az új HTML5-funkciókat is, amelyek megkönnyítik a videó és a hang beillesztését webhelyére.

Mivel a grafikus adatok és a html szövegek nem kombinálhatók egy fájlban, ezek másként jelennek meg az oldalon, mint a html oldalak más elemeinél. Először is, a grafikus képeket és egyéb multimédiás adatokat külön fájlokban tárolják. A weboldalakba való beágyazáshoz speciális címkéket használnak, amelyek hivatkozásokat tartalmaznak ezekre az egyedi fájlokra. Különösen egy ilyen címke az img címke. Ha ilyen címet tartalmazó címkével találkozott, a böngésző először lekéri a megfelelő képet, hangot vagy videót tartalmazó fájlt a webszervertől, és csak ezután jeleníti meg a weboldalon.

Minden grafikus kép és általában minden adat, amely a weboldaltól különálló fájlokban van tárolva, meghívásra kerül végrehajtva oldalelemek.

Mielőtt képeket illesztene be és részletesen megnézné az „img” címkét, érdemes egy kicsit tanulni a grafikai formátumokról.

Grafikus képformátumok.

Számos különböző grafikus formátum létezik, de a böngészők csak néhányat támogatnak. Nézzünk meg közülük hármat.

1. JPEG formátum(Közös Fényképészeti Szakértői Csoport). Nagyon népszerű formátum a képek tárolására. Támogatja a 24 bites színeket, és változatlan formában tartja a fotók féltónusát. A jpeg azonban nem támogatja az átlátszóságot, és torzítja a képek apró részleteit és szövegét. A JPEG elsősorban fényképek tárolására szolgál. Az ilyen formátumú fájlok kiterjesztése jpg, jpe, jpeg.

2. GIF formátum(Grafikus csereformátum). Ennek a formátumnak a fő előnye, hogy egyszerre több képet is tárolhat egy fájlban. Ezzel teljes animációs videókat hozhat létre. Másodszor, támogatja az átláthatóságot. A fő hátránya, hogy csak 256 színt támogat, ami nem alkalmas fényképek tárolására. A GIF elsősorban logók, bannerek, átlátszó területű és szöveget tartalmazó képek tárolására szolgál. Az ilyen formátumú fájlok kiterjesztése gif.

3. PNG formátum(Hordozható hálózati grafika). Ezt a formátumot a régi GIF és bizonyos mértékig JPEG helyettesítésére fejlesztették ki. Támogatja az átlátszóságot, de nem teszi lehetővé az animációt. Ennek a formátumnak a kiterjesztése png.

Weboldalak készítésekor általában JPEG vagy GIF formátumú képeket használnak, de néha PNG-t is használnak. A lényeg az, hogy megértsük, mely esetekben melyik formátumot érdemes használni. Röviden:

A JPEG leginkább szöveget nem tartalmazó fényképek vagy szürkeárnyalatos képek tárolására használható;

• A GIF-et elsősorban animációhoz használják;
• A PNG minden más formátuma (ikonok, gombok stb.).

Képek beillesztése html oldalakba

Szóval, hogyan lehet képet beszúrni egy weboldalra? Egy képet beszúrhat egyetlenegy használatával img címke. A böngésző a képet arra a helyre helyezi a weboldalon, ahol találkozik az img címkével.

Kód képek html-be illesztéséhez az oldal így néz ki:

Ez a html kód elhelyezi a weboldalon az image.jpg fájlban tárolt képet, amely ugyanabban a mappában található, mint a weboldal. Amint azt már észrevetted, a kép címe az alábbi helyen van feltüntetve src attribútum. Már elmondtam, mi az. Tehát az src attribútum egy kötelező attribútum, amely a képet tartalmazó fájl címének jelzésére szolgál. Az src attribútum nélkül az img címke értelmetlen.

Íme néhány további példa egy képpel ellátott fájl címének megadására:

Ez a html kód beszúr egy képet az image.jpg nevű oldalra, amely a webhely gyökerében található képek mappában található.

Az src attribútum nem csak a képekhez mutató relatív hivatkozásokat tartalmazhat. Mivel a képeket a html oldalakkal együtt az interneten tárolják, így minden képfájlnak saját URL-je van. Ezért beillesztheti a kép URL-jét az src attribútumba. Például:

Ez a kód beszúr egy képet a mysite.ru webhelyről az oldalra. Az URL-t általában akkor használják, ha egy másik webhelyen lévő képre mutat. A webhelyén tárolt képekhez jobb, ha relatív linkeket használ.

Az img címke egy soron belüli elem, ezért jobb, ha egy blokk elemen belül helyezi el, például a „P” címke belsejében - bekezdés:

Gyakoroljunk és illesszünk be egy képet a html-ről korábbi cikkekből az oldalunkra. Létrehozok egy „images” mappát az oldalam html fájlja mellé, és oda helyezek egy „bmw.jpg” képfájlt, ami így néz ki:

Ekkor a beillesztett képpel ellátott oldal html kódja a következő lesz:

És nézze meg a megjelenítési eredményt a böngészőben:

Amint látjuk, a képek weboldalakon való elhelyezésében nincs semmi bonyolult. Ezután nézzük meg az „img” címke néhány további fontos attribútumait.

Az alt attribútum egy tartalék opció

Mivel a képfájlokat a weboldalaktól elkülönítve tárolják, a böngészőnek külön kéréseket kell benyújtania a letöltésükhöz. De mi van akkor, ha sok kép van az oldalon, és alacsony a hálózati kapcsolat sebessége, akkor a további fájlok letöltése jelentős időt vesz igénybe. És még rosszabb, ha a képet az Ön tudta nélkül törölték a szerverről.

Ezekben az esetekben maga a weboldal sikeresen betöltődik, képek helyett csak fehér téglalapok jelennek meg. Ezért, hogy elmondja a felhasználónak, hogy mi a kép, . Ezzel az attribútummal adja meg az úgynevezett helyettesítő szöveget, amely a kép betöltődéséig üres téglalapban jelenik meg:

És nagyjából így néz ki:

Állítsa be a kép méreteit

Még mindig van néhány img tag attribútum, amiről tudnia kell. Ez egy pár tulajdonság szélességÉs magasság. Ezekkel adhatja meg a kép méretét:

Mindkét attribútum a méretet jelzi pixel. A width attribútum megmondja a böngészőnek, hogy milyen széles legyen a kép, a height attribútum pedig, hogy milyen magasnak kell lennie. Ez a két attribútum használható együtt vagy külön-külön is. Például, ha csak a width attribútumot adjuk meg, akkor a böngésző automatikusan kiválasztja a magasságot a megadott szélesség arányában, és akkor is, ha csak a height attribútumot használja. Ha egyáltalán nem adja meg ezeket az attribútumokat, a böngésző automatikusan meghatározza a kép méretét, mielőtt megjeleníti a képernyőn. Csak azt érdemes megjegyezni, hogy a képméretek megadása némileg felgyorsítja a böngészőt az oldal megjelenítésekor.

Egyelőre a képek beszúrásáról van szó az oldalakon, aztán megnézzük, hogyan lehet hangot vagy videót beilleszteni egy webhelyre...

Videó és hang beillesztése HTML 5 használatával

Az új html5 specifikáció számos új címkét vezet be, amelyek nagyon megkönnyítik a médiafájlok beágyazását. Ez elsősorban a videóra és a hangra vonatkozik.

Behelyezni hang- A HTML5 párosított címkét biztosít HANG. Annak a fájlnak a címe, amelyben a hangfelvételt tárolja, a számunkra már ismert src attribútum segítségével jelzi:

Az „audio” címke blokk elemet hoz létre az oldalon. Alapértelmezés szerint a böngésző nem játssza le a hangfelvételt. Ehhez meg kell adnia egy speciális attribútumot a hangcímkében automatikus lejátszás. Különleges, mert nem számít. Ennek az attribútumnak a puszta jelenléte a címkében elegendő ahhoz, hogy érvényesüljön.

Alapértelmezés szerint a hangklip nem jelenik meg a weboldalon. De ha érték nélküli attribútumot teszel az „audio” címkébe vezérlők, a böngésző megjeleníti a hangklip lejátszásához szükséges vezérlőket a weboldal azon a részén, ahol a hangcímke el van helyezve. Tartalmaznak egy lejátszás/szünet gombot, egy lejátszósávot és egy hangerőszabályzót.

Grafika és forgalom

A weblapok tervezésének szépségével és kifejezőképességével szemben támasztott követelmények állandóan ellentmondanak a modern webtárhely technikai lehetőségeinek. Ezért a weboldal tervezőjének közvetítővé kell válnia a tervező és a felhasználó között, és szigorúan fenn kell tartania az egyensúlyt a vizuális vonzerő és az információk ésszerű sebessége között a weben. A probléma sikeres megoldásához ismernie kell az interneten használt összes grafikus formátumot, meg kell értenie a köztük lévő különbségeket, alkalmazási területeiket és felhasználási jellemzőit.

Ahhoz, hogy megértse az interneten elfogadott nagyszámú formátumot és protokollt, és felállíthassa saját oldalát, ki kell választania az Ön konkrét céljainak legmegfelelőbbet. Egyes formátumok csak egy böngészőre vonatkozhatnak, míg mások speciális beépülő modult igényelnek. A legkülönfélébb formátumok közül csak azokat választottuk ki, amelyeket a népszerű oldalak szerzői a leggyakrabban használnak és a felhasználók elfogadnak.

A GIF és a JPEG a két legnépszerűbb grafikai formátum, amelyek már régóta de facto szabványokká váltak a WWW-en. Mindkettő meglehetősen univerzális, a legtöbb böngészővel olvasható, és nem igényel speciális szoftvert (vagy további modulokat). A GIF és a JPEG raszteres képformátumok, amelyek ennek megfelelően fix formátumot (felbontást) határoznak meg, amikor ilyen képeket jelenítenek meg a képernyőn. Amikor megpróbálja átméretezni (egyes böngészőkben biztosított), a raszteres (pixel) képek minősége jelentősen romlik. A 8 bites (256 színű) GIF formátum esetében a színpaletta megválasztása is komoly probléma.

A vektorgrafikus formátumok sokkal vonzóbbak az interneten való használatra. A bittérképekkel ellentétben a vektorgrafikák az adatok matematikai (geometriai) ábrázolásán alapulnak. Az ilyen képek tárolási/átviteli mennyiségét tekintve lényegesen kisebbek, könnyen méretezhetők, és gyakorlatilag nem veszítenek minőségükből egyetlen átalakítás során sem. Sajnos a vektoros formátumokat még mindig kevesen használják az interneten, de a szabványok már kialakultak, és érdekesnek kell lenniük a tervezők számára.

A közelmúltban számos vektorszabványt javasoltak, és a PGML és VML formátumokat jelenleg a World Wide Web Consortium (W3C) mérlegeli. A VML-t népszerűsítő Macromedia azonban már régóta megnyitotta Shockwave Flash vektorformátumát más fejlesztők előtt, és további modulokat vezetett be az ilyen formátumú grafikák megtekintéséhez a népszerű böngészőkben.

Az új termékek azonban nem feltétlenül jobbak minden alkalmazáshoz. Az interneten leggyakrabban közzétett képek továbbra is a digitális fényképek, rajzok és szkennelt képek, amelyek nagyon munkaigényesek, és aligha célszerű vektoros formátumba konvertálni.

Ezért a formátum kiválasztása végső soron az Ön céljaitól függ, és Önön múlik, hogy melyik képek felelnek meg leginkább a célközönségnek.

GIF - formátum a tervezéshez

A CompuServe eredetileg interaktív alkalmazásokhoz szánta GIF formátumát, a személyi számítógépek szabványos grafikai képességeinek korlátozottsága mellett. Eredetileg 4 bites, majd 8 bites raszteres formátum volt, meghatározott színpalettával, amely maximum 256 színt támogat. A formátum egyik jelentős előnye, hogy a képek egy adott palettára (színkészletre) indexelhetők, míg a JPEG képeket nem lehet palettára „zárni”, és a „helyes” megjelenítésük sem mindig lehetséges. Ez a tulajdonság különösen fontos azoknak a fejlesztőknek, akik palettaindexelést használnak a képek átvitelének optimalizálására bármilyen és minden platformon (legyen az PC, Mac, Web-TV vagy egyéb), függetlenül attól, hogy az adott rendszer milyen színmélységgel működik. Ez a sokoldalúság a 216 színből álló korlátozott paletta révén érhető el, amely magában foglalja a Windowsban és például a MacOS-ben használt összes általános színt. Egy webhely univerzális palettán történő tervezése garantálja a konzisztens, platformfüggetlen és hardverfüggetlen megjelenítést. Ezenkívül a GIF formátum veszteségmentes tömörítési sémát használ (egy egyszerű ismétléses kódoló algoritmussal: az azonos színű bájtok sorozatát egy két bájtos szó helyettesíti, amelyek közül az egyik tartalmazza az árnyékolási mintát, a második pedig a számot határozza meg ismétlések), hogy az ebben a formátumban lévő grafikus adatok ne veszítsenek információt a tömörítési és helyreállítási folyamat során.

Azonban éppen ezen beépített színkorlátozások miatt a GIF formátum csak korlátozott számú színnel rendelkező képekhez használható - például fekete-fehér diagramokhoz, vagy olyanokhoz, amelyek egy színből nagy területeket tartalmaznak, mint pl. rajzfilm keretek vagy digitális rajzok egyszínű színekkel. Természetesen bármilyen képet elmenthet GIF formátumban az úgynevezett dithering segítségével, és így meglehetősen tisztességes minőséget kaphat, de ebben az esetben a fájlméret jelentős növekedését kockáztatja a fent leírt memóriatömörítés alkalmazása után (degenerált esetben ha a képen egyetlen szomszédos ismétlés sincs, akkor pontosan kétszer akkora fájlméretet kap, mint a tömörítetlen eredetihez képest).

Így a GIF formátum fő előnyei a veszteségmentes tömörítés alkalmazása, valamint a szilárd színterületek gazdaságos megőrzése világos határvonallal és szigorú színátmenetekkel. A JPEG formátum abban különbözik a leírtaktól, hogy a tömörítés mértékétől függően a szilárd területek megsemmisülnek, és az éles színátmenetek kisimulnak vagy elmosódnak.

A GIF formátum kiválasztásának fő kritériuma: ha saját maga rajzolt egy képet egy grafikus csomagban, például a Photoshopban vagy a Painterben, amelyen nagy, azonos színű területek vannak, vagy egy meglévő képet dolgozott fel, és meg akarja őrizni a nagy kontrasztot (szükséges pl. szöveg megjelenítése), majd mentse el ebben a formátumban (ez elsősorban a fekete-fehér vagy rossz színű rajzokra vonatkozik).

A sima színátmeneteket (átmeneteket) használó fényképekhez, videókhoz vagy más színes képekhez használja a JPEG formátumot.

Azt is fontos megjegyezni, hogy ha folyamatos tónusú képeket próbál GIF-ként menteni, akkor valószínűleg sok információt el kell dobnia a kép előkészítése során (ha fix palettára alakítja), és a GIF tömörítését. módszer annyira hatástalan lesz, hogy anyagilag is veszít (mind a munkaerőköltség, mind a fájlméret tekintetében).

Többek között a GIF formátum biztosítja az úgynevezett váltottsoros megjelenést, amely a lassú csatornákkal rendelkező felhasználókat a vétel legelején segíti a kép tartalmának kiértékelésében (a hatás hasonló a kimaradt kép fokozatos rajzolásához). fókuszkép) és a teljes átvitelhez szükséges idő, és ennek eredményeként elfogadja annak eldöntését, hogy folytatja-e a felvételt, vagy jobb, ha abbahagyja. A progresszív JPEG-től eltérően azonban itt a hatás inkább pszichológiai, mint valós (lásd az ábrát).

Ne felejtse el a GIF formátum egyik fontos előnyét is, amely bizonyos esetekben még az összes hiányossága ellenére sem kerülhető el, az átlátszóság támogatása (GIF89a kiterjesztés), amely lehetővé teszi a nem téglalap alakú kontúrok sziluettjének megjelenítését meglévő háttéren. . Az átlátszóság a GIF formátumban primitíven van megvalósítva - egy szín (általában a háttér) átlátszóként van hozzárendelve. Ezt az előnyt gyakran használják gombok és ikonok létrehozásakor az oldaltervezés során (a JPEG nem támogatja az átlátszóságot).

Összegzésként a következőket mondhatjuk: GIF - legjobb választás a meglévő hardver és szoftver közötti hatékony kompromisszum eléréséhez, valamint a 8 bites GIF-kép 216 univerzális színnel való indexelésének képessége elengedhetetlen, ha a képeket különféle böngészőkön és ismeretlen platformokon kívánják megjeleníteni.

JPEG - fényképek és videokockák formátuma

A JPEG formátum nevét a Joint Photographic Experts Group bizottság rövidítéséből kapta, amely ezt a szabványt a 80-as évek végén és a 90-es évek elején hozta létre. A JPEG formátum veszteséges tömörítési algoritmuson (diszkrét koszinusz transzformáció) alapul, amely a képet olyan területekre bontja (általában 8x8 pixeles négyzetekre), amelyeken belül a színeloszlást egy matematikai függvény helyettesíti, és csak ennek a függvénynek az együtthatóit tárolja, lehetővé téve a rekonstruálni a megjelenését. Természetesen némi minőségi veszteséggel kell találkozni (a képhelyettesítő funkció bonyolultságától függően), és a helyreállítás után már nem valódi képet kap, hanem annak matematikai „helyettesítőjét”. Az eredeti minőségétől és a tömörítés mértékétől függően azonban előfordulhat, hogy a minőségvesztés teljesen láthatatlan a néző számára. De a JPEG formátum fő előnye a GIF-fel szemben, hogy míg a GIF csak 8 bites (256 szín), addig a JPEG 24 bites, és akár 16,7 millió színt is képes megjeleníteni.

Emiatt a színes JPEG természetesen lényegesen több videó információt reprodukál, mint a GIF. Ez a formátum a legmegfelelőbb valós képekhez – szkennelt képek vagy digitális fényképek, valamint digitalizált videokockák vagy renderelt 3D számítógépes grafikai jelenetek.

A JPEG másik előnye, hogy a GIF-fel ellentétben lehetővé teszi a tömörítés mértékének testreszabását eredeti kép, amely lehetővé teszi a méret és a minőség szükséges egyensúlyának fenntartását.

A JPEG tömörítési aránya nagymértékben változik a használt képszerkesztő programtól függően, de a weboldalak általában 10:1 vagy 20:1 arányt használnak (az eredeti képhez viszonyított térfogat arányában kifejezve), amelyek általában elfogadható minőséget biztosítanak. A képet azonban extrém 100:1-es értékre is tömörítheti (természetesen jelentős minőségromlással).

Tehát, ha JPEG formátumú fotóval dolgozik, lehetősége van egy 24 bites képet menteni 16,7 millió színnel, és a tömörítés során bekövetkező minőségromlás ellenére még mindig sokkal konzisztensebb az eredetivel, mint a 256-os kép. színes GIF teljesítmény. Ebben az esetben az elkerülhetetlen minőségromlás erősen függ az eredeti kép méretétől, minőségétől és típusától.

Ezenkívül a JPEG lehetővé teszi az úgynevezett progresszív megjelenítés definiálását, vagyis amikor betöltéskor a kép „durva” megjelenítése azonnal megjelenik a képernyőn, ami a további információk beérkezésével fokozatosan javul (a ugyanakkor már a letöltés befejezése előtt képet kaphat a benyújtandó anyag lényegéről, és bármely szakaszban megszakíthatja a folyamatot, ami jelentősen megtakarítja az online tartalmak megtekintésének idejét).

Ezeket az eszközöket tetszés szerint használhatja, és egy ilyen lépésről lépésre történő megnyilvánulás jó segítséget jelenthet a csatornatorlódások elleni küzdelemben. Az egyetlen probléma a progresszív JPEG-el (szemben a váltottsoros GIF-fel), hogy a régebbi böngészők nem támogatják.

PNG - univerzális raszteres újdonság

A raszteres formátumok következő generációja, a PNG, mind a JPEG, mind a GIF legjobb tulajdonságait használja, és saját egyedi megközelítést ad a képmegjelenítéshez, amely lehetővé teszi ugyanazon kép különböző verzióinak egyetlen fájlba ágyazását alacsony, közepes és magas értékekhez. határozatok.

A PNG (Portable Network Graphics) formátum egy viszonylag új raszteres grafikai formátum, amelyet szabványként hagyott jóvá a W3C konzorcium, és fokozatosan fel kell váltania mindkét „elavult” formátumot: mind a GIF-et, mind a JPEG-et. A PNG színindexelést (legfeljebb 256 színig), támogatja a 24 és 48 bites színeket (True-Color), valamint egy átlátszósági csatornát (alfa csatorna) is kínál, és sokkal hatékonyabb, mint a hagyományos raszteres képtárolási formátumok. .

A színes képek tömörítési algoritmusa minőségében jobb, mint a JPEG, és a korlátozott indexelt paletta támogatásával (akár 256 színig), az új formátum veszteségmentes tömörítést biztosít 10-30%-kal jobb, mint a GIF formátumban. ami minden esetben optimálissá teszi a felhasználást. Sajnos az új formátum nem teszi lehetővé a képminőség feláldozását többért cserébe magas fokozat tömörítés, mint pl JPEG formátum.

Az átlátszóság támogatása a PNG formátumban, a GIF-fel ellentétben, teljes értékű, azaz áttetsző képeket vagy szegélyeket készíthet, így a „tiszta” szegélyek problémája, amelyet olyan nehéz megoldani, ha átlátszóságot használunk egy GIF-fájlban, könnyen megoldható. itt.

A PNG által kínált fejlesztések ellenére azonban az új formátum csak akkor fog beindulni, ha a webhely-tervezők és szoftvergyártók felhasználják a képek új formátumban való megjelenítésére és a közzétételre való előkészítésre. Eközben meglehetősen nehéz PNG-képeket találni bárhol az interneten, annak ellenére, hogy a közelmúltban a Netscape Navigator és a Microsoft Internet Explorer is támogatja ezt a formátumot.

És bár ők legújabb verzióiés támogatják a PNG-t, ezt nagyon korlátozott módon teszik. Jelenleg az egyetlen megoldás azoknak a felhasználóknak, akik teljes PNG-fájlt szeretnének látni, ha maguk telepítenek egy külső modult (hasonlóan a PNG Live-hoz).

Úgy tűnik, a fejlesztők késlekednek, és arra várnak, hogy a felhasználók teljesen átálljanak az új formátumokra. Nos, az egészséges konzervativizmus soha nem árt, de továbbra is erősen javasoljuk, hogy fokozatosan térjen át a PNG-re, legalább a GIF formátum minden eddigi felhasználását lecserélve.

Vektoros ábrázolás

Mind a JPEG, mind a GIF, mind a PNG raszteres formátum, amely egy kép diszkrét (pixel vagy pont) ábrázolásán alapul, míg vektoros formátumok matematikai képleteken alapulnak (ábrák geometriai ábrázolása). A vektorgrafikák jelentős előnyöket nyújtanak a raszterrel szemben, különösen, ha diagramokról, szövegekről és ipari grafikákról van szó (és a költséghatékony formátumok nagy jelentőséggel bírnak az internet számára).

Tehát az első előny a vektoros képek lényegesen kisebb mérete a bittérképekhez képest, mivel nem a kép egyes pixeleit írják le, hanem a teljes ábrát (például kör meghatározásához 3-4 számot kell átadni: sugár, középponti koordináták, esetleg a vonal típusa vagy vastagsága és attribútumai). A vektoros ábrázolást leíró matematikai képletek sokkal kevesebb helyet foglalnak el, mint az egyes pixelek és attribútumaik.

A vektoros ábrázolás másik fontos előnye, hogy szinte korlátlanul méretezheti a képet (vagy annak részleteit) anélkül, hogy a kép felbontása vagy tisztasága romlana. Nincs szükség erőfeszítésre a vektorábrázolás egy adott palettához, platformhoz, hardverhez vagy tervezési jellemzőihez való igazításához; a tömörítési séma és a megjelenítési minőség összehangolása pedig problémamentesen megy végbe.

Azonban nem minden raszteres kép konvertálható vektoros formába (például fényképek, szkennelt képek vagy raszteres rajzok nehezen vektorizálhatók). De egyszerűen hülyeség speciálisan elkészített vektoros rajzokat (például vonalas rajzokat, piktogramokat, műszaki illusztrációkat, térképeket, információs grafikákat és más, történelmileg vektoros grafikákat) raszteres formára konvertálni az interneten való közzététel céljából, ami manapság mindenhol megtörténik.

Megjelenítési problémák vektoros grafika a világhálón azért merült fel, mert a raszteren kívül nem volt más megjelenítési mód, és a PDF formátumú fájlok megjelenítésére megjelenő beépített modul nem biztosított kellő rugalmasságot, és megkövetelte az összes tartalom egy formában - PDF -ben történő tárolását.

Annak érdekében, hogy lehetővé tegyük a vektorgrafikák zökkenőmentes beágyazását egy hagyományos HTML formátumba, további szoftverek nélkül, két új vektorszabványt vizsgál a W3C szabványügyi bizottság: a PGML-t (Precision Graphics Mark-up Language) és a VML-t (Vector Mark-up Language). ). A PGML-t az Adobe Systems, az IBM, a Netscape és a Sun Microsystems, a VML-t pedig a Microsoft, a Hewlett-Packard, az Autodesk, a Macromedia és a Visio támogatja. Mindkét szabvány az XML jelölőnyelv kiterjesztésein alapul, amelyeket a HTML utódjaként népszerűsítenek az interneten, és a W3C ajánlja a jövőbeni használatra.

Jelenleg azonban egyik böngésző sem támogatja a vektorgrafikus szabványokat, bár további modulok (plug-inek) már elérhetőek. A statikus vektorképek weben való megjelenítésének manapság legnépszerűbb módjai közé tartozik a Macromedia SWF (Shockwave Flash) formátuma és a még mindig alulértékelt Xara Flare formátum.

Fellobbanás- jó döntés, amely lehetővé teszi olyan vektoros képek beillesztését, amelyek szinte korlátlanul teszik lehetővé az oldal részletezettségének növelését, miközben méretük a Shockwave Flash. Ez nem azt jelenti, hogy olyan kényelmetlen a további modulok használata a képek megtekintéséhez, de amikor ilyen eszközöket használ az oldalain, mindenképpen figyelmeztesse erre a felhasználót, és adjon lehetőséget a megfelelő modul letöltésére, mielőtt az oldalra lép. amely tartalmazza majd ezeket az elemeket. Rövid távon ez természetesen lelassítja a böngészési folyamatot új felhasználó, de fokozatosan egyre több követőre tesz szert, mígnem a megfelelő eszközök végre bekerülnek a böngésző következő verziójába, és a kezdőknek már nincs szükségük a kiegészítő modulra.

Animáció, interaktivitás és interakció

Általánosságban elmondható, hogy a GIF-képek speciális kötegként helyezhetők el egy fájlba, és az így létrejött „film” (flipbook) egy egyszerű raszteranimáció létrehozásával reprodukálható. A Netscape és a Microsoft is támogatja az animált GIF-eket a böngészők harmadik verziója óta, így a weben való jelenlétüket ma már nehéz elkerülni. Számos GIF-animátor, amely lehetővé teszi hasonló GIF-halmok létrehozását, széles körben elterjedt (kereskedelmi és nyilvánosan elérhető). A GIF formátum "újraélesztése" azonban ellenőrizhetetlenséghez vezethet fájlméretek, mert egy ilyen köteg minden egyes „szintje” egy különálló GIF-kép, tehát átlagosan 15 képkocka/másodperc számítógépes animáció megszámlálhatatlan számú kilobájtot képes „előállítani”.

Java vagy JavaScript használatával interaktív animációt hozhat létre, amely válaszol a felhasználónak.

Most nézzük meg a webes animáció és az interaktív felhasználói interakció egyéb megoldásait, és itt továbbra is a Macromediaé a főszerep, amely Shockwave és Flash programjaival régóta piacra lépett, és folyamatosan fejleszti termékeit, növelve azok hatékonyságát a megfelelő módon. a felhasználók és a tervezők kérésére.

Eredetileg a Macromedia Director formátumaként jött létre, a Shockwave egy protokollcsalád, amely elsősorban interaktív és grafikus tartalmak előállítását célozza, amelyeket kifejezetten internetes használatra készítettek. És a Shockwave Flash általában egyedülálló hangszer, és az egyik legjobb eszköz a legjobb módokat animáció létrehozásához és egy weboldalon való közzétételéhez. A Shockwave Flash nagyon kicsi fájlokat hoz létre (mivel túlnyomórészt vektoros ábrázolási formátumot használ), és más formátumokhoz képest az előkészítés szempontjából a legkényelmesebb.

Amikor ilyen animációt tesz közzé az oldalain, ne felejtse el értesíteni erről a felhasználót, hogy előre készletezzen egy további modult, és felkészüljön a letöltés fárasztó várakozására. A legújabb verziók azonban mind a Netscape Navigator, mind a internet böngésző még az alapcsomagban is vannak megtekintő modulok a Flash-animációkhoz. A Netscape megerősítette, hogy a Navigator jövőbeli verziói már kódszinten is támogatni fogják a Flash-t.

A végső döntés a tiéd

Változik tehát a webes tartalmak megjelenítéséhez való hozzáállás, megjelennek az új adatformátumok, ezeket támogató fejlesztőeszközök. A régebbi formátumok (GIF és JPEG grafikák megjelenítéséhez) azonban még mindig meglehetősen népszerűek. Szinte minden böngésző támogatja őket, és a legtöbb fejlesztő nagy tapasztalattal rendelkezik a velük való munkavégzésben. Fontos, hogy az adott célnak megfelelő formátumot használjunk, hogy biztosítsuk az egyensúlyt a képminőség és a fájlméret között. Például egy GIF formátumú kép több helyet foglalhat el, és gyengébb minőségű eredményt produkálhat, mint a JPEG formátumban, míg egy másik esetében ennek ellenkezője lesz.

A raszteres képek ábrázolásakor azonban a PNG lesz az előnyben részesített formátum, és ha még tovább megy, és megpróbál vektoros képet használni, akkor ma a Macromedia Shockwave Flash formátuma az Ön szolgálatában áll.

Az SWF (Shockwave Flash) formátum nem egy általánosan használt, hanem egy belső vektorformátum Flash programok a Macromedia kínálatából (lásd: „Macromedia Flash Lessons” a CD-ROM-on), így saját kép vagy animáció beszerzéséhez meg kell vásárolnia a megfelelő multimédiás csomagot a Macromedia-tól, és a felhasználónak egy további modult kell telepítenie a megjelenítéshez. az eredmény. Így annak érdekében, hogy egyszerűen elhelyezzük vektoros rajz a weboldalához, akkor le kell győznie egész sor kényelmetlenség.

Azonban más vektorformátumok is készülnek, és hamarosan szabványossá válnak.

ComputerPress 5"1999