Egy kép felér ezer szóval, tartja a mondás. Ilyen az agyunk, jobban szereti látni a dolgokat. Tudták ezt a HTML kidolgozói is, így lehetőségünk van "feldobni" a lapunkat valamilyen vizuális sokkhatással. ;-) Egy weblap kép nélkül (ma már) elég szegényesen hat.
Képformátumból is akad pár tucat, szerencsére itt látszik a kiút. A két legelterjedtebb (és mellesleg elég tömör) tárolási szabvány az elfogadott a HTML világában: a GIF és a JP(E)G. (A UNIX miatt az xbm is, de ez lényegtelen.)
A GIF az "öregebb". Annyit érdemes tudni róla, hogy a tömörítő eljárása veszteségmentes, azaz a képben nem jelennek meg hibák a konverzió során. Ebből persze következik, hogy tömörségének határai vannak. Mégsem ez a legnagyobb baj, hanem az, hogy csak 256 színt tud. Ezt ugyan nagyobb palettából választhatja ki, de egyszerre akkor is csak ennyi szín lehet fent -- s ez kevés lehet egy finom színátmenetnél... Ábrákhoz, rajzokhoz viszont kitűnő.
A JPEG kimondottan fényképekhez van idomítva. Nagyon tömör, annyira, hogy csal: nem egészen ugyanazt a képet tárolja, mint amit megadtunk neki. Az emberi szem ugyanis toleráns és becsapható. Bizonyos hibákat egyszerűen nem lát meg, ezeket tehát büntetlenül el lehet követni. A JPEG cserébe kis méretet és 24 bites valósághű színvisszaadást biztosít. Jobbat, mint amit a legtöbb monitor valaha is tudni fog... (Rossz paraméterezéssel persze el lehet rontani szemmel láthatóan is a képet.) A JPEG nem jó a rajzokhoz, ott csúnyán hibázik és ehhez képest keveset karcsúsít az állomány méretén (esetleg még növeli is azt).
A trükkös animated GIF az a fajta móka, amikor az állókép megmozdul. A GIF89 tudja ezt, több képet egymásba fonva öt-tíz fázisú "animáció" hozható létre, egyszeri lefutással, vagy végtelen ciklusban (utóbbitól némelyik böngésző összeomlik egy idő után).
Van interlaced GIF is, ez azt jelenti, hogy a kép először csak úgy nagyjából jelenik meg, aztán finomodik. Ha épp sietünk, a durva "vázlatból" is eldönthetjük, érdemes-e várnunk a képre -- s ez jó!
Érdekes és gyakran használt lehetőség a transparent GIF, azaz a háttérszín átlátszóvá tétele. Ha a semleges, egyszínű hátteret átlátszóvá alakítjuk, a kép még inkább része lesz a lapnak, a keret nem árulkodik bántón.
Az ismertetett lehetőségeket különféle segédprogramok (pl. whirlgif) képesek megvalósítani. (Lásd a függeléket!)
Ha már kiválasztottuk a képe(ke)t, két lényeges dolog tisztázandó:
Könyörögve kérek mindenkit: böhöm nagy képet NE tegyen fel huszasával a lapjára, mert nincs az a birka, aki türelemmel ki bírná várni! Azaz: mértékletesség!
A kép sem tárolás, sem megjelenés szempontjából ne legyen túl nagy. Egy irgalmatlan "borzalom x rettenet" méretű kép egyszerűen nem fér el az ablakban -- akkor meg mit érünk vele? A legtöbb megjelenítő legfeljebb 640x600 pixel nagyságú (azaz nagyjából az SVGA monitor méretének megfelelő, annál kicsit keskenyebb) ablakkal dolgozik, aki meg Windows alatt nézi, amit néz, az még ennél is kevesebbet lát.
A képet "meg kell komponálni", azaz el kell beszélgetnünk önmagunkkal, hogy kell-e ez a kép egyáltalán, és ha kell, ekkorában kell-e, mert esetleg kisebben is jó. Nem könnyű döntés, a kicsinyítés ugyanis (sajnos) minőségromlással jár. A kép minősége lehetőleg haladja meg a Junoszty ipari szabvány ;-) követelményeit -- mi tudjuk, mi van a képen, de hátha más nem! Lehet, hogy vágni kell a képből, lehet, hogy egy kicsit világosítani, vagy sötétíteni, azaz akad vele munka. Ezt számos programmal el lehet végezni, a függelékben az XV (UNIX), a PhotoStyler (Windows) és a Graphic Workshop (DOS) programokat ismertetem röviden.
A kész képet el kell helyezni a lapon valahogy és valahova. Természetesen csak a törzsben. Figyelem! A kép nem része a dokumentumnak, nem belerakjuk, csak jelezzük, hogy ott lesz. Az elhelyezés a böngésző feladata. Van ennek egy kellemetlen következménye: ha el akarunk "lopni" egy oldalt (miért ne tennénk, hiszen ezt szabad, ha a gazdája nem tiltja), akkor annak képeit külön-külön még le kell szedegetni... A Netscape-ben ezt a jobb egérgombbal a képre kattintva tehetjük meg. Léteznek ügyes segédprogramok, amelyek már képesek minden elemet együtt elmenteni. Mások anyagait azonban nem tulajdoníthatjuk el, azaz egy nekünk tetsző lapot ne tegyünk ki sajátunkként, mert nem illik.
A lapon a képet az <img src="valami.gif"> leíróval jelezzük. Ez persze csak a legegyszerűbb eset, itt a képállomány ugyanott van, ahol a lap (mert lehet más könyvtárban, de más gépen is!) és semmilyen egyéb igényünk nincs.
Pedig lehetne! Tehetjük a képet balra (alapértelmezés) vagy jobbra. Igazíthatjuk a szöveget a felső széléhez, az aljához, vagy középre. Ez lényeges, ugyanis a kép egy szövegsor magas a böngésző logikája szerint. A kép mellé több sort írni tehát első nekifutásra nem lehet! (Azért van rá megoldás.)
Az elhelyezésre vonatkozó utasítást az img után elhelyezett align= mögé írjuk, mint az angolok: jobbra right, balra left, föl top, le bottom, középre middle. Jakab képe így válik a lap részévé:
Ez a csúnya ember <img align=bottom src="jakabarc.jpg"> vagyok én.
Adhatunk a képnek más méretet is, mint amekkora valójában, ezt vagy pixelben (akkor mindig ugyanakkora lesz), vagy százalékban (az ablak méretétől függ) adjuk meg. Jakabnak igen nagy az arca ;-), úgyhogy javítunk egy picit:
Ez a csúnya ember <img align=bottom src="jakabarc.jpg" width=20% height=20%> vagyok én.
Adhatunk a képnek vékony vagy vastag keretet a border= beszúrásával. A keret méretét pixelben adjuk meg, a 10 már szép széles.
Vannak, akik az információs szupersztrádán gyalogriksán közlekednek, grafikus felület nélkül. Ők a legszebb képünkből is csak ennyit látnak:
[IMAGE]
No, ez nem sok. Hogy ők se maradjanak ki semmiből és legalább külön letölthessék a képet (erre módjuk van), ha "egyenesben" nem láthatják, az előbbi kiírást módosíthatjuk az alt= beszúrásával. Az egyenlőségjel mögé rövid magyarázatot írunk:
<img src="cindycra.jpg" alt="Cindy Crawford in action...">
Holtbiztos, hogy letöltik!... ;-)
A képekkel való játék ezzel persze még nem merült ki. Egy fontos és a lap kinézetét döntően befolyásoló tényező
Itt a kép nem valahova kerül a lapon, hanem a lap "papírja" lesz, erre írunk majd. Olyan, mint egy tapéta, csak nincs neki vége.
Gondoljuk meg, ez mivel jár! A háttérbe álmodott kép (bizony) nem lehet túl éles vagy kontrasztdús. Nem ütheti agyon ugyanis a lapon a szöveget. A böngészők betűi túl könnyen olvashatalanná válnak... Legyen a kép vagy sötét és írjunk rá fehér vagy pasztellszín betűkkel, vagy legyen világos, amin a sötét "tinta" mutat. Kísérletezni kell.
A háttérkép témája alapvetően kétféle lehet: vagy egy elmosódott hangulatfestő fénykép, vagy valami imétlődő ákom-bákom (pl. buborékok, kockás füzetlap, márvány-utánzat). A böngésző veszi ezt a képet és annyiszor teszi egymás mellé és alá, ahányszor a lapon lévő egyéb anyag (képek, szöveg) megköveteli. Ez fényképnél lehet kínos. Ugyanis (megint csak) nem tudjuk, hogy az aki olvassa a lapunkat, mekkora ablakot használ és mekkora betűket (ha kisebbet, mint mi, lehet, hogy nem is tudja a kép miatt elolvasni!). Az általunk feltett fénykép vagy csak félig-negyedéig látszik, vagy kétszer-háromszor is ott van... Nehéz igazán jó hátteret kitalálni! Egy tipp: keressünk olyan képet, amelynek szélei illeszkednek. Azaz a képet önmagához illesztve nem üti a szemünket a határolóvonal. Mindez a probléma a tapéta jellegű kisképeknél nem jelentkezik.
Ha merünk vállalkozni rá, így tehetünk hátteret a lapunk mögé:
<body background="teglak.gif" text=ffffff link=aaffff vlink=88ffff alink=00ffff>
A kép ez esetben is a lapunk mellett lapul ugyanabban a könyvtárban, de lehet ez másképp is.
Igen, adós vagyok több magyarázattal is. A text= a szöveg színe, a link= a kapcsolódási pontoké (ezt majd hamar megmagyarázom, mindjárt a következő fejezetben), ha még nem néztük meg, a vlink=, ha már megnéztük és az alink=, amikor épp rákattintunk. A színek megadása a vörös-zöld-kék (RGB) sorrendben hexadecimális kétjegyű számokkal lehetséges. (A függelékben egy kis táblázat segít ezeknek a kódoknak a hétköznapi színekkel való összepárosításában.) Háttere egy lapnak egy lehet, ezért került a törzs kezdősorába, a body kibővítéseként ez a pár jelző. A háttér lehet egyszínű is, ezt a bgcolor= adja meg ugyanitt, szintén RGB kódban. Ez szerepelhet a background= helyett, de mellette is! Utóbbi esetben (főleg, ha a kép nagy) a megadott háttérszín megjelenik, majd a kép megérkezésekor a képpel felülíródik.
Végül, mert sajnos idetartozik, néhány szó
Nincs az a vonal, ami előbb-utóbb el ne dugulna a forgalomtól. Ekkor pedig egy nagy képet letölteni idegölő dolog. A fejezet elején említett mondás megfordul: ezer szó felér egy képpel, ráadásul gyorsabban átjön a hálózaton.
Kíméljük egymást! Legyen csak annyi képünk, amennyi feltétlenül szükséges (azért a lapunk egyéni arculatát nem kell agyoncsapni!) és ezek legalább tárméretben kicsik legyenek! Ha más megoldás nincs, szedjük több lapra szét az eredetit. Egy lapra 40-60 kbyte-nál több kép csak igen-igen indokolt esetben kerüljön! Számítsunk arra is, hogy (főleg a tapasztalt barangolók) kikapcsolják a képek letöltését -- azaz a lap megtervezésekor fordítsunk gondot arra, hogy képek nélkül is mutasson valahogy. Számos eset van, amikor ez megoldhatatlan, de amikor van mód rá, legalább akkor tegyük meg. Vagy az alt= segítségével mellékeljünk magyarázatot a képekhez, vagy készítsünk önálló "text only" verziót is a sávszélességben "szegények" számára (ez gyakori megoldás).
Ha valamilyen okból sok kép kell a lapra, akkor is van mód a takarékosságra. Ne magát a képeket tegyük fel, hanem kicsiny ikonokat, s ezek mögé pakoljuk be az egész estét betöltő plakátképeinket. Ennek mikéntjéről (is) szól a következő fejezet.