Kuvamuodot verkkokäyttöön. Graafisten kuvien sijoittaminen Graafiset kuvamuodot web-sivuille

.

Tag sisältää pakollisen src-attribuutin, jonka arvo on kuvan absoluuttinen tai suhteellinen polku:

Tagille Seuraavat attribuutit ovat käytettävissä:

Taulukko 1. Tunnisteen attribuutit

Attribuutti	Kuvaus, hyväksytty arvo
alt	Alt-attribuutti lisää vaihtoehtoista tekstiä kuvaan. Näytetään paikassa, jossa kuva näkyy ennen sen lataamista tai kun grafiikka on poistettu käytöstä, ja näkyy myös työkaluvihjeenä, kun hiirtä viedään kuvan päälle. Syntaksi: alt="kuvan kuvaus" . !}
ristikkäinen alkuperä	Crossorigin-attribuutin avulla voit ladata kuvia toisen verkkotunnuksen resursseista CORS-pyyntöjen avulla. CORS-pyynnöillä kankaalle ladattuja kuvia voidaan käyttää uudelleen. Sallitut arvot: anonyymi - Cross-alkuperän pyyntö tehdään HTTP-otsikon avulla, eikä valtuustietoja lähetetä. Jos palvelin ei anna tunnistetietoja palvelimelle, jolta sisältöä pyydetään, kuva vioittuu ja sen käyttöä rajoitetaan. use-credentials — Cross-origin-pyyntö suoritetaan välittämällä valtuustiedot. Syntaksi: crossorigin="anonymous" .
korkeus	height-attribuutti määrittää kuvan korkeuden px. Syntaksi: height="300" .
ismap	Ismap-attribuutti osoittaa, että kuva on osa palvelimella olevaa karttakuvaa (karttakuva on kuva, jossa on napsautettavat alueet). Kun napsautat karttakuvaa, koordinaatit lähetetään palvelimelle URL-kyselymerkkijonona. Ismap-attribuutti on sallittu vain, jos elementti on elementin jälkeläinen kelvollisen href-attribuutin kanssa. Syntaksi: ismap.
longdesc	Laajennettu kuvan kuvauksen URL-osoite, joka täydentää alt-attribuuttia. Syntaksi: longdesc="http://www.example.com/description.txt" .
src	Attribuutti src määrittää kuvan polun. Syntaksi: src="kukka.jpg" .
koot	Asettaa kuvakoon näyttöasetusten mukaan. Toimii vain, kun srcset-attribuutti on määritetty. Attribuutin arvo on yksi tai useampi pilkuilla erotettu merkkijono.
srcset	Luo luettelon kuvalähteistä, jotka valitaan näytön resoluution perusteella. Voidaan käyttää yhdessä attribuutin src kanssa tai sen sijaan. Attribuutin arvo on yksi tai useampi pilkuilla erotettu merkkijono.
käyttökartta	Usemap-attribuutti määrittää kuvan kuvakartaksi. Arvon tulee alkaa #-symbolilla. Arvo liittyy tunnisteen nimen tai id-attribuutin arvoon
leveys	Leveysattribuutti määrittää kuvan leveyden pikselinä. Syntaksi: width="500" .

1.1. Kuvan osoite

Kuvan osoite voidaan määrittää kokonaisuudessaan (absoluuttinen URL), esimerkiksi:
url (http://anysite.ru/images/anyphoto.png)

Tai suhteellisen polun kautta asiakirja tai juurihakemisto verkkosivusto:
url(../images/anyphoto.png) - suhteellinen polku asiakirjasta,
url(/images/anyphoto.png) - suhteellinen polku juurihakemistosta.

Tämä tulkitaan seuraavasti:
../ - tarkoittaa siirtymistä yhden tason ylöspäin juurihakemistoon,
kuvat/ - siirry kuvien kansioon,
anyphoto.png - osoittaa kuvatiedostoon.

1.2. Kuvan mitat

Ilman kuvan mittoja, piirustus näytetään sivulla sen todellisessa koossa. Voit muokata kuvan mittoja leveys- ja korkeusmääritteillä. Jos vain yksi määritteistä on määritetty, toinen lasketaan automaattisesti kuvan mittasuhteiden säilyttämiseksi.

1.3. Graafiset tiedostomuodot

JPEG-muodossa (Yhteinen valokuvausasiantuntijaryhmä). JPEG-kuvat sopivat ihanteellisesti valokuviin ja voivat sisältää miljoonia eri värejä. Kuvat tiivistyvät paremmin kuin GIF-kuvat, mutta teksti ja suuret yksiväriset alueet voivat muuttua tahroiksi.

GIF-muoto (Graphics Interchange Format). Ihanteellinen sellaisten kuvien pakkaamiseen, joissa on tasavärisiä alueita, kuten logoja. GIF-kuvien avulla voit asettaa yhden värin läpinäkyväksi, jolloin verkkosivun tausta näkyy läpi osan kuvasta. GIF-tiedostot voivat sisältää myös yksinkertaista animaatiota. GIF-kuvat sisältävät vain 256 sävyä, mikä saa kuvat näyttämään läikkyviltä ja väriltään epärealistisilta, kuten julisteet.

PNG-muodossa (Kannettava verkkografiikka). Sisältää GIF- ja JPEG-muotojen parhaat ominaisuudet. Sisältää 256 väriä ja mahdollistaa yhden värin muuttamisen läpinäkyväksi, kun taas kuvat pakataan pienemmäksi kuin GIF-tiedosto.

APNG-muodossa (Animoitu kannettava verkkografiikka). PNG-muotoon perustuva kuvamuoto. Voit tallentaa animaatioita ja tukee myös läpinäkyvyyttä.

SVG-muoto (Skaalautuva vektorigrafiikka). SVG-piirustus koostuu joukosta XML-muodossa kuvattuja geometrisia muotoja: viiva, ellipsi, polygoni jne. Sekä staattista että animoitua grafiikkaa tuetaan. Toimintosarja sisältää erilaisia ​​muunnoksia, alfamaskeja, suodatintehosteita ja mahdollisuuden käyttää malleja. SVG-kuvien kokoa voidaan muuttaa laadun heikkenemättä.

BMP-muoto (Bittikarttakuva). Se on pakkaamaton (alkuperäinen) rasterikuva, jonka malli on suorakaiteen muotoinen pikselien ruudukko. Bittikarttatiedosto koostuu otsikosta, paletista ja grafiikkatiedoista. Otsikko tallentaa tietoja graafisesta kuvasta ja tiedostosta (pikselin syvyys, korkeus, leveys ja värien lukumäärä). Paletti näkyy vain niissä bittikarttatiedostoissa, jotka sisältävät palettikuvia (8 tai vähemmän) ja koostuvat enintään 256 elementistä. Graafiset tiedot edustavat itse kuvaa. Värisyvyys tässä muodossa voi olla 1, 2, 4, 8, 16, 24, 32, 48 bittiä pikseliä kohden.

ICO muoto (Windows-kuvake). Tiedostokuvakkeen tallennusmuoto Microsoft Windowsissa. Windows-kuvaketta käytetään myös kuvakkeena Internet-sivustoilla. Se on tämän muotoinen kuva, joka näkyy selaimessa verkkosivuston osoitteen tai kirjanmerkin vieressä. Yksi ICO-tiedosto sisältää yhden tai useamman kuvakkeen, joiden koko ja väri voidaan asettaa erikseen. Kuvakkeen koko voi olla mikä tahansa, mutta yleisimpiä ovat neliön muotoiset kuvakkeet, joiden sivut ovat 16, 32 ja 48 pikseliä.

2. Merkitse

Tag

Tunnisteella on käytettävissä name-attribuutti, joka määrittää kartan nimen. Tunnisteen name-attribuutin arvo

Elementti

3. Merkitse

Tag kuvaa vain yhden aktiivisen alueen osana asiakaspuolen kuvakarttaa. Elementillä ei ole sulkevaa tunnistetta. Jos yksi aktiivinen alue on päällekkäinen toisen kanssa, ensimmäinen linkki alueluettelosta otetaan käyttöön.

Taulukko 2. Tunnisteen attribuutit

Attribuutti	Lyhyt kuvaus
alt	Asettaa vaihtoehtoisen tekstin aktiiviselle kartta-alueelle.
koordinaatit	Määrittää alueen sijainnin näytöllä. Koordinaatit annetaan pituusyksiköissä ja erotetaan pilkuilla: varten ympyrä— ympyrän keskipisteen ja säteen koordinaatit; varten suorakulmio— vasemman ylä- ja oikean alakulman koordinaatit; varten monikulmio— monikulmion kärkien koordinaatit vaaditussa järjestyksessä; kuvion loogista täydennystä varten on myös suositeltavaa ilmoittaa viimeiset koordinaatit, jotka ovat yhtä suuria kuin ensimmäinen.
ladata	Täydentää href-attribuuttia ja kertoo selaimelle, että resurssi tulee ladata heti, kun käyttäjä napsauttaa linkkiä, sen sijaan, että se esimerkiksi avattaisiin ensin (kuten PDF-tiedosto). Määrittämällä attribuutille nimen annamme siis nimen ladatulle objektille. Attribuutin käyttö on sallittua määrittämättä sen arvoa.
href	Määrittää linkin URL-osoitteen. Absoluuttinen tai suhteellinen linkkiosoite voidaan määrittää.
hreflang	Määrittää liittyvän verkkoasiakirjan kielen. Käytetään vain yhdessä href-attribuutin kanssa. Hyväksytyt arvot ovat lyhenne, joka koostuu kirjainparista, joka ilmaisee kielikoodin.
media	Määrittää minkä tyyppisille laitteille tiedosto optimoidaan. Arvo voi olla mikä tahansa mediakysely.
rel	Laajentaa href-attribuutin tiedoilla nykyisen ja siihen liittyvän asiakirjan välisestä suhteesta. Hyväksytyt arvot: vaihtoehtoinen - linkki asiakirjan vaihtoehtoiseen versioon (esimerkiksi sivun painettuun muotoon, käännökseen tai peilikuvaan). tekijä — linkki asiakirjan tekijään. kirjanmerkki - Pysyvä URL-osoite, jota käytetään kirjanmerkkeihin. ohje - linkki apuun. lisenssi - linkki tämän web-asiakirjan tekijänoikeustietoihin. seuraava/edellinen - osoittaa yksittäisten URL-osoitteiden välisen suhteen. Tämän merkinnän ansiosta Google voi määrittää, että näiden sivujen sisältö liittyy toisiinsa loogisessa järjestyksessä. nofollow - estää hakukonetta seuraamasta tietyn sivun tai tietyn linkin linkkejä. noreferrer - ilmaisee, että linkkiä seurattaessa selain ei saa lähettää HTTP-pyynnön otsikkoa (Referrer), joka tallentaa tiedot siitä, miltä sivulta kävijä tuli. esihaku - osoittaa, että kohdeasiakirja tulee tallentaa välimuistiin, ts. Taustalla toimiva selain lataa sivun sisällön välimuistiinsa. haku - Osoittaa, että kohdeasiakirja sisältää hakutyökalun. tag - määrittää avainsanan nykyiselle asiakirjalle.
muoto	Määrittää aktiivisen alueen muodon kartalla ja sen koordinaatit. Voi ottaa seuraavat arvot: rect — suorakulmainen aktiivinen alue; ympyrä — aktiivinen alue ympyrän muodossa; poly — monikulmion muotoinen aktiivinen alue; oletus - aktiivinen alue kattaa koko kuvan alueen.
kohde	Määrittää, minne asiakirja ladataan, kun linkkiä napsautetaan. Hyväksyy seuraavat arvot: _self — sivu ladataan nykyiseen ikkunaan; _blank — sivu avautuu uuteen selainikkunaan; _parent — sivu ladataan pääkehykseen; _top - sivu latautuu koko selainikkunassa.
tyyppi	Määrittää linkkitiedostojen MIME-tyypin, ts. tiedostopääte.

4. Esimerkki kuvakartan luomisesta

1) Merkitse alkuperäinen kuva halutun muotoisiksi aktiivisille alueille. Alueiden koordinaatit voidaan laskea kuvankäsittelyohjelmalla, esim. Adobe Photoshop tai Maali.

Riisi. 1. Esimerkki kuvan merkinnöistä kartan luomista varten

2) Aseta kortin nimi lisäämällä se tagiin

Jpg" alt="flowers_foto" width="680" height="383" usemap="#flowers"> !}
Riisi. 2. Esimerkki kuvakartan luomisesta, kun napsautat hiiren osoitinta kukan päällä, siirryt sivulle, jolla on kuvaus

Grafiikka ja liikenne

Vaatimukset web-sivujen suunnittelun kauneudelle ja ilmeisyydelle ovat jatkuvassa ristiriidassa nykyaikaisen webhotellin teknisten ominaisuuksien kanssa. Siksi verkkosivujen suunnittelijan on tultava välittäjäksi suunnittelijan ja käyttäjän välillä ja pidettävä tiukasti tasapainoa visuaalisen houkuttelevuuden ja tiedon kohtuullisen toimitusnopeuden välillä verkossa. Tämän ongelman ratkaisemiseksi onnistuneesti sinun on tunnettava kaikki Internetissä käytetyt grafiikkamuodot, ymmärrettävä niiden väliset erot, niiden käyttöalueet ja käyttöominaisuudet.

Ymmärtääksesi Internetissä hyväksyttyjen muotojen ja protokollien suuren määrän ja luodaksesi oman sivusi, sinun on valittava, mikä sopii parhaiten tiettyihin tarkoituksiin. Jotkut muodot voivat olla vain yhdelle selaimelle ominaisia, kun taas toiset vaativat erityisen laajennuksen. Olemme valinneet useista eri muodoista vain ne, joita suosittujen sivustojen kirjoittajat käyttävät useimmin ja jotka käyttäjät hyväksyvät.

GIF ja JPEG ovat kaksi suosituinta grafiikkamuotoa, joista on pitkään tullut de facto standardeja käytettäväksi WWW:ssä. Molemmat ovat melko yleismaailmallisia, useimmat selaimet luettavissa eivätkä vaadi erityisiä ohjelmistoja (tai lisämoduuleja). GIF ja JPEG ovat rasterikuvamuotoja, jotka vastaavasti määräävät kiinteän muodon (resoluution), kun tällaisia ​​kuvia näytetään näytöllä. Kun yrität skaalata (joissakin selaimissa), rasterikuvien (pikselikuvien) laatu heikkenee merkittävästi. 8-bittisessä (256 väriä) GIF-muodossa väripaletin valinta on myös suuri ongelma.

Vektorigrafiikkamuodot ovat paljon houkuttelevampia käytettäväksi verkossa. Toisin kuin bittikartat, vektorigrafiikka perustuu datan matemaattiseen (geometriseen) esitykseen. Tällaiset kuvat ovat huomattavasti pienempiä tallennus-/siirtotilavuudeltaan, helposti skaalautuvia eivätkä käytännössä menetä laatua minkään muuntamisen aikana. Valitettavasti vektoriformaatteja käytetään vielä vähän Internetissä, mutta standardit on jo muodostettu ja niiden pitäisi kiinnostaa suunnittelijoita.

Useita vektoristandardeja on ehdotettu suhteellisen hiljattain, ja PGML- ja VML-formaatit ovat parhaillaan World Wide Web Consortiumin (W3C) harkinnassa. VML:ää edistävä Macromedia on kuitenkin pitkään avannut Shockwave Flash -vektorimuotonsa muille kehittäjille ja ottanut käyttöön lisämoduuleja tämän muodon grafiikan katseluun suosittuihin selaimiin.

Uudet tuotteet eivät kuitenkaan välttämättä ole parempia kaikkiin sovelluksiin. Yleisimpiä Internetissä julkaistuja kuvia ovat edelleen digitaaliset valokuvat, piirustukset ja skannatut kuvat, jotka ovat erittäin työvoimavaltaisia ​​ja tuskin suositeltavaa muuntaa vektorimuotoon.

Siksi muodon valinta riippuu viime kädessä tavoitteistasi, ja sinun on päätettävä, mitkä kuvat sopivat parhaiten kohdeyleisöllesi.

GIF - muoto suunnittelua varten

CompuServe tarkoitti alun perin GIF-muotonsa interaktiivisille sovelluksille, jotka liittyvät henkilökohtaisen tietokoneen vakiografiikan rajoitettuihin ominaisuuksiin. Se oli alun perin 4-bittinen ja sitten 8-bittinen rasterimuoto määritetyllä väripaletilla, joka tuki enintään 256 väriä. Yksi muodon merkittävistä eduista on, että kuvat voidaan indeksoida tiettyyn palettiin (värisarjaan), kun taas JPEG-kuvia ei voida "lukita" palettiin, eikä niiden "oikea" näyttö ole aina mahdollista. Tämä ominaisuus on erityisen tärkeä kehittäjille, jotka käyttävät paletin indeksointia optimoidakseen kuvien siirron kaikille alustoille (joko PC, Mac, Web-TV tai muut), riippumatta siitä, minkä värisyvyyden kanssa tietty järjestelmä toimii. Tämä monipuolisuus saavutetaan rajoitetulla 216 värin paletilla, joka sisältää kaikki yleiset värit, joita käytetään sekä Windowsissa että esimerkiksi MacOS:ssa. Sivuston suunnittelu yleispaletilla takaa yhtenäisen, eri alustojen ja laitteistosta riippumattoman näytön. Lisäksi GIF-muoto käyttää häviötöntä pakkausmallia (yksinkertaisella toistokoodausalgoritmilla: samanvärinen tavujen sarja korvataan kahden tavun sanalla, joista toinen sisältää varjostuskuvion ja toinen määrittää numeron toistoa), jotta tässä muodossa olevat graafiset tiedot eivät menetä tietoja pakkaus- ja palautusprosessin aikana.

Juuri näiden sisäänrakennettujen värirajoitusten vuoksi GIF-muotoa voidaan kuitenkin käyttää vain kuville, joissa on rajoitettu määrä värejä - kuten mustavalkokaaviot tai ne sisältävät suuria alueita yhtä väriä, kuten esim. sarjakuvakehyksiä tai digitaalisia piirustuksia yhtenäisillä väreillä. Tietysti voit tallentaa minkä tahansa kuvan GIF-muodossa käyttämällä ns. ditheringiä ja siten saada melko kunnollista laatua, mutta tässä tapauksessa vaarana on, että tiedostokoko kasvaa merkittävästi edellä kuvatun muistin pakkaamisen jälkeen (degeneroituneessa tapauksessa kun kuvassa ei ole yhtäkään vierekkäistä toistoa, saat täsmälleen kaksinkertaisen tiedoston koon pakkaamattomaan alkuperäiseen verrattuna).

Näin ollen GIF-muodon tärkeimmät edut ovat häviöttömän pakkauksen käyttö ja yhtenäisten värialueiden taloudellinen säilyttäminen selkeällä rajalla ja tiukoilla värisiirtymillä. JPEG-muoto eroaa kuvatusta siinä, että pakkaustasosta riippuen kiinteät alueet tuhoutuvat ja terävät värisiirtymät tasoittuvat tai sumentuvat.

Pääkriteeri GIF-muodon valinnassa: jos piirsit itse kuvan grafiikkapaketissa, kuten Photoshopissa tai Painterissä, jossa on suuria alueita samaa väriä, tai käsittelit olemassa olevaa kuvaa ja haluat säilyttää korkean kontrastin (tarvittava esim. tekstiä), tallenna se sitten tässä muodossa (tämä koskee ensisijaisesti mustavalkoisia tai huonovärisiä piirustuksia).

Käytä JPEG-muotoa valokuville, videoille tai muille täysvärikuville, joissa käytetään tasaisia ​​värisiirtymiä (gradientteja).

On myös tärkeää muistaa, että jos yrität tallentaa jatkuvasävyisiä kuvia GIF-tiedostoina, joudut todennäköisesti hylkäämään niin paljon tietoja kuvan valmisteluprosessissa (kun muunnat sen kiinteäksi palettiksi) ja GIF-pakkauksen. Menetelmä on niin tehoton, että menetät myös taloudellisesti (sekä työvoimakustannusten että tiedostokoon suhteen).

GIF-muoto tarjoaa muun muassa ns. lomitetun ulkonäön, joka auttaa käyttäjiä, joilla on hitaita kanavia heti vastaanoton alussa, arvioimaan kuvan sisältöä (vaikutus on samanlainen kuin asteittainen piirtäminen pois päältä). tarkennuskuva) ja sen täydelliseen lähettämiseen tarvittava aika, ja sen seurauksena hyväksy päätös, jatkaako sen ottamista vai onko parempi lopettaa sen ottaminen. Toisin kuin progressiivinen JPEG, vaikutus tässä on kuitenkin enemmän psykologinen kuin todellinen (katso kuva).

Muista myös yksi tärkeä GIF-muodon etu, jota joissain tapauksissa ei voida välttää sen puutteineen, on läpinäkyvyystuki (GIF89a-laajennus), joka mahdollistaa siluetin näyttämisen ei-suorakulmaisilla ääriviivoilla olemassa olevalle taustalle. . Läpinäkyvyys GIF-muodossa on toteutettu primitiivisesti - yksi väri (yleensä tausta) on määritetty läpinäkyväksi. Tätä etua käytetään usein luotaessa painikkeita ja kuvakkeita sivun suunnittelussa (JPEG ei tarjoa tukea läpinäkyvyydelle).

Lopuksi voimme sanoa seuraavaa: GIF - paras valinta tehokkaan kompromissin saavuttamiseksi olemassa olevien laitteistojen ja ohjelmistojen välillä, ja kyky indeksoida 8-bittinen GIF-kuva 216 yleisväriseksi on välttämätöntä, kun kuvat on tarkoitettu näytettäväksi useilla selaimilla ja tuntemattomilla alustoilla.

JPEG - muoto valokuville ja videokehyksille

JPEG-muoto on saanut nimensä lyhenteestä Joint Photographic Experts Group Committee, joka loi tämän standardin 80-luvun lopulla ja 90-luvun alussa. JPEG-muoto perustuu häviölliseen pakkausalgoritmiin (diskreetti kosinimuunnos), joka jakaa kuvan alueiksi (yleensä 8x8 pikselin neliöiksi), joissa värijakauma korvataan matemaattisella funktiolla ja vain tämän funktion kertoimet tallennetaan. voit rekonstruoida sen ulkonäön. Luonnollisesti kohtaat jonkin verran laadun heikkenemistä (riippuen kuvan korvaavan toiminnon monimutkaisuudesta) ja kunnostuksen jälkeen et saa enää todellista kuvaa, vaan sen matemaattista "korviketta". Alkuperäisen laadusta ja pakkausasteesta riippuen laadun heikkeneminen voi kuitenkin olla katsojalle täysin näkymätöntä. Mutta JPEG-muodon tärkein etu GIFiin verrattuna on, että vaikka GIF on vain 8-bittinen (256 väriä), JPEG on 24-bittinen ja voi näyttää jopa 16,7 miljoonaa väriä.

Tästä syystä täysivärinen JPEG toistaa luonnollisesti huomattavasti enemmän videoinformaatiota kuin GIF. Tämä muoto sopii parhaiten kuville oikea elämä- skannatut kuvat tai digitaaliset valokuvat sekä digitoidut videokehykset tai renderoidut kohtaukset kolmiulotteisesta tietokonegrafiikasta.

Toinen JPEG:n etu on, että toisin kuin GIF, sen avulla voit asettaa itsenäisesti lähdekuvan pakkausasteen, mikä mahdollistaa tarvittavan tasapainon koon ja laadun välillä.

JPEG-pakkaussuhteet vaihtelevat suuresti käytetyn kuvankäsittelyohjelman mukaan, mutta Web-sivuilla käytetään tyypillisesti 10:1- tai 20:1-suhteita (ilmaistuna suhteessa alkuperäiseen kuvaan tilavuudesta), jotka yleensä tarjoavat hyväksyttävän laadun. Voit kuitenkin pakata kuvan äärimmäisiksi arvoiksi 100:1 (tietysti laadun heikkeneminen).

Joten kun työskentelet valokuvan kanssa JPEG-muodossa, sinulla on mahdollisuus tallentaa 24-bittinen kuva 16,7 miljoonalla värillä, ja huolimatta laadun heikkenemisestä pakkaamisen aikana, se on silti paljon yhdenmukaisempi alkuperäisen kanssa kuin 256-bittinen kuva. väri GIF. suorituskyky. Tässä tapauksessa väistämätön laadun heikkeneminen riippuu voimakkaasti alkuperäisen kuvan koosta, laadusta ja tyypistä.

Lisäksi JPEG mahdollistaa ns. progressiivisen näytön määrittämisen, eli silloin kun latauksen aikana kuvasta tulee välittömästi "karkea" esitys näytölle, joka parantuu asteittain lisätietojen vastaanoton myötä (n. Samalla saat tarvittavan käsityksen lähetettävän materiaalin olemuksesta jo ennen latauksen valmistumista ja keskeytät prosessin missä tahansa vaiheessa, mikä säästää merkittävästi aikaa verkkosisällön katseluun).

Voit käyttää näitä työkaluja haluamallasi tavalla, ja tällainen vaiheittainen ilmentymä voi olla hyvä apu taistelussa kanavien ruuhkautumista vastaan. Progressiivisen JPEG:n (toisin kuin lomitetun GIF:n) ainoa ongelma on, että vanhemmat selaimet eivät välttämättä tue sitä.

PNG - yleinen rasteriuutuus

Seuraavan sukupolven rasteriformaatit, PNG, hyödyntävät sekä JPEG:n että GIF:n parhaat ominaisuudet ja lisää oman ainutlaatuisen lähestymistapansa kuvien esitystapaan, mikä mahdollistaa saman kuvan eri versioiden upottamisen yhteen tiedostoon matalalle, keskisuurelle ja korkealle. päätöslauselmia.

PNG (Portable Network Graphics) -muoto on suhteellisen uusi rasterigrafiikkamuoto, jonka W3C-konsortio on hyväksynyt standardiksi ja jonka pitäisi vähitellen korvata molemmat "vanhentuneet" tiedostomuodot: sekä GIF että JPEG. PNG tarjoaa väriindeksoinnin (jopa 256 väriä), tuen sekä 24- että 48-bittisille väreille (True-Color) ja työskentelyn läpinäkyvyyskanavalla (alfa-kanava), ja se on paljon tehokkaampi kuin perinteiset rasterikuvien tallennusmuodot. .

Täysvärikuvan pakkausalgoritmi on laadultaan parempi kuin JPEG, ja rajoitetun indeksoidun paletin (jopa 256 väriä) tuella uusi muoto tarjoaa häviöttömän pakkauksen 10-30 % paremman kuin GIF-muodossa toteutettu. mikä tekee siitä optimaalisen käytettäväksi joka tapauksessa. Valitettavasti uusi muoto ei salli sinun uhrata kuvan laatua vastineeksi korkeammista pakkaussuhteista, kuten JPEG.

Läpinäkyvyystuki PNG-muodossa, toisin kuin GIF, on täysimittaista, eli voit rakentaa läpikuultavia kuvia tai reunoja, joten "puhtaiden" reunojen ongelma, joka on niin vaikea ratkaista käytettäessä läpinäkyvyyttä GIF-tiedostossa, on helppo ratkaista. tässä.

Kaikista PNG:n tarjoamista parannuksista huolimatta uusi muoto tulee kuitenkin voimaan vasta, kun verkkosivustojen suunnittelijat ja valmistajat omaksuvat sen ohjelmisto sekä kuvien visualisointiin uudessa muodossa että niiden valmistelemiseen julkaisua varten. Sillä välin on melko vaikeaa löytää PNG-kuvia mistään Internetistä, vaikka tämän muodon tuki on äskettäin sisällytetty sekä Netscape Navigatoriin että Microsoft Internet Exploreriin.

Ja vaikka he uusimmat versiot ja tukevat PNG:tä, he tekevät niin hyvin rajoitetulla tavalla. Tällä hetkellä ainoa ratkaisu käyttäjille, jotka haluavat nähdä koko PNG-tiedoston, on itse asennus ulkoinen moduuli (kuten PNG Live).

Ilmeisesti kehittäjät viivyttelevät ja odottavat käyttäjien siirtyvän kokonaan uusiin muotoihin. Terve konservatiivisuus ei ole koskaan haittaa, mutta suosittelemme kuitenkin, että siirryt vähitellen PNG-muotoon ja korvaat ainakin kaikki olemassa olevat GIF-muodon käyttötavat.

Vektoriesitys

Sekä JPEG, GIF ja PNG ovat rasterimuotoja, jotka perustuvat kuvan erilliseen (pikseli- tai pisteesitykseen). vektorimuodot perustuvat matemaattisiin kaavoihin (kuvioiden geometrinen esitys). Vektorigrafiikka tarjoaa merkittäviä etuja rasteriin verrattuna, erityisesti mitä tulee kaavioihin, tekstiin ja teolliseen grafiikkaan (ja kustannustehokkaat muodot ovat erittäin tärkeitä Internetissä).

Joten ensimmäinen etu on merkittävä pienempi koko vektorikuvat verrattuna bittikarttoihin, koska kuvan jokaista yksittäistä pikseliä ei kuvata, vaan koko kuva (esimerkiksi ympyrän määrittelemiseksi sinun on välitettävä 3-4 numeroa: säde, keskikoordinaatit ja ehkä tyyppi tai viivan paksuus ja sen ominaisuudet ). Vektoriesitystä kuvaavat matemaattiset kaavat vievät paljon vähemmän tilaa kuin yksittäiset pikselit ja niiden attribuutit.

Toinen tärkeä vektoriesityksen etu on kyky skaalata kuvaa (tai sen osia) lähes rajattomasti ilman, että kuvan resoluutio tai selkeys heikkenee. Vektoriesitystä ei vaadita mukauttamaan tiettyyn palettiin, alustaan, laitteistoon tai suunnitteluominaisuuksiin. ja pakkausjärjestelmän ja näytön laadun koordinointi tapahtuu ilman ongelmia.

Jokaista rasterikuvaa ei kuitenkaan voida muuntaa vektorimuotoon (esim. valokuvia, skannattuja kuvia tai rasteripiirroksia on vaikea vektoroida). Mutta on yksinkertaisesti typerää muuntaa erityisesti valmistetut vektoripiirrokset (kuten viivapiirrokset, piktogrammit, tekniset kuvat, kartat, tietografiikat ja muut, jotka ovat historiallisesti vektoreita) rasterimuotoon julkaistavaksi Internetissä, mitä tapahtuu kaikkialla nykyään.

Näytön ongelmat vektorigrafiikkaa Internetissä syntyi, koska ei ollut muuta näyttötapaa kuin rasteri, ja sisäänrakennettu moduuli, joka ilmestyi tiedostojen näyttämiseen PDF-muodossa, ei tarjonnut riittävää joustavuutta ja vaati kaiken sisällön tallentamista yhteen muotoon - PDF.

Jotta vektorigrafiikka voidaan upottaa saumattomasti perinteiseen HTML-muotoon ilman lisäohjelmistoja, W3C-standardikomitea harkitsee parhaillaan kahta uutta vektoristandardia: PGML (Precision Graphics Mark-up Language) ja VML (Vector Mark-up Language). ). PGML:ää tukevat Adobe Systems, IBM, Netscape ja Sun Microsystems, ja VML:ää tukevat Microsoft, Hewlett-Packard, Autodesk, Macromedia ja Visio. Molemmat standardit perustuvat XML-kuvauskielen laajennuksiin, joita mainostetaan käytettäväksi verkossa HTML:n seuraajana ja joita W3C suosittelee tulevaa käyttöä varten.

Mutta tällä hetkellä mikään selaimista ei tue mitään vektorigrafiikkastandardeja, vaikka lisämoduuleja (laajennuksia) on jo saatavilla. Suosituimpia tapoja näyttää staattisia vektorikuvia verkossa nykyään ovat Macromedian SWF (Shockwave Flash) -muoto ja edelleen aliarvostettu Xara Flare -muoto.

Flare on hyvä ratkaisu, joka mahdollistaa vektorikuvien sisällyttämisen, joiden avulla voit lisätä sivun yksityiskohtia lähes loputtomiin, kun taas niiden koko on verrattavissa Shockwave Flash. Tämä ei tarkoita sitä, että lisämoduulien käyttäminen kuvien katseluun olisi niin hankalaa, mutta kun käytät tällaisia ​​työkaluja sivuillasi, muista varoittaa käyttäjää tästä ja antaa hänelle mahdollisuus ladata vastaava moduuli ennen kuin hän siirtyy sivulle. joka sisältää nämä elementit. Lyhyellä aikavälillä tämä tietysti hidastaa uusien käyttäjien selausprosessia, mutta vähitellen saat yhä enemmän kannattajia, kunnes vastaavat työkalut ovat vihdoin mukana seuraavassa selaimen versiossa eivätkä aloittelijat enää tarvitse lisäosia. moduuli.

Animaatio, interaktiivisuus ja vuorovaikutus

Yleisesti ottaen GIF-kuvat voidaan järjestää erikoispinoksi yhdeksi tiedostoksi ja tuloksena oleva "elokuva" (flipbook) voidaan toistaa luomalla yksinkertainen rasterianimaatio. Sekä Netscape että Microsoft ovat tukeneet animoituja GIF-tiedostoja selaimensa kolmannesta versiosta lähtien, joten niiden esiintymistä verkossa on nyt vaikea välttää. Lukuisat GIF-animaattorit, joiden avulla voit luoda samanlaisia ​​GIF-pinoja, ovat yleisiä (sekä kaupallisia että julkisia). GIF-muodon "animointi" voi kuitenkin johtaa hallitsemattomiin tiedostokokoihin, koska tällaisen pinon jokainen "kerros" on yksittäinen GIF-kuva, joten tyypillinen 15 kuvaa sekunnissa tietokoneanimaatio voi "tuottaa" lukemattoman määrän kilotavuja.

Yhdessä Javan tai JavaScriptin kanssa voit luoda interaktiivista animaatiota, joka reagoi käyttäjälle.

Katsotaan nyt muita ratkaisuja web-animaatioon ja interaktiiviseen käyttäjävuorovaikutukseen, ja päärooli tässä on edelleen Macromedialla, joka on jo pitkään tullut markkinoille Shockwave- ja Flash-ohjelmillaan ja kehittää jatkuvasti tuotteitaan lisäämällä niiden tehokkuutta sen mukaisesti. käyttäjien ja suunnittelijoiden pyynnöstä.

Alun perin Macromedia Directorin muotoon luotu Shockwave on protokollaperhe, jonka ensisijaisena tavoitteena on tuottaa interaktiivista ja graafista sisältöä, joka on luotu erityisesti Internetissä käytettäväksi. Ja Shockwave Flash on yleensä ainutlaatuinen instrumentti ja yksi parhaista parhaita tapoja luodaksesi animaation ja julkaistaksesi sen Web-sivulla. Shockwave Flash tuottaa erittäin pieniä tiedostoja (koska se käyttää pääasiassa vektoriesitysmuotoa) ja on muihin formaatteihin verrattuna kätevin valmistelun näkökulmasta.

Kun julkaiset tällaista animaatiota sivuillasi, älä unohda ilmoittaa tästä käyttäjälle, jotta hän voi hankkia lisämoduulin etukäteen ja valmistautua ikävään latauksen odottamiseen. Kuitenkin uusimmat versiot sekä Netscape Navigatorista että Internet Explorer sisältää katselumoduulit Flash-animaatioita varten jopa peruspaketissa. Netscape on vahvistanut, että Navigatorin tulevissa versioissa on tämä tuki Flashille, jopa kooditasolla.

Lopullinen päätös on sinun

Suhtautuminen verkkosisällön esittämiseen on siis muuttumassa, uusia tietomuotoja ja niitä tukevia kehitystyökaluja ilmaantuu. Vanhemmat formaatit (GIF ja JPEG grafiikan esittämiseen) ovat kuitenkin edelleen melko suosittuja. Lähes kaikki selaimet tukevat niitä, ja useimmilla kehittäjillä on laaja kokemus niiden kanssa työskentelystä. On tärkeää käyttää oikeaa muotoa tiettyyn tarkoitukseen, jotta voidaan varmistaa tasapaino kuvanlaadun ja tiedostokoon välillä. Esimerkiksi yksi kuva GIF-muodossa voi viedä enemmän tilaa ja tuottaa heikomman tuloksen kuin JPEG-muodossa, kun taas toisessa kuva on päinvastoin.

Rasterikuvia esitettäessä PNG on kuitenkin suositeltava muoto, ja jos mennään vielä pidemmälle ja yrität käyttää vektorikuvaa, Macromedian Shockwave Flash -muoto on palveluksessasi tänään.

SWF (Shockwave Flash) -muoto ei ole yleisesti käytetty, vaan sisäinen vektorimuoto Flash-ohjelmat Macromedia (katso "Oppitunnit Macromedia Flash"CD-ROM-levyllä), joten saadaksesi oman kuvan tai animaation, sinun on ostettava sopiva multimediapaketti Macromedialta ja käyttäjän on asennettava lisämoduuli tuloksen visualisoimiseksi. Siten, jotta voit yksinkertaisesti sijoittaa vektorikuvan Web-sivullesi, sinun on voitettava useita haittoja.

Muut vektorimuodot ovat kuitenkin tulossa ja niistä tulee pian vakiomuotoja.

ComputerPress 5"1999