Imaginile în pagina web

1. In paginile web pot fi introduse doar imagini cu extensia .gif, .jpg, .bmp sau .png. Bmp-urile nu sunt recomandabile datoritã dimensiunii mari (în KB) a fisierelor. Cu cât un fisier e mai mare, cu atât vizitatorul paginii îl încarcã mai greu.

2. In cartea sa "Adobe Photoshop 5. Ghid practic", Carla Rose face o comparatie între dimensiunile fisierelor, dupã ce a salvat acelasi fisier în format .bmp, .jpg, .pdf etc. Comparatia e exprimatã în tabelul urmãtor:

Format Dimensiunea fisierului
.bmp 891 K
.jpg (calitate înaltã) 344 K
.jpg (calitate redusã) 60 K
.png (întretesut) 837 K
.png (neîntretesut) 495 K

3. Imaginea poate fi:
a) O fotografie ce a fost scanatã si, eventual, prelucratã într-un program de graficã precum Paint Shop Pro, Adobe Photoshop, Adobe Illustrator
b) O creatie originalã, realizatã într-un program de graficã

4. Cele mai populare formate pentru imagini sunt .gif si .jpg. Primele folosesc numai 256 culori, pot fi animate si pot avea un fundal transparent, ceea ce le face usor de plasat în paginã. In imaginile .jpg pot apãrea 16 milioane de culori, dar nu pot fi animate si nu pot avea fundal transparent. Spre deosebire de gifuri, jpg-urile sunt comprimate, ceea ce înseamnã cã au, de obicei, un volum mai mic decât giful care înfãtiseazã aceeasi imagine.

5. Imaginile se pot împãrti în:
* Imagini statice
* Imagini animate (=gifuri animate). Un gif animat e alcãtuit din mai multe imagini statice care se succed ãntr-o anumitã ordine. Se poate realiza cu usurintã într-un program de animatie precum Animation Shop, produs de firma Jasc si difuzat shareware, împreunã cu Paint Shop Pro, pe CD-urile revistelor CHIP, PC Magazine, PC World.

6. Un caz particular de imagini îl reprezintã bannerele, care fac reclamã unui produs si pe care le puteti vedea, de obicei, în partea de sus a paginilor web. Se realizeazã tot în Animation Shop, cu Banner Wizard.

7. Imaginile 3D nu fac obiectul studiului nostru, dar nu ni se pare inutil sã precizãm ca se pot realizea în VRML (Virtual Reality Modelling Language ), precum si în alte limbaje. Vizualizarea imaginilor 3D se face cu browsere speciale sau cu browserele obisnuite, cãrora li s-a adãugat un plug-in ( de obicei, Cortona ).
Imagini 3D puteti realiza folosind 3D Studio Max, Caligari Truespace, Rhino, Maya, Bryce, LightWave, Kashmir. Ultimul este distribuit gratuit pe net, într-o arhivã de doar 3,8 MB, iar Maya ( 130 MB ) poate fi cãpãtat la un pret minor, asa cum puteti constata vizitând pagina producãtorului.

Tag-ul necesar lucrului cu imagini este

Cod:

<img>

. Tinând cont cã o imagine poate constitui un link ( sau un ansamblu de link-uri ), vom trata aici si tag-uril map si area.



<img>
Dorim sã introducem imagini în situl nostru ? Acest tag produce afisarea unei imagini în pagina web curentã.
Exemplu:

Cod:

<img src="imag/poza2.jpg" alt="ChuckYs-ZoNe" width="500" height="350" border="0" align="center">

* Atributul src precizeazã adresa relativã a fisierului ce va fi încãrcat.Imaginea poza2.jpg se afla in directorul imag.
* Atributul alt se adreseazã browserelor negrafice precum Lynx, care în locul imaginii vor afisa textul: ChuckYs-ZoNe. Acest atribut este suportat si de browserul Internet Explorer, textul apãrând ca un tooltip la trecerea cursorului peste imagine.
* Atributul align pozitioneazã imaginea în document si poate lua valorile left sau right.Valoarea implicitã este left, ceea ce înseamnã cã

Cod:

<img src="a.gif" align="left"> e totuna cu <img src="a.gif">

. Pentru a pozitiona o imagine în centrul paginii web, apelati la oricare dintre aceste trei metode:
o includeti imaginea într-un tabel pozitionat în centrul paginii
o includeti imaginea într-un element

Cod:

<div>

, folosind codul de mai jos:

Cod:

 <div>
            <img src="imag/poza2.jpg">
            </div>

o includeti imaginea într-un element

Cod:

<p>

, folosind codul de mai jos:

Cod:

<p>
            <img src="imag/poza2.jpg">
            </p>

* Atributul border precizeazã grosimea în pixeli a chenarului imaginii.
* Atributele width si height iau valori ce exprimã lungimea, respectiv înãltimea imaginii. Pentru a le afla, deschideti fisierul în Irfanview sau ACDSee ( care sunt cele mai bune viewere ) si cititi dimensiunile imaginii în pixeli. Le puteti afla si deschizand imaginea în browser, dând click-dreapta, apoi selectand "Properties".In cadrul tag-ului discutat, le puteti trece pe acestea sau (sub)multipli ai acestora. Dacã aceste atribute nu sunt precizate, imaginea se încarcã având dimensiunile proprii, dar aceasta presupune schimbarea aspectului paginii si acest lucru poate fi suparator pentru utilizator. Practic, atributele width si height nu trebuie sa lipseasca atunci cand folosim imagini.
* Atributele vspace si hspace precizeazã intervalul liber ( în pixeli ) lãsat între imagine si text pe verticalã, respectiv pe orizontalã. Acest atribut e extrem de util si atunci când pagina contine mai multe imagini, asa cum puteti vedea în pagina cu fundaluri.