Tutorial HTML

Imagini

Cateva din formatele de imagini utilizate in paginile web sunt: JPEG (*.jpg sau *.jpeg), GIF (*.gif), BMP (*.bmp), PNG (*.png).

Formatul GIF (8 biti) contine maximum 256 culori, fiind recomandat pentru grafica (butoane, icon-uri, etc.). Imaginile gif pot fi animate. Puteti crea gif-uri animate folosind Adobe Image Ready.

Formatul JPG sau JPEG contine milioane de culori si este folosit pentru fotografii. Formatul JPG foloseste un algotitm complex de comprimare. Daca salvati imaginea JPG cu compresie mica, veti obtine o calitate foarte buna dar dimensiunea fiserului va fi foarte mare. Cu compresie mare imaginea va avea o calitate proasta dar fisierul va fi foarte mic. Un raport optim intre calitatea imaginii si dimensiunea fisierului veti obtine pentru o compresie 60%.

Formatul bmp este putin folosit datorita dimensiunilor mari.

Eticheta folosita pentru inserarea unei imagini in pagina este <img> si are urmatoarele atribute:
src = sursa, locul unde se afla imaginea
width = latimea imaginii
height = inaltimea imaginii
alt = numele care inlocuieste imaginea pana aceasta se incarca sau cand nu a fost gasita
border = chenar (0 = lipsa bordura)

Dimensiunea imaginii afisate de browser este stabilita de argumentele width si height.
In cazul in care cele 2 argumente (width si height) sunt diferite de dimensiunile fisierului imagine browserul va redimensiona imaginea afisata.

Recomandare: Eticheta img va contine mereu argumentele:
- height si width, astfel browserul va putea afisa corect pagina chiar inainte ca imaginea sa fie incarcata complet
- alt, existenta valorii acestui atribut este benefica din punct de vedere SEO (Search Engine Optimization)

Exemplu: o imagine cu latime 100px, inaltime 75px, alt=poza si border=0 si inca o data cu border=1

HTML	Afisare
<img src="poza.jpg" width="100" height="75" alt="poza" border="0">
<img src="poza.jpg" width="100" height="75" alt="poza" border="1">

Pentru a micsora timpul incarcarii complete a paginii exista programe care optimizeaza imaginile. Optimizarea consta in:
1. reducerea dimensiunii imaginii fara degradarea majora a calitatii
2. eliminarea informatiilor tip metadata asociate imaginii. Aceste date (EXIF/IPTC) sunt asociate automat de programele de grafica (de ex. Adobe Photoshop) sau de aparatele de fotografiat digitale. Pentru eliminarea acestor informatii puteti folosi aplicatia Exifer.

In Internet Explorer valoarea atributului alt este afisata in browser in momentul in care mouse-ul se afla deasupra imaginii. Pentru a obtine aceeasi afisare in Firefox in eticheta img se adauga atributul title avand acceasi valoare ca si alt.

Exemplu: acceasi imagine care contine atributele alt si title (verificati cu Internet Explorer si Firefox)

HTML	Afisare
<img src="poza.jpg" width="100" height="75" alt="poza" title="poza">

Daca doriti ca textul sa incadreze imaginea adaugati etichetei img atributul align

HTML	Afisare
<img src="poza.jpg" width="100" height="75" alt="poza" align="right"> text text text text text text text text text text text text text text text text text text text text text text text text	text text text text text text text text text text text text text text text text text text text text text text text text
<img src="poza.jpg" width="100" height="75" alt="poza" align="left"> text text text text text text text text text text text text text text text text text text text text text text text text	text text text text text text text text text text text text text text text text text text text text text text text text

Sus