Inserarea unei imagini

modificarea proprietăţilor imaginii: poziţionare, dimensiuni, încadrare în text

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.

red flower jpg
poza.jpg
mărime: 54,6 Kb
  
red flower gif
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.

Try it yourself >>

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.

Alinierea orizontală şi verticală a unei imagini

Î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">

Try it yourself >>