Több száz képformátum létezik, de csak néhányat támogatnak a webböngészők. Ebben a cikkben bemutatjuk, hogy milyen grafikus fájlformátumok állnak rendelkezésre a webdesignerek számára, és milyen esetekben érdemes ezeket használni.
A legnépszerűbb webböngészők által támogatott grafikus fájlformátumok a következők: Graphic Interchange Format (GIF), Joint Photography Experts Group (JPEG), Portable Network Graphics (PNG) és vektoros grafika. A grafikus fájlok néhány tulajdonsága:
- Átlátszóság – ez a tulajdonság lehetővé teszi, hogy a kép a szilárd állapottól a teljesen átlátszóig változó átlátszóságú legyen.
- Tömörítés – ez a tulajdonság lehetővé teszi a kép nagy mennyiségben történő mentését kisebb fájl, matematikai algoritmusok segítségével egy pixelcsoportot egyetlen elemként kezel.
- Weave - lehetővé teszi a kép betöltését először a páratlan, majd a páros sorokra. Így a látogató hamarabb láthatja a képet.
- Animáció – a mozgás látszatát kelti egymás utáni felvételek sorozatán keresztül. Az animált GIF nem igényel böngészőbővítményt, és szinte minden eszközön működik.
- A progresszív betöltés abban hasonlít a szövéshez, hogy kezdetben csak a kép egy részét tölti be, de nem váltakozó vonalak alapján.
A GIF-et 1980-ban alapították, és a webdizájnerek az 1990-es évek elején alkalmazták a weboldalak fő grafikai formátumaként. A GIF-fájlok tömörítési algoritmust használnak, amely kicsinyíti a fájlméretet gyors betöltés. A GIF 256 színre korlátozódik (8 bit), támogatja az átlátszóságot és a váltott soros grafikát. Ezzel a formátummal animált grafikák is készíthetők. Minden böngésző probléma nélkül képes megjeleníteni a GIF fájlokat.
A GIF-ek előnyei:
- A legszélesebb körben támogatott grafikai formátum
- A diagramok jobban néznek ki ebben a formátumban
- Átláthatóság támogatása
A fájlok tömörítettek, de támogatják a "valódi színeket" (24 bit), és ez a preferált formátum olyan fényképekhez, ahol a minőség nagyon fontos. A JPEG támogatja a progresszív formátumot, amely lehetővé teszi, hogy szinte azonnal láthassa a képet, amely minősége javulni fog, ha a letöltés befejeződik.
A GIF fájlokkal ellentétben a webtervezők kezelhetik a tömörített JPEG fájlokat, ami különböző szintű képminőséget és fájlméretet tesz lehetővé.
A JPEG előnyei:
- A nagyobb tömörítés gyorsabb letöltési sebességet jelent.
- Kiváló minőséget biztosít fényképekhez és bonyolult rajzokhoz.
- 24 bites színek támogatása.
A PNG egy viszonylag új formátum, amelyet a GIF-fájlok alternatívájaként vezettek be. A PNG legfeljebb 24 bites színt, átlátszóságot, szövést támogat, és tartalmazhat egy rövid szöveges leírást a képről, amelyet a keresőmotorok használnak.
A PNG előnyei:
- Leküzdi a GIF 8 bites színkorlátait
- Lehetővé teszi a képek szöveges leírását a keresőmotorok számára
- Támogatja az átláthatóságot
- A séma jobban néz ki, mint a JPEG
vektoros grafika
A legtöbb webes grafika ilyen bittérkép vagy egy minta, amely színes pixelek rácsából áll. Az illusztrációkat vektorgrafikában kell elkészíteni, amely a kép vonalformáit és színeit alkotó egyes elemek matematikai leírásából áll. A vektorgrafikák olyan programok segítségével készülnek, mint pl Adobe Illustrator vagy CorelDRAW. A vektorgrafikákat bármilyen GIF, JPEG vagy PNG formátumba kell konvertálni a weboldalakon való használathoz.
Milyen formátumot kell használni?
A webtervező a legtöbb felhasználáshoz GIF vagy JPEG formátumot választhat. Mivel azonban a GIF fájlok általában kicsik a JPEG fájlméretekhez képest, a legtöbb webtervező a GIF formátumot használja a hátterekhez, dobozokhoz, keretekhez és minden más olyan grafikához, amely 8 bites színekkel jól néz ki.
A legtöbb tervező a JPEG formátumot választja fényképekhez és illusztrációkhoz, ahol a tömörítés nem veszélyezteti a kép vizuális minőségét.
Egyetlen címkét használnak egy kép beszúrására egy weboldal szövegébe. (P 1. táblázat). Ennek a címkének az attribútumai beállítják az oldalon elhelyezett kép összes paraméterét. Kötelező az SRC attribútum, amely a grafikus fájl címét és nevét adja meg. Ha az SRC attribútum nincs beállítva, akkor csak egy üres képikon jelenik meg.
Címkeszerkezet az SRC attribútummal így néz ki:
.
Ha az Institute nevű grafikus fájl ugyanabban a mappában található, mint a weblap, akkor az elhelyezéséhez írja be:
.
Fájlnév Formátum
A D:\Collection\Cities\MINSK.GIF címen található MINSK nevű grafikus fájl elhelyezéséhez írja be .
Címkével a weboldal egy grafikus fájlt tartalmaz, amely az "Internet" globális hálózat egy másik számítógépén található.
Hozzon létre egy weboldalt intézetünk fényképével, amely a 3. ábrán látható. 4.1, meg kell adnia a következő HTML-kódot:
A mi intézetünk
Rizs. 4.1. Weboldal az intézet fényképével
A fenti példában a fénykép magassága (HEIGHT) 200 képpont, a szélessége (WIDTH) 300 képpont. A fénykép elhelyezéséhez egy bekezdés jön létre középre igazítással.
vízszintes vonalak
A vízszintes vonalak elhelyezése a weboldalon egyetlen címke használatával történik
. A SIZE, WIDTH, COLOR és ALIGN attribútumok módosítják a vonalak vastagságát, szélességét, színét és igazítását.
Vegyünk néhány példát a vízszintes vonalak elhelyezésének magyarázatára:
1.
- vízszintes vonal teljes oldal 2 pixel vastag.
2.
WIDTH = "200" ALIGN="RIGHT"> – vízszintes zöld vonal 15 képpont vastag, 200 képpont széles, jobbra igazítva.
3.
- vízszintes kék színű vonal az egész oldalon, 25 pixel vastagsággal.
4.
WIDTH = "300" ALIGN = "LEFT"> – egy piros vízszintes vonal, 20 képpont vastag, 300 képpont széles, balra igazítva.
A négy rögzített példa vonalleképezése a 1. ábrán látható. 4.2.
Rizs. 4.2. Vonalak egy weboldalon
TÁBLÁZATOK
Táblázatok készítése
A táblázat a segítségével készül páros címke
HTML kódban.
Minden táblázat sorokból, a sorok pedig cellákból állnak. A következő címkéket használják táblázatsorok és cellák létrehozására:
Ezek a címkék a párcímke belsejébe vannak írva
A táblázat soronként kerül kialakításra - először egy sor kerül megadásra, és a szükséges cellák száma, majd a második sor stb.
ábrán látható táblázat eléréséhez. 5.1, be kell írnia a következő HTML-kódot:
| Autók | Ár | Ford | 5000 | Golf | 6000 |
|---|
akkor a külső szegély vastagsága 6 pixel lesz. Ahhoz, hogy a táblázat szegélyei ne jelenjenek meg, a BORDER attribútumhoz 0-val egyenlő értéket kell rendelni, vagy egyszerűen ki kell hagyni ezt az attribútumot.
Mint már említettük, a HTML ma az alapja bármilyen weboldal írásának világháló. Nál nél CSS használatával kód generálása a számára HTML nyelv gyökeresen megváltozik. Búcsút inthet az ügyetlen újrafelhasználásnak HTML címkék csak hogy az egyiket vagy a másikat megszerezze vizuális effektek. Bizonyos HTML-címkékről vagy attribútumokról, például az elavult címkéről...
itthon
Rendeljen weboldalt és vállalkozzon!
Ez a mondat sok oldalon hallható és látható, és nem hiába!
Weboldal — a cég arca. És ez a legmodernebb és leghatékonyabb kommunikációs csatorna a potenciális fogyasztókkal. Csak az internetes oldal képességei teszik lehetővé, hogy teljes mértékben kihasználhassa az információs üzenetek felhasználóhoz közvetítésének összes módját. Szöveges, hang- és videoinformáció egy oldalon belül küldhető be, hogy megismertesse a fogyasztót velük.
Használva szoftver oldalon fogadhat fizetést, beszélhet telefonon, karbantarthat adatbázisokat, küldhet és fogadhat faxot, válthat SMS üzenetekés sok más dolgot is csinál. Egy modern weboldal információs központ nem csak bármely cég, hanem minden internetező számára is.
És ez egy mindenki számára előnyös módja annak, hogy ötleteit vagy fejlesztéseit hatékonyan, ugyanakkor egyszerűen és vizuálisan mutassa be a legszélesebb közönségnek. És ma továbbra is a HTML hiperszöveg jelölőnyelven írt webdokumentumok jelentik az adatábrázolás fő formáját a webes környezetben.
A HTML fő előnyei:
- egyszerűség, amely lehetővé teszi a HTML megtanulását a lehető legrövidebb idő alatt.
- saját weboldalak létrehozásának lehetősége
- és a HTML pontosan ugyanúgy működik minden ma létező platformon, nincs szükség további hardver vásárlására. És elég, ha bármi elérhető szöveg szerkesztő, mint például a Jegyzettömb.
Ezen az oldalon igyekeztem részletesen leírni a saját webhelyem létrehozásának teljes folyamatát, nevezetesen egy kész projekt közzétételét az Interneten, hogy minden felhasználó számára elérhetővé tegyen.
Remélem, sok cikkem nagyon hasznos lesz, mert én magam nem vagyok programozó, de nagyon inspirál ez a munka.
Ez az oktatóanyag azt mutatja be, hogyan lehet hozzáadással díszíteni egy weboldalt grafikus képek. Megismerkedünk a legelterjedtebb képformátumokkal, megtudjuk, milyen címkével rakunk fel képeket az oldalra, foglalkozunk az alternatív feliratokkal, valamint a szöveg- és grafikai igazítással. Megismerkedünk a képek főbb jellemzőivel, és megtanuljuk, hogyan állítsuk be a kép szélességét és magasságá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. Befejezésül néhány általános tippet adunk a grafikák weboldalon való használatához.
Képek hozzáadása egy weboldalhoz
Ha a weblap nem tartalmaz mást, mint szöveges információk, lehet, hogy valakinek érdekesnek tűnik, hála a rajta szereplő információknak, de nem valószínű, hogy bárki is vonzónak fogja 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. Tulajdonképpen mi a mai lecke tárgya.
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, általában 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 (Graphics Interchange Format) formátumban, egy grafikus adatcsere formátumban kerül mentésre. Jelenleg van egy másik új grafikus formátum, amely egyre népszerűbb: PNG (Portable Network Graphics). hálózati grafika). Várhatóan idővel felváltja a GIF formátumot. Azonban ne rohanjon az összes grafikus fájl újramentésével ebben a formátumban, miközben még mindig 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 mostanra már eldöntheti, hogy mit ezt a bejegyzést 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 erre a bejegyzésre egyetlen általános címkeként hivatkozunk. Valószínűleg azt is észrevette, hogy nincs megfelelő zárócímke a képforrás címkéhez. 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/DTD/xhtml1/transitional.dtd"> Első képek e> Ez a kép az első weboldalamhoz került. p > 
Alternatív címkék hozzáadása
Az interneten való böngészés közben valószínűleg többször is észrevett már, hogy különféle feliratok jelennek meg, amikor az egérmutatót egy weboldal valamely grafikus eleme fölé viszi. Ezek a feliratok általában közölnek néhányat További információ magáról a képről vagy az oldal által elfoglalt területről.
A következő HTML kódpélda 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 határoz meg egy weboldalhoz hozzáadott grafikához. Ezt a szöveget alternatív szövegnek nevezzük, mert a képernyőn a kép alternatívájaként jeleníthető meg. Az alt attribútumnak van egy másik nagyon fontos célja is. Sok, alacsony adatsebességű hozzáférési csatornát használó internetlátogató utasíthatja böngészőjét, hogy ne töltsön le vagy jelenítsen meg grafikus információkat. Ez lehetővé teszi számukra, hogy felgyorsítsák a weboldalak betöltését 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 látogatója nem lát képet a képernyőjén, akkor legalább el tudja olvasni 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övegcímkéket hozzáadni különféle elemek külső kialakítás weboldalak. Az ilyen hibák elkerülése érdekében az ilyen elemek alt attribútuma üres értékre állítható (alt=” ”). 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ép attribútumai
Címkéhez Olyan attribútumok állnak rendelkezésre, amelyek lehetővé teszik a kép méretének módosítását. Ezen attribútumok közül néhányat az alábbiakban sorolunk fel.
magasság- Képpontban vagy százalékban van 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.
Kép magasság és szélesség beállítása
A weboldalon elhelyezett kép méreteit a magasság és szélesség attribútumokkal lehet megadni. 3 ezeknek az attribútumoknak az értékei vagy a következőképpen vannak beállítva rögzített mennyiségek pixelben, vagy az oldal méretéhez viszonyított százalékban. Vessen egy pillantást az alábbi HTML-kódra. Az első címkeméretekben eredeti kép, amelyeket az oktatóanyag előző képeiben már láthatott, 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. Az ábra azt mutatja, 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 kezeli a pixel- és százalékértékeket, de ne feledje, hogy a weboldal látogatóinak számítógépe a monitoron beállítotttól eltérő képernyőfelbontásra állítható be. 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 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 nézi meg, akkor az oldalszélesség megadott 6%-a már 61 pixeles szélességnek felel meg.
Egy kép átméretezésekor ne felejtse el beállítani mindkét értéket a magasságának és szélességének megfelelően. Ha ezen értékek közül csak az egyiket módosítja, maga a kép függőlegesen vagy vízszintesen megnyúlik a képernyőn. Alternatív lehetőség a kép méretének grafikus szerkesztő segítségével történő beállításából áll.
A gyorsabb képbetöltés illúzióját keltheti. Függetlenül attól, hogy a kép átméretezett-e vagy sem, mindig adjon meg értéket a magasság és szélesség attribútumokhoz, mivel ezek fontos információkat közölnek a böngészővel arról, hogy egy adott képhez mennyi helyet kell lefoglalni az oldalon. Ebben az esetben a böngésző képes lesz jelezni a képhez szükséges helyet, és folytatni tudja az oldal egyéb elemeinek é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, mert a látogatóknak nem kell megvárniuk a kép teljes betöltődését, hogy végre láthassák az oldalon megjelenő többi információt.
Ha valóban azt szeretné, hogy a kép bizonyos mennyiségű helyet foglaljon el az oldal szélességében, használja a 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 magának a képnek a felbontását (méretét pixelben) állandó szinten szeretné tartani, használja a pixelben kifejezett értékeket.
Szöveg és grafika összehangolása
A címke igazítási attribútuma lehetővé teszi a kép igazítását a szöveges karakterlánc jobb (jobb érték) vagy bal (bal érték) széléhez. Az attribútum használatára az ábrán láthatók példák.
Ugyanez az attribútum használható a kép függőleges igazítására is (ismét a szövegsorhoz képest). Három másik értéket vehet fel fent, lent és középen. Ha az igazítás attribútum a tetejére van állítva, a kép teteje a környező szöveg tetejé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öveges karakterlánc közepéhez igazodik.
Képek használata hivatkozásként
A képek nem csak weboldaltervezésre alkalmasak. Sikeresen használhatók hiperhivatkozásként más dokumentumokhoz. A HTML-ben ez a feladat egyszerű, mert a képek pontosan ugyanúgy hiperhivatkozásokká alakulnak, mint a címkék. Ehhez a címkét is fel kell helyezni, bele kell foglalni a weboldal elemét, amely egy másik dokumentumra mutató hivatkozásként kell, hogy legyen. Így, ha egy hiperhivatkozást kell követni egy képre kattintás után, akkor a címkét a kép címkéjébe kell zárni.
Ebben az esetben, miután egy weboldal látogatója a kép fölé viszi az egérmutatót, 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.
Kép miniatűrök
A HTML hiperhivatkozási képességének egy másik gyakori módja az egyik kép használata a másikhoz való navigáláshoz. Mire való? 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, amíg a letöltés befejeződik. Ilyenkor az eredeti képről egy kisebb másolat, úgynevezett miniatűr jön létre, amit a böngésző sokkal gyorsabban tud betölteni. Ha a látogatót érdekli a kép, és le akarja tölteni a teljes példányát, akkor csak erre a miniatűrre kell kattintania. Így néznek ki a megfelelő HTML-kódok.
Mint látható, a thumbnail.jpg képre kattintva egy másik képfájl nyílik meg (image.jpg). Szövegkarakterlánc, amelyet az alt attribútum értékeként adunk meg, megmondja a látogatónak, hogyan nyissa meg a fő képet.
A sikeres képhasználat titkai
A képek érdekesek és vonzóak, sokat hordoznak magukban vizuális információés nagyon könnyen hozzáadhatók weboldalakhoz, de mégis van néhány szabály, amit érdemes betartani, ha valóban olyan oldalt akarunk 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 az internethasználók többsége még mindig alacsony feszültségű kommunikációs csatornákat használ a hálózat eléréséhez áteresztőképesség, a feltöltött fájlok mérete továbbra is alapvető 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 fájl mérete is HTML dokumentum. Minél több képet adnak hozzá egy weboldalhoz, még ha kicsik is, annál nagyobb lesz a végleges dokumentum fájlmérete. teljes előnézet be az oldalad különböző böngészőkés becsülje meg, mennyi időbe telik az egyes böngészők letöltése.
Mivel az alt attribútum nagyon fontos (mert 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, különben oldallátogatóit félrevezethetik. Ugyanez a megjegyzés fordítva is érvényes: győződjön meg arról, hogy a képek megfelelnek a weboldalon megjelenő szöveges információknak. Repülőgépről készült fénykép megfelelő lenne egy légi utazási oldalon, de teljesen felesleges egy vadon élő állatokkal foglalkozó területen.
Az interneten rengeteget találhatsz érdekes képekés egyszerűen 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 erre a képre Jobb klikk kattintson a gombra, és a megnyíló menüből válassza a Kép mentése másként lehetőséget. Miután elmentette a képet a számítógépére, tovább használhatja, mint bármely más rajzot.
A kép hozzáadása két lépésben történik: először egy grafikus fájl készül kívánt formátumotés a kívánt méretet, akkor a fájl az elem segítségével megjelenik az oldalon Két formátumot használnak széles körben a webes grafikákhoz - PNG és JPEG. Sokoldalúságuk, sokoldalúságuk, kis térfogatuk forrás fájlok az oldalhoz megfelelő minőséggel jól kiszolgálták őket, sőt, a webes képek szabványaként határozták meg őket. Rajtuk kívül GIF és SVG formátumokat használnak az oldalakon. A PNG-8 (Portable Network Graphics, hordozható hálózati grafika) egy ingyenes formátum, amelyet a GIF helyettesítésére hoztak létre, amelyben hosszú ideje szabadalmaztatott algoritmusokat használtak.
.
Fájlformátumok
PNG-8 formátum
Sajátosságok
- A képen 8 bites palettát (256 szín) használ, amihez a nyolcas számot kapta a nevében. Ebben az esetben kiválaszthatja, hogy hány szín kerüljön mentésre a fájlba - 2 és 256 között.
- A GIF-fel ellentétben nem jelenít meg animációt.
Alkalmazási terület
PNG-24 formátum
A PNG-24 a PNG-8-hoz hasonló formátum, de 24 bites színskálát használ.A JPEG-hez hasonlóan megőrzi a fényképek fényerejét és színárnyalatát. A GIF-hez és a PNG-8-hoz hasonlóan megőrzi a kép részleteit, például vonalas rajzokat, logókat vagy illusztrációkat.
Sajátosságok
- Körülbelül 16,7 millió színt használ fájlonként, ezért ezt a formátumot használják a színes képekhez.
- Támogatja a többszintű átláthatóságot, ez lehetővé teszi a létrehozást sima átmenet a kép átlátszó területétől a színterületig.
- Tekintettel arra, hogy a használt tömörítési algoritmus a kép összes színét és képpontját változatlan formában tartja, más formátumokkal összehasonlítva a PNG-24 rendelkezik a grafikus fájl legnagyobb végső méretével.
Alkalmazási terület
Fényképek, átlátszó és áttetsző területeket tartalmazó rajzok, sok színnel, éles képélekkel rendelkező rajzok.
JPEG formátum
A JPEG (Joint Photography Experts Group) egy népszerű képfájlformátum, amelyet széles körben használnak webhelyek létrehozására és fényképek tárolására. A JPEG támogatja a 24 bites színeket, és érintetlenül tartja a fotók színeinek fényerejét és árnyalatait. Ez a formátum veszteséges tömörítésnek nevezik, mivel a JPEG algoritmus szelektíven elutasítja az adatokat. A tömörítési módszer torzíthatja a képet, különösen, ha szöveget, finom részleteket vagy éles széleket tartalmaz. JPEG formátum nem támogatja az átláthatóságot. Amikor ebben a formátumban ment el egy fényképet, az átlátszó képpontok a megadott színnel töltődnek fel.
Sajátosságok
- A képen látható színek száma körülbelül 16,7 millió, ami elég a megtakarításhoz fényképes minőség Képek.
- A formátum fő jellemzője a "minőség", amely lehetővé teszi a végső fájlméret szabályozását. A minőséget 0-tól 100-ig mérik, minél magasabb az érték, annál jobb a kép, de a fájl mérete is nő.
- Támogatja a progresszív JPEG nevű technológiát, amelyben a kép kis felbontású változata megjelenik a nézetablakban, mielőtt maga a kép teljesen betöltődik.
Alkalmazási terület
Főleg fényképekhez használják. Nem nagyon alkalmas átlátszó területeket, apró részleteket vagy szöveget tartalmazó rajzokhoz.
GIF formátum
A GIF (Graphics Interchange Format) egy grafikus fájlformátum, amelyet széles körben használnak animált képek készítésére. A GIF 8 bites színt használ, és hatékonyan tömöríti az egyszínű területeket, miközben megőrzi a kép részleteit.
Sajátosságok
- A színek száma egy képen 2 és 256 között lehet, de lehet bármilyen szín a 24 bites palettáról. A GIF-fájl átlátszó területeket tartalmazhat. Ha a fehértől eltérő hátteret használ, az a kép „lyukakon” keresztül jelenik meg.
- Támogatja a képek képkockánkénti cseréjét, ami népszerűvé teszi a formátumot az egyszerű animációk készítésében.
- Veszteségmentes tömörítési módszert használ
Alkalmazási terület
Szöveg, logók, illusztrációk éles szélekkel, animált grafika, képek átlátszó területekkel, bannerek.
SVG formátum
SVG (Scalable Vector Graphics) - vektoros formátum, amelyben a kép nem pixelekből, hanem tárgyakból és görbékből áll. Emiatt pontokból álló raszteres fényképek készítésére nem alkalmas, jól elkülönülő körvonalakat tartalmazó illusztrációkhoz viszont kiváló.
Sajátosságok
- Az SVG formátumú képek tetszőleges mértékben méretezhetők a képminőség romlása nélkül.
- A fájl mérete általában kicsi.
- Támogatja az animációt és az interaktivitást.
Alkalmazási terület
Szöveg, logók, illusztrációk éles szélekkel.
Kép hozzáadása
Egy elemet arra használnak, hogy képet adjunk egy weboldalhoz. , amelynek src attribútuma a grafikus fájl címét adja meg. A kép hozzáadásának általános szintaxisa a következő.
Az src és az alt attribútumok is kötelezőek.
Az src attribútum beállítja a grafikus fájl elérési útját, megadásához abszolút és relatív címek is használhatók. Ezután vegyen fontolóra néhányat különböző utak, hogyan lehet meghatározni a kép elérési útját, hogy elhelyezze azt egy weboldalon. Példaként vegyünk egy target.png nevű fájlt, amely a webhely gyökérjének images mappájában van tárolva.
http://example.ru/images/target.png
Ha a cím egy protokollal kezdődik (http:// vagy https://), akkor ez egy abszolút cím. A kép mindig innen töltődik be megadott címet az interneten, még akkor is, ha a weboldalt a helyi számítógépére menti.
//example.ru/images/target.png
Ez a kép abszolút címe a protokoll megadása nélkül. A böngésző önállóan helyettesíti a szükséges protokollt, amelyen a webhely fut (http:// vagy https://). Kérjük, vegye figyelembe, hogy az ilyen típusú címek nem működnek a helyi weboldalakon, hanem csak az interneten, egy webszerver felügyelete alatt.
/images/target.png
Ha perjel (/) van a cím elején, az azt jelenti, hogy a képek mappa a webhely gyökerében található. Előfordulhat, hogy az egyik mappa egy másikba van ágyazva, így az elérési út megnőhet. Például az /assets/images/target.png azt jelenti, hogy az eszközök mappa a webhely gyökerében található, tartalmazza a képek mappát, amelyben a target.png fájl található.
../images/target.png
A két perjel (../) azt jelzi, hogy a képmappa egy szinttel feljebb van a mappaszerkezetben a HTML-dokumentumhoz képest. ábrán. Az 1. ábra azt a source.html fájlt mutatja, amelybe a target.png képet kell beilleszteni.
Rizs. 1. Fájl elhelyezése
images/target.png
A mappanév pontok nélkül a cím elején azt jelzi, hogy a HTML dokumentum és a képet tartalmazó mappa egy szinten van (2. ábra).
Rizs. 2. Fájl elhelyezés
target.png
Az egyetlen fájlnév azt jelzi, hogy a kép és a weboldal ugyanazon a helyen található (3. ábra).
Rizs. 3. Fájl elhelyezés
Az 1. példa többféleképpen is bemutat egy képet egy weboldalhoz.
1. példa: Képek hozzáadása
Alternatív szöveg
Az alternatív szöveg a képek fontos részét képezi, és azoknak a látássérült embereknek szól, akik nem látják a képeket, és nem kapnak információkat az oldalról a hallásuk segítségével. A speciális képernyőolvasók szöveget olvasnak be az oldalról, és képek helyett az alt attribútumban írt szöveget ejtik ki. Normál böngészőkben az alternatív tartalom csak akkor jelenik meg, ha a képek valamilyen okból nem jelennek meg a weboldalon.
Az alt attribútum írja le a kép tartalmát, és ha a kép dekoratív funkciót tölt be, és nincs értelme, akkor hagyja üresen az altat (2. példa).
2. példa: Alt
Ha a képekhez látható jelre van szükség, akkor használja a globális cím attribútumot, amely bármely elemhez hozzáadható, nem csak a képekhez. Ha az egérmutatót a kép fölé viszi, megjelenik a title attribútum értékét tartalmazó szöveg (3. példa).
3. példa: Cím használata
Az eszköztipp megjelenése az adott böngészőtől függ, és nem módosítható. ábrán. A 2. ábra egy elemleírást mutat be a Firefox böngészőben.
Rizs. 2. Az eszköztipp típusa
Kép átméretezése
Egy elem képének átméretezése szélesség (szélesség) és magasság (height) attribútumok vannak megadva. Értékként pixeleket vagy százalékokat használnak. A 4. példa bemutatja, hogyan kell hozzáadni ezeket az attribútumokat
.
4. példa Rajzméretek
A szélesség és magasság attribútumok nem kötelezőek, a kép betöltése után a böngésző automatikusan beállítja az eredeti méretet. Alapvetően ezeket az attribútumokat a következő célokra használják:
- foglaljon helyet egy képnek;
- csökkentse a nagyméretű fényképek méretét;
- javítja a Retina kijelzők képminőségét.
Ha a kép méretei kifejezetten meg vannak adva, akkor a böngésző ezek alapján jeleníti meg a képnek megfelelő üres területet a dokumentum betöltésekor. Ellenkező esetben a böngésző megvárja, amíg a kép teljesen betöltődik, majd módosítja a kép szélességét és magasságát. Ebben az esetben előfordulhat a szöveg újraformázása, mivel kezdetben a kép mérete nem ismert, és automatikusan kicsire lesz állítva.
A kép szélessége és magassága felfelé és lefelé is változtatható. A böngésző automatikusan eltávolítja a plusz képpontokat, vagy fordítva, kiegészíti a hiányzó képpontokat, hogy megfelelő méretű képet kapjon. Az így kapott kép minősége nagymértékben függ a tartalmától, mindenesetre emlékeznünk kell arra, hogy a képet csak filmben lehet részletveszteség nélkül felnagyítani.
A retina kijelzők nagy pixelsűrűséggel és képrészlettel rendelkeznek, így a normál képek kissé elmosódottnak tűnnek. A minőség javítása érdekében a képeket megduplázzuk. Például, ha egy weboldalhoz 400 pixel szélességű fotó szükséges, akkor 800 pixel szélességű képet készítünk, de a szélesség attribútum értékében 400 pixel szélességet hagyunk.
A szélesség és magasság attribútumoknak nem kell együtt járniuk. Ha ezen attribútumok bármelyike nincs megadva, akkor a böngésző automatikusan behelyettesíti a kívánt értéket a kép oldalaránya alapján.
Tekintettel arra, hogy a kép szélességét és magasságát egymástól függetlenül helyettesítjük, a kép függőleges vagy vízszintes nyújtásával szándékosan torzíthatjuk az arányait.
A pixeleken kívül megengedett a százalékos jelölés használata méretként. Ebben az esetben a szélesség a következőhöz viszonyítva van beállítva szülő elem.
Ilyen esetekben nehézségek adódhatnak a magassággal, mert a kép százalékos magasságát csak akkor veszik figyelembe, ha a szülő magassága kifejezetten meg van határozva. Ha a szülőelem magassága semmilyen módon nincs megadva, akkor az olyan bejegyzést, mint a height="100%" figyelmen kívül hagyja.