Slike v HTML

Slike ali fotografije v HTML vključimo z oznako <img>. To je element brez vsebine, kar pomeni, da nima zaključnega dela oznake. Element <img> vključuje sliko v dokument, pri čemer pot do slike določimo z atributom src.

Pomni: Slika v HTML ni samo okras. Pomembno je tudi, da ima primeren opis z atributom alt, saj to pomaga pri dostopnosti in pri prikazu, kadar se slika ne naloži.

Osnovna pravila

Za vstavljanje slike uporabljamo element <img>.
Atribut src določa, kje se slika nahaja.
Atribut alt določa nadomestno besedilo za sliko.
Atributa width in height določata velikost slike v dokumentu.
Pri sodobnih straneh je koristno razmišljati tudi o prilagodljivih slikah in sodobnih formatih.

Vstavljanje slik

Za vstavljanje slike uporabimo element <img>. Obvezno mora vsebovati atribut src, zelo priporočljivo pa je dodati tudi atribut alt z besedilnim opisom slike.

<img src="slike/sonce.jpg" alt="Sonce med oblaki.">

Če želimo večjo sliko prikazati samostojno, jo običajno zapišemo v odstavku ali drugem bločnem elementu.

Primerjave

Atribut `alt` in atribut `title`

Atribut alt podaja nadomestno besedilo za sliko. To besedilo se uporabi, če se slika ne naloži, pomembno pa je tudi za uporabnike bralnikov zaslona. Opis naj kratko pove, kaj je na sliki oziroma kakšen namen ima slika v vsebini strani. Če je slika samo okrasna in ne nosi pomembne informacije, lahko uporabimo prazen atribut alt="".

Atribut title lahko poda dodaten namig o sliki, vendar ni nadomestilo za atribut alt. Zato pomembnih informacij ne zapisujemo samo v atribut title.

<img src="slike/sonce.jpg" alt="Sonce med oblaki.">
<img src="slike/okras.png" alt="">

Pozor: Atribut title ni nadomestilo za atribut alt. Če je nadomestno besedilo pomembno, ga moramo zapisati v atribut alt.

Lastnosti slik

Element <img> ima nekaj pomembnih atributov:

Atribut src določa, kje se slika nahaja. Če je slika v isti mapi kot spletna stran, je dovolj ime datoteke, sicer pa napišemo še pot do slike.
Z atributoma width in height določimo širino in višino slike. Če podamo obe vrednosti, naj ustrezata dejanskemu razmerju slike, da se slika ne popači.
Koristno je, da pri slikah določimo width in height, ker lahko brskalnik že med nalaganjem rezervira pravilen prostor za prikaz slike.
Atribut title lahko poda dodatni namig, ko se z miško zadržimo nad sliko.

Na sodobnih spletnih straneh uporabljamo več različnih slikovnih formatov. Izbira formata je odvisna od vrste slike in želene kakovosti.

JPEG je zelo primeren za fotografije.
PNG je uporaben pri grafikah, ikonah in slikah s prosojnostjo.
GIF podpira enostavne animacije, vendar ima omejeno barvno paleto.
WebP je sodoben format z dobro stopnjo stiskanja in podporo za prosojnost ter animacije.
AVIF je novejši format, ki pogosto omogoča zelo majhne datoteke ob dobri kakovosti.
SVG je vektorski format, primeren za logotipe, ikone in ilustracije.

Za fotografije pogosto izberemo JPEG, WebP ali AVIF, za grafike in prosojnost pa PNG, WebP ali SVG. Paziti moramo tudi na velikost slik, saj prevelike datoteke upočasnijo nalaganje spletne strani.

Formati slik za splet

Pri pripravi slik za splet želimo doseči dobro razmerje med kakovostjo in velikostjo datoteke. Zato slike pred objavo običajno prilagodimo na primerno ločljivost in jih shranimo v ustrezen format.

Za fotografije so zelo pogosti formati JPEG, WebP in AVIF, za ikone, logotipe in ilustracije pa PNG ali SVG.

Primer slike v HTML

<img src="slike/sonce.jpg" width="267" height="200" alt="Sonce med oblaki." title="Sonce">

Sonce med oblaki.

Povezave na slikah

Sliko lahko uporabimo tudi kot povezavo. To storimo tako, da element <img> postavimo znotraj elementa <a>. V takem primeru je še posebej pomembno, da ima slika smiseln atribut alt, saj ta pomaga pojasniti namen povezave.

<a href="vecja-slika.html">
   <img src="slike/sonce.jpg" width="267" height="200" alt="Ogled večje slike sonca." title="Klik za večjo sliko">
</a>

Atribut `title`

Atribut title lahko poda dodaten namig o sliki ali povezavi. V nekaterih brskalnikih se prikaže kot pojavno besedilo, ko se z miško zadržimo nad sliko. Ker se to vedenje med napravami in brskalniki razlikuje, atributa title ne uporabljamo kot edinega nosilca pomembnih informacij.

<img src="slike/sonce.jpg" alt="Sonce med oblaki." title="Fotografija sonca">

Element `<picture>`

Element <picture> uporabljamo, kadar želimo ponuditi več različic iste slike. Tako lahko brskalniku omogočimo izbiro najustreznejše slike glede na velikost zaslona, ločljivost ali podprt format datoteke. Znotraj elementa <picture> uporabimo enega ali več elementov <source> ter obvezen element <img> kot privzeto rešitev.

<picture>
   <source srcset="slike/sonce.avif" type="image/avif">
   <source srcset="slike/sonce.webp" type="image/webp">
   <img src="slike/sonce.jpg" width="267" height="200" alt="Sonce med oblaki.">
</picture>

Sonce med oblaki.

Pri sodobnih spletnih straneh je dobro razmisliti tudi o prilagodljivih slikah. Za pomembne slike lahko uporabimo sodobne formate, kot sta WebP in AVIF, ter element <picture> ali atribut srcset, da brskalnik prenese najbolj primerno različico slike.

Priporočila

Vsaki pomembni sliki dodaj smiseln atribut alt.
Pri slikah določi tudi width in height.
Za fotografije uporabi primeren rastrski format, za logotipe in ikone pa po potrebi tudi SVG.
Velike slike pred objavo prilagodi, da ne bodo po nepotrebnem upočasnjevale strani.
Za več različic iste slike po potrebi uporabi <picture>, srcset ali sodobne formate.

Pogoste napake

Slika nima atributa alt ali pa je opis neustrezen.
Atribut title se uporablja, kot da bi nadomeščal atribut alt.
Slika je prikazana z napačnim razmerjem, ker width in height ne ustrezata izvorni sliki.
Za splet se uporabi prevelika datoteka, čeprav bi bila lahko slika manjša.
Slika kot povezava nima opisa, ki bi jasno pojasnil namen klika.

Nazaj

Naprej