Tutorial HTML

Data publicarii: Februarie 2006

Tutoriale » HTML » Imagini

HTML Feb 2006

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

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

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)

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

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

HTMLAfisare
<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 textpozatext 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 textpozatext text text text text text text text text text text text text text text text text text text text text text text text

Sus

Tutoriale
27 Jun 2016  5:45 PM
Tutoriale

Copyright © 2005-2016 Termeni si conditii
Adauga comentariu
Nume:*
Email:*
Comentariu:*
 Poza 
Introduceti codul:*

Completarea campurilor marcate cu * este obligatorie.

Autorul isi rezerva dreptul de a nu posta comentariile care nu au legatura cu subiectul articolului.

 
Comentarii:
Marilena
15-03-2013
studiez html de cateva zile. am ajuns la lectia ta despre imagini. iti multumesc pentru ca ai avut rabdarea de a scrie articolele astea pentru cei care mai au dorinta de a invata ceva. am 41 ani si cred ca tot mai am ceva de invatat. marilena
Adriana
22-03-2013
Am pus codul html pentru inserarea unei imagini dar cand o afiseaza apare foarte mare. Cum fac ca imaginea sa apara la marimea dorita? Multumesc
Autor
22-03-2013
Cu un program de grafica micsoreaza imaginea (functia resize) la dimensiunile dorite, apoi adauga respectivele valori la atributele width si height ale etichetei img
Denisa
05-11-2013
Am urmarit pas cu pas sfaturile in ceea ce priveste realizarea unui program html.problema este ca atunci cand incerc sa deschid cu ajutorul unui browser imaginile nu mi se afiseaza?am gresit la scrierea programului?
Autor
06-11-2013
Daca adresa fisierului imagine arata astfel src="poza.jpg", inseamna ca fisierul html si fisierul imagine sunt in acelasi folder. Daca sunt in foldere diferite adresa va contine si calea pana la fisierul imagine.

Sus