HTML IMAGINI

Folosind imagini pagina capata un plus de atractivitate dar puteti plati
pretul unei incarcari greoaie daca dimensiunile imaginii sunt mari.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 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

Cod:

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

Cod:

<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

Cod:

<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

Cod:

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

VIZUALIZARE:
text

Cod:

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

VIZUALIZARE:
text