Kuo skiriasi įterpti vaizdą naudojant <img> žymą ir nustatyti foną per CSS?

Žymė <img> naudojama įterpti vaizdą kaip atskirą turinį puslapyje. Tai semantiškai svarbus elementas, kurį naršyklės ir paieškos sistemos atpažįsta kaip vaizdą. Ji palaiko alt atributą, kuris yra svarbus SEO ir prieinamumui.

Fono nustatymas per CSS (background-image) naudojamas dekoratyviniais tikslais: foniniai vaizdai nelaikomi puslapio turiniu ir nėra indeksuojami kaip atskiri elementai. Jie nepalaiko alternatyvaus teksto ir tiesiogiai neveikia SEO.

Pagrindiniai skirtumai:

• <img> prideda vaizdą į dokumento srautą, veikia maketą ir yra interaktyvus.
• CSS foniniai vaizdai neveikia dokumento struktūros ir naudojami dekoravimui.

Pavyzdys:

<img src="logo.png" alt="Įmonės logotipas">

<div style="background-image: url('pattern.png'); width: 200px; height: 200px;"></div>

Naudojant našumo požiūrį, <img> leidžia naršyklei geriau valdyti įkėlimą ir talpyklą, o foniniai vaizdai gali būti įkelti tik tada, kai to reikia (pavyzdžiui, kai rodomas elementas).