O imagine valoreaza cat o mie de cuvinte… sau ceva de genul. Prin urmare, de ce nu am pune si imagini in paginile noastre HTML.
Imaginile se introduc cu ajutorul tagului <img />. <img /> este un tag gol (empty tag), asta insemnand ca nu are decat atribute, fara vreun alt tag de inchidere.
Pentru a afisa o imagine intr-o pagina HTML, va trebui sa folosesti atributul src (“src” venind de la cuvantul “source”), valoarea atributului fiind calea (relativa sau absoluta) unde se afla imaginea. Astfel, daca ai un fisier-imagine (.jpg, .gif, .png) care se gaseste in acelasi folder cu pagina html care vrei sa il includa, va trebui sa chemi acel fisier fie relativ la html…
<img src="imagine.gif" />
…fie absolut…
<img src="http://www.avenir.ro/images/imagine.gif" />
Daca imaginile se afla intr-un folder separat de pagina html, chemarea imaginii cu calea relativa se face astfel…
<img src="folder/imagine.gif" />
… pentru cazul in care imaginea se afla in folderul “folder” care se afla la randul lui in acelasi folder cu pagina html.
Atributul Alt sau “intr-o tara de orbi doar chioru’ vede imaginea?”
Intr-adevar, imaginile valoreaza cat o mie de cuvinte, dar nu ar fi frumos ca si imaginile sa aiba o explicatie pentru browserele care sunt setate sa nu descarce sau sa nu arate imaginile? Ar fi… Si pentru aceasta exista atributul “alt”. Acesta vine ca o explicatie pentru imaginile pe care le afisezi in html. Astfel, atunci cand postezi o imagine scrii:
<img src="imagine.gif" alt="Eu cand eram sexy rau" />
Height si Width sau de ce este important sa ii spui browserului ce il asteapta
Printre alte atribute ale imaginilor se numara si “height” si “width” sau “inaltimea” si “latimea”.
Cele doua nu sunt neaparat importante pentru design cat mai degraba pentru a spune browserului la ce sa se astepte.
Browserele moderne, pentru a da impresia de rapiditate, incearca sa afiseze pagina imediat ce a inceput descarcarea acesteia.
Astfel, imediat ce ai accesat o pagina html, browser-ul afiseaza continutul de tip text al paginii, urmand ca, pe masura ce imaginile se incarca, sa le afiseze si pe acestea.
O astfel de afisare, in cazul in care imaginile nu ar avea setate width si height, ar duce la “saltul” textului in toate partile pana in momentul in care toate imaginile au fost incarcate. Asta se intampla deoarece in mod normal textul curge in jurul imaginilor, iar in momentul in care imaginile nu au setate width si height, acestea primesc ca dimensiune standard un pixel inmultit cu un pixel. Dupa ce o imagine este incarcata aceasta apare in fereastra browserului facand ca textul, care anterior se afla in acea locatie, sa sara in alta locatie.
Prin urmare…
<img src="imagine.gif" alt="Imaginea mea bengoasa" width="300" height="400" />
Ce imagini pot folosi pentru internet
Asa cum exista o mie de gusturi, tot asa exista si mii de formate pentru imagini. In principiu, cu plugin-ul corect, orice imagine poate fi afisata de browsere. In fond, si programele cu care vizualizezi imagini sunt tot browsere.
Cu toate acestea, pentru internet este important viteza si compatibilitatea. Astfel, daca vrei sa folosesti imagini in paginile html, poti folosi urmatoarele formate:
.jpg sau .jpeg
JPEG este bun pentru fotografii, cand ai nevoie de imagini cu o marime a fisierului mica si nu te deranjeaza daca o astfel de reducere a marimii fisierului afecteaza si calitatea pozei. JPEG nu este un format bun atunci cand in imagine apare doar text, parti mari cu aceeasi culoare sau forme geometrice, pentru ca calitatea scazuta a imaginii va face ca liniile de culoare sa nu fie unitare.
.gif
Aparitia formatului .gif a fost o adevarata revolutie pentru internet, acest format permitand animatii. Formatul GIF este bun pentru imaginile care au un numar limitat de culori (pana la 256) si transparenta. De asemenea, formatul .gif este foarte bun pentru butoane, charturi, bannere, diagrame, desene, texte, dar si pentru mici animatii. Ca urmare a numarului limitat de culori, formatul GIF nu este bun pentru poze.
.png
Daca noi suntem urmasii lui Traian si Decebal (sper sa nu se gaseasca vreun destept care sa comenteze pe aceasta tema :)) ) si PNG-ul este un fel de urmas al GIF-ului si JPEG-ului, acesta luand ce este mai bun din ambele lumi. PNG este bun pentru fisiere de dimensiuni mai mici fara insa a pierde din calitatea imaginii. De asemenea, PNG-ul permite transparenta, dorindu-se a fi un bun inlocuitor al GIF-ului.
Acestea sunt cele mai importante atribute ale imaginilor. Mai existau cateva atribute, dar unele nu mai sunt in specificatiile HTML iar despre altele doresc sa vorbesc in alte lectii…
