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

Piemērs:

<img src="https://exs.lv/bildes/demo.jpg" alt="Demo attēls" />

Rezultāts:

Demo attēls

src norāda atrašanās vietu. Tā var būt gan absolūtā, gan relatīvā attēla 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, bet, ja bilde tiek ievietota mapē "atteli", relatīvā adrese ir atteli/nosaukums.jpg. Savukārt absolūtā adrese ir faila atrašanās vieta attiecībā pret mājas lapas sākuma mapi, jeb viss ceļš aiz domēna vārda. To sāk ar / simbolu. Ceļu var norādīt arī rakstot pilno URL adresi http://adrese.lv/mape/attels.jpg bet tas nav obligāti, ja attēls atrodas uz tā paša domēna, kur HTML fails.

Šim tagam iespējams pievienot vairākus papildus atribūtus, no kuriem obligāts vai vismaz ļoti vēlams ir alt jeb alternatīvais teksts. Attēls parādīsies arī bez šī atribūta, bet ir svarīgi pierast pie tā lietošanas. Alt atribūts norāda tekstu, kas parādīsies attēla vietā gadījumā, ja attēlu kaut kāda iemesla dēļ nevarēs parādīt, kā arī palīdz meklētājiem noteikt, kas redzams attēlā. Vēl viena alt atribūta funkcija ir atvieglot web lapas uztveršanu neredzīgajiem, kuri lieto specializētu programmatūru, kas palīdz interneta izmantošanai. Alt atribūtam vajadzētu saturēt īsu paskaidrojumu (dažos vārdos) par to, kas ir redzams attēlā.

<img /> ir nepāra tags, tādēļ tas tiek noslēgts ar / tā beigās, nevis noslēdzošo tagu.

 

Attēlu izmēri

HTML attēlam iespējams norādīt arī izmērus (platumu un augstumu). Šeit gan jāņem vērā, ka ir ļoti ieteicams mājas lapā ievietot attēlus, kuri jau iepriekš ir samazināti uz nepieciešamajiem izmēriem izmantojot kādu no attēlu apstrādes programmām. Norādot atšķirīgu izmēru HTML kodā, mēs liekam attēla izmērus mainīt lietotāja pārlūkprogrammai, un šādā gadījumā var ciest attēla kvalitāte, kā arī neproporcionāli norādot izmērus, attēls var izskatīties saspiests vai izstiepts.

Vēl viens iemesls lai attēlus samazinātu jau iepriekš, ir lapas ielādes ātrums. Lieli attēli parasti aizņem vairāk vietas un ielādējas lēnāk, piemēram, ja attēla reālais platums ir 2000px, bet html kodā norādīts, ka to ir jārāda 200px, klients no servera saņem desmitiem reižu vairāk datus, kā būtu nepieciešams, un tas palēnina lapas atvēršanos, padarot tās lietošanu nepatīkamu, jo neviens nevēlas gaidīt uz lapas ielādi.

Izmērus norāda pievienojot attēlam width (platums) un height (augstums) parametrus. Tajos norāda skaitliskas vērtības (pikseļos) vai procentuālas, pievienojot % zīmi. Attēla izmērus var mainīt arī ar CSS, bet par to vēlāk.

Piemērs:

<img src="bilde.jpg" width="200" height="160" alt="Attēls" />

 

Attēlu formāti

Pārlūkprogrammas atbalsta visus populārākos attēlu forātus - jpg, png, gif, bmp.

No šiem būtu ļoti jācenšas izvairīties no bmp lietošanas tādēļ, ka šie faili ir nekompresēti un aizņem ievērojami daudz vairāk vietas (bieži vien pat 100x vairāk par kompresētiem jpg).

Optimālā attēlu formāta izvēle būtu šāda:

jpg - fotogrāfijām, sarežģītiem zīmējumiem un tamlīdzīgiem attēliem, kuri satur daudz dažādu krāsu un to pāreju. jpg attēli zaudē kvalitāti atkarībā no kompresijas, bet ar nepārspīlētu kompresiju var iegūt ļoti labu kvalitātes/izmēru attiecību fotogrāfijām.

png - dažādiem grafiskiem elementiem, datorgrafikas zīmējumiem, programmu ekrānattēliem (screenshot). png nezaudē kvalitāti, bet aizņem vairāk vietas, ja tiek izmantots fotogrāfijām, kurās ir daudz krāsu pāreju. Ideāls formāts grafiku, pogu un dažādu web lapas elementu attēlošanai. PNG attēlus ieteicams optimizēt, lai ietaupītu vietu.

gif - šim formātam ir ierobežota krāsu palete. Var panākt mazus attēla izmērus ļoi maziem un vienkāršiem attēliem, bet mūsdienās to aizvien vairāk aizvieto png. Gif attēlus var izmantot arī kustīgām animācijām, bet ar to lietošanu web lapās noteiktu nevajag pārspīlēt, lai iegūtu gaumīgu rezultātu. Gif attēlu izveidei varētu noderēt ezgif.com.

 

Kopumā ir jāskatās attēla izmēru un jāvērtē, vai tas nav neadekvāti liels. Ja web lapā tiek ievietoti attēli, kuri aizņem daudzus simtus kilobaitu vai pat megabaitus, ļoti iespējams, ka kaut kas tiek darīts nepareizi. Tāda lapa lietotājam vērsies lēni, un viņam nebūs vēlmes tur atkal atgriezties.

Laboja mad, labots 15x