Lai ievietotu dokumentā attēlu, tiek izmantots <img> tags.

Piemērs:

<img src="bilde.jpg" alt="Attēla apraksts">

src norāda attēla atrašanās vietu. Tā var būt gan absolūtā, gan relatīvā adrese. Relatīvā adrese nozīmē faila atrašanās vietu attiecībā pret HTML dokumentu. Ja bilde atrodas tajā pašā mapē, kur HTML dokuments, relatīvā adrese ir vienkārši nosaukums.jpg. Ja bilde atrodas apakšmapē "atteli", adrese ir atteli/nosaukums.jpg.

Šim tagam obligāts atribūts ir alt — alternatīvais teksts. Alt atribūts norāda tekstu, kas parādīsies attēla vietā, ja to nevarēs parādīt, kā arī palīdz meklētājiem noteikt, kas redzams attēlā. Vēl viena svarīga funkcija — tas atvieglo lapas uztveršanu cilvēkiem, kuri izmanto ekrāna lasītāju programmatūru. Alt atribūtam vajadzētu saturēt īsu aprakstu par to, kas redzams attēlā.

Attēlu izmēri

HTML attēlam iespējams norādīt platumu (width) un augstumu (height). Ir ieteicams tos norādīt, jo tas ļauj pārlūkprogrammai rezervēt vietu attēlam pirms tas ir ielādēts, novēršot lapas satura "lēkāšanu".

<img src="bilde.jpg" width="400" height="300" alt="Attēla apraksts">

Tomēr ir ļoti svarīgi mājas lapā ievietot attēlus, kuri jau iepriekš ir samazināti līdz nepieciešamajiem izmēriem. Ja attēla reālais platums ir 2000px, bet HTML kodā norādīts 200px, klients no servera lejupielādē desmitiem reižu vairāk datu, nekā būtu nepieciešams, un tas palēnina lapas ielādi.

Lazy loading

HTML5 piedāvā loading="lazy" atribūtu, kas norāda pārlūkprogrammai ielādēt attēlu tikai tad, kad tas ir redzams ekrānā. Tas ievērojami uzlabo lapas ielādes ātrumu, ja lapā ir daudz attēlu:

<img src="bilde.jpg" alt="Apraksts" loading="lazy">

Attēlu formāti

Modernās pārlūkprogrammas atbalsta daudzus attēlu formātus. Izplatītākie:

  • JPEG — fotogrāfijām un attēliem ar daudzām krāsām un to pārejām. Zaudē kvalitāti kompresijā, bet nodrošina ļoti labu kvalitātes/izmēru attiecību.
  • PNG — grafiskiem elementiem, ekrānattēliem, attēliem ar caurspīdīgumu. Nezaudē kvalitāti kompresijā.
  • GIF — vienkāršām animācijām un attēliem ar ierobežotu krāsu paleti.
  • WebP — moderns formāts, kas nodrošina labāku kompresiju par JPEG un PNG. Atbalsta gan zudumradošo, gan bezzudumu kompresiju, kā arī caurspīdīgumu un animācijas.
  • AVIF — jaunākais formāts ar vislabāko kompresiju. Atbalsta caurspīdīgumu un animācijas. Atbalsts pārlūkprogrammās strauji pieaug.
  • SVG — vektorgrafika, ideāls logotipiem, ikonām un ilustrācijām. Mērogojams bez kvalitātes zuduma.

Picture elements — vairāki formāti

<picture> elements ļauj norādīt vairākus attēla avotus dažādos formātos. Pārlūkprogramma automātiski izvēlēsies pirmo formātu, ko tā atbalsta:

<picture>
<source srcset="bilde.avif" type="image/avif">
<source srcset="bilde.webp" type="image/webp">
<img src="bilde.jpg" alt="Attēla apraksts">
</picture>

Šādi var piedāvāt modernos formātus (AVIF, WebP) pārlūkprogrammām, kas tos atbalsta, bet saglabāt JPEG kā rezerves variantu vecākām pārlūkprogrammām.

Figure un figcaption

<figure> un <figcaption> elementi ļauj semantiski saistīt attēlu ar tā parakstu:

<figure>
<img src="ainava.jpg" alt="Saulriets pie jūras">
<figcaption>Saulriets Jūrmalā, 2025. gada vasara.</figcaption>
</figure>

Kopumā attēlus ir jāoptimizē pirms ievietošanas mājas lapā. Ja attēli aizņem simtus kilobaitu vai megabaitus, lapa atvērsies lēni un lietotājiem nebūs vēlmes turp atgriezties.

Laboja mad, labots 1x