Introducere în Web Development

Elementul <img />

Imaginile se introduc în codul HTML folosind elementul <img />. Acesta are două atribute importante: src și alt.

                    <img 
  src="https://musiclub.web.cern.ch/bands/cernettes/pictures/LHC5.jpg" 
  alt="Les Horribles Cernettes" 
/>
                

Atribute

src (sursa)

Atributul src reprezintă sursa imaginii. Se pot folosi URL-uri sau căi relative asemănătoare cu ce am văzut la link-uri.

alt (text alternativ)

Prin atributul alt putem defini un text alternativ pentru imagine. Browserele pot alege să afișeze acel text atunci când imaginea nu se încarcă, iar cititoarele de ecran pot citi.

Ideal ar fi ca textul să descrie cât mai bine poza.

loading (mod de încărcare)

Un atribut relativ nou, acum suportat de toate browserele mari, este loading. Acesta ne permite să specificăm când vrem să se încarce imaginea. În mod default, sau când dăm valoarea loading="eager", imaginea se va încărca imediat ce se deschide pagina. Asta poate încetini pagina mai ales dacă sunt multe imagini. În schimb, dacă punem loading="lazy", browserele ar trebui să încarce imaginea doar atunci când se face scroll și poate fi văzută.

sizes și srcset

Folosind aceste două atribute, putem să definim mai multe surse pentru imagine. Pentru performanță, poate vrem ca pe ecranele ce au o rezoluție mai mică să se încarce o imagine mai mică.

Poate fi puțin mai complicat pentru cineva la început, dar când aduni ceva experiență, poți găsi pe MDN un articol despre cum se fac imagini responsive.

Tipuri de imagini

Există mai multe tipuri de imagini ce pot fi folosite pe web și vor fi înțelese de toate browserele. Cel mai bun principiu de pe care să te ghidezi este să alegi formatul care produce un fișier cât mai mic la descărcare, fără să sacrifici prea mult calitatea imaginii.

• JPEG (cu extensiile .jpg sau .jpeg) este un format care comprimă imaginea. În funcție de gradul de comprimare, se poate pierde din claritate, însă fișierul va fi mai mic decât alte formate.

• PNG (.png) este un format care nu pierde din claritatea imaginii, dar fișierele pot avea dimensiuni mai mari. De asemenea, unele părți din imagine pot avea transparență și semi-transparență.

• GIF (.gif) este un format cu o gamă foarte limitată de culori. Permite transparență și animații. Este mai puțin folosit în ultima perioadă.

• WebP (.webp) este un format care poate fi folosit ca alternativă la toate cele de mai sus, cu fișiere de obicei mai mici. Un mare dezavantaj este că sunt mai puține aplicații care îl pot genera. Ca exemplu, Adobe Photoshop poate exporta în formatul WebP abia din 2022.

• SVG (.svg) este un format mai special. De fapt este un fișier text care conține cod asemănător HTML. Din acest cod, se pot desena diverse forme. Se poate mări imaginea oricât de mult fără să se piardă vreodată din claritate. Cod SVG mai poate fi inclus direct în HTML, fără elementul <img />

CSS

Prin CSS, putem să configurăm mai multe proprietăți ale imaginii. Deși există atribute HTML pentru width și height, mie îmi place să folosesc proprietățile cu același nume în CSS, care îmi permit să folosesc diferite unități de măsură.

O proprietate CSS care schimbă modul în care este afișată o imagine este object-fit. În mod default, atunci când dăm dimensiuni fixe unei imagini, aceasta se va întinde pe acele dimensiuni. Dacă se întâmplă ca imaginea originală să aibă alte dimensiuni, se va turti. Însă cu object-fit avem și alte opțiuni.