Mis vahe on pildi lisamisel <img> sildi abil ja tausta määramisel CSS-i kaudu?

Märgend <img> kasutatakse pildi sisestamiseks eraldi sisuna lehel. See on semantiliselt oluline element, mida brauserid ja otsingumootorid tunnevad ära pildina. See toetab alt atribuuti, mis on oluline SEO ja ligipääsetavuse jaoks.

CSS-i (background-image) abil tausta määramine on dekoratiivsetel eesmärkidel: taustapildid ei loeta lehe sisuks ning neid ei indekseeri eraldi elementidena. Nad ei toeta alternatiivset teksti ning ei mõjuta otseselt SEO-d.

Peamised erinevused:

• <img> lisab pildi dokumendi voogu, mõjutab paigutust ning on interaktiivne.
• CSS-i taustapildid ei mõjuta dokumendi struktuuri ning on mõeldud kujunduseks.

Näide:

<img src="logo.png" alt="Ettevõtte logo">

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

Tõhususe seisukohast võimaldab <img> brauserid paremini hallata laadimist ja vahemälu, samas kui taustapildid võivad laadida ainult siis, kui see on vajalik (näiteks, kui element on nähtav).