Imagini și media
img corect, srcset și sizes, picture și formate, SVG, video.
Actualizat
Ce înseamnă media în HTML
Imaginile, video-urile și iconițele sunt de obicei cea mai mare parte din greutatea unei pagini. Felul în care le pui în HTML decide cât de repede se încarcă pagina, dacă layout-ul „sare” și dacă sunt accesibile.
img — atributele care contează
<img src="/team.avif" alt="Echipa la birou" width="1200" height="600" loading="lazy" decoding="async" />| Atribut | Rol |
|---|---|
alt |
textul alternativ — obligatoriu; alt="" pentru imagini decorative (Accesibilitate) |
width / height |
dimensiunile intrinseci — browserul rezervă locul înainte să se încarce imaginea (fără CLS) |
loading="lazy" |
se încarcă doar când se apropie de ecran — pentru imaginile de sub fold |
fetchpriority="high" |
prioritate maximă — pentru imaginea principală (LCP) |
decoding="async" |
decodarea nu blochează restul paginii |
Cu width și height setate, CSS-ul img { max-width: 100%; height: auto } păstrează proporția și pe ecrane mici.
Imagini responsive: srcset și sizes
Un telefon nu are nevoie de imaginea de 2400px a unui monitor. Îi dai browserului variante și îl lași să aleagă:
<img
src="/hero-800.jpg"
srcset="/hero-400.jpg 400w, /hero-800.jpg 800w, /hero-1600.jpg 1600w"
sizes="(min-width: 64rem) 50vw, 100vw"
alt="..."
/>| Atribut | Spune browserului |
|---|---|
srcset |
ce fișiere există și ce lățime are fiecare (400w) |
sizes |
cât de lată va fi imaginea pe ecran în fiecare situație |
Browserul combină asta cu densitatea ecranului și descarcă cea mai mică variantă suficientă. next/image generează automat srcset.
picture — formate și art direction
<picture>
<source type="image/avif" srcset="/hero.avif" />
<source type="image/webp" srcset="/hero.webp" />
<img src="/hero.jpg" alt="..." width="1200" height="600" />
</picture>Folosești <picture> pentru |
Exemplu |
|---|---|
| formate moderne cu rezervă | AVIF → WebP → JPEG |
| art direction — altă încadrare pe mobil | <source media="(max-width: 40rem)" srcset="/hero-portrait.jpg"> |
<img>-ul din interior e obligatoriu — e cel care se afișează și pe care pui alt.
Formate — care și când
| Format | Pentru | Notă |
|---|---|---|
| AVIF | fotografii | cel mai mic, suport larg azi |
| WebP | fotografii, ilustrații | rezervă bună |
| JPEG | fotografii | rezervă universală |
| PNG | imagini cu transparență, capturi de ecran | mare pentru fotografii |
| SVG | iconițe, logo-uri, ilustrații vectoriale | se scalează perfect, se stilizează cu CSS (currentColor) |
SVG inline vs fișier
<svg> inline |
<img src="icon.svg"> |
|
|---|---|---|
Culoare din CSS (currentColor, hover) |
da | nu |
| Cache separat | nu | da |
| Când | iconițe de UI | ilustrații mari |
Iconițele decorative primesc aria-hidden="true"; cele cu sens au role="img" + aria-label (sau text vizibil alături).
Video și audio
<video src="/demo.mp4" controls muted playsinline preload="metadata" poster="/demo.jpg" width="1280" height="720">
<track kind="captions" src="/demo.ro.vtt" srclang="ro" label="Română" />
</video>autoplay funcționează doar cu muted; poster arată o imagine până la pornire; <track> adaugă subtitrări (accesibilitate).
Pe scurt
img:alt,width/height,lazysub fold,fetchpriority="high"pentru imaginea principală.srcset+sizespentru mărimi,<picture>pentru formate și art direction.- AVIF/WebP pentru fotografii, SVG pentru iconițe; video cu
controls,poster, subtitrări.