poza.jpg
mărime: 54,6 Kb
poza.gif
mărime: 58,5 Kb
Folosind imagini pagina capăta un plus de atractivitate dar puteţi plăti preţul unei încărcări greoaie dacă dimensiunile imaginii sunt mari.
Câteva din formatele de imagini utilizate în paginile web sunt: JPEG (*.jpg sau *.jpeg), GIF (*.gif), BMP (*.bmp), PNG (*.png).
Formatul gif este recomadat pentru realizarea butoanelor şi a icoanelor iar jpg pentru fotografii.
GIF (Graphics Interchange Format)
Formatul GIF poate reda un număr de 256 de culori, de aceea este folosit pentru imaginile de dimensiuni mici: butoane, icon-uri, animaţii.
JPEG (Joint Photographic Expert Group)
Formatul JPEG nu mai este limitat la 256 de culori şi de aceea este folosit pentru fotografii. Imaginile care aparţin acestui format au extensia .jpg sau .jpeg.
poza.jpg mărime: 54,6 Kb |
poza.gif mărime: 58,5 Kb |
Eticheta folosită pentru inserarea unei imagini în pagină este <img> şi are următoarele atribute:
src = sursa, locul unde se află imaginea
width = lăţimea imaginii
height = înălţimea imaginii
alt = numele care înlocuieşte imaginea până aceasta se încarcă sau când nu a fost găsită
border = chenar (0 = lipsă bordură)
Exemplu: <img src="imagini/red-flower.jpg" width="200" height="200" border=3 alt="red flower jpg">
"src" este prescurtarea pentru "source" (sursa). Acest atribut se foloseşte pentru a indica locaţia fotografiei.
| Sursa Locală | Descriere |
| src="poza.jpg" | fotografia este situată pe acelaşi nivel cu fişierul .html |
| src="../poza.jpg" | fotografia este situată pe un nivel anterior fişierului .html |
| src="../imagini/poza.jpg" | fotografia este situată în folderul "imagini" pe nivelui anterior fişierului .html |
Dimensiunea imaginii afişate de browser este stabilită de argumentele width şi height care pot fi diferite de dimensiunile imaginii originale, caz în care imaginea va fi redimensionată automat de către browser.
Pentru a micşora timpul încărcării complete a paginii există programe care optimizează imaginile. Optimizarea constă în:
1. reducerea dimensiunii imaginii fără degradarea majoră a calităţii
2. eliminarea informaţiilor tip metadată asociate imaginii. Aceste date sunt asociate automat de programele de grafică (de ex. Adobe Photoshop) sau de aparatele de fotografiat digitale.
În acest sens, sunt folosite atributele align şi valign. Opţiunile oferite de aceste atribute sunt:
1. Align (orizontal)
- right
- left
- center
2.Valign (vertical)
- top
- bottom
- center
Dacă doriţi ca textul sa încadreze imaginea adăugaţi etichetei img atributul align.
Exemplu: <img src="imagini/red-flower.jpg" width="200" height="200" border=3 alt="red flower jpg" align="left">