Vse o HTML slikah: Vstavljanje, dimenzije in optimizacija z atributom ALT

Slike so ključni element vsake sodobne spletne strani. Ne le, da popestrijo besedilo in izboljšajo uporabniško izkušnjo, ampak igrajo tudi pomembno vlogo pri optimizaciji za spletne iskalnike (SEO). Pravilno vstavljena slika lahko na vašo stran pripelje veliko obiskovalcev neposredno iz Googlovega iskanja slik.

V tem članku si bomo podrobno pogledali, kako deluje značka za slike v HTML-ju, zakaj je atribut alt neobhoden ter kako pravilno upravljati z dimenzijami slik in jih spremeniti v delujoče povezave.

1. Osnovna struktura: Značka <img> in atributa src ter alt

Za razliko od večine HTML elementov je značka za sliko <img> samozapiralna (nima zaključne značke </img>). Za njeno pravilno delovanje potrebuje vsaj dva ključna atributa: src in alt.

Osnovni sintaktični primer:

<img src="slike/moj-racunalnik.jpg" alt="Sodoben prenosni računalnik na delovni mizi">

Razčlenitev kode:

• <img> – Značka za prikaz slike na spletni strani.
• src="..." – Atribut source, ki določa pot do slikovne datoteke (lokalna pot ali celoten URL).
• alt="..." – Atribut alternative text, ki vsebuje opisen tekst slike.

2. Zakaj je atribut ALT tako izjemno pomemben?

Atribut alt pogosto spregledamo ali pa vanj zapišemo nesmiselno besedilo, kar je velika napaka. Ima namreč tri bistvene funkcije:

• Dostopnost (Accessibility): Slepi in slabovidni uporabniki uporabljajo bralnike zaslona. Bralnik jim bo naglas prebral vsebino atributa alt, da bodo razumeli, kaj slika prikazuje.
• Prikaz ob napaki: Če se slika iz kakršnegakoli razloga ne naloži (napačna pot, izbrisana datoteka), se bo na mestu slike prikazalo besedilo iz atributa alt.
• SEO (Optimizacija za iskalnike): Googlovi iskalni pajki ne znajo "videti" slike tako kot ljudje. Preko atributa alt razumejo, kaj je na sliki, in jo na podlagi tega uvrstijo med rezultate iskanja.

3. Določanje dimenzij slike (width in height)

Slikam lahko natančno določimo širino (width) in višino (height) v pikah (px) ali odstotkih (%). Pravilno navajanje dimenzij preprečuje premikanje vsebine med nalaganjem strani (t.i. CLS - Cumulative Layout Shift).

<!-- Določanje dimenzij v pikslih -->
<img src="slike/logo.png" alt="Logotip podjetja" width="300" height="150">

<!-- Prilagodljiva širina v odstotkih za odziven (responsive) dizajn -->
<img src="slike/banner.jpg" alt="Oglasna pasica" style="width: 100%; height: auto;">

Nasvet: Če določite le širino (width), bo brskalnik višino prilagodil samodejno ter s tem ohranil pravilno razmerje stranic slike.

4. Slika kot povezava (Klikljiva slika)

Sliko lahko preprosto spremenimo v klikljiv gumb ali povezavo do druge podstrani. To storimo tako, da značko <img> zavijemo znotraj značke za povezavo <a>.

<a href="https://vadnica.org" target="_blank">
    <img src="slike/gumb-vadnica.png" alt="Obiščite domačo stran Vadnica.org" width="200" height="50">
</a>

5. Podpora za različne slikovne formate

Pri spletnem razvoju se najpogosteje srečujemo z naslednjimi slikovnimi formati:

• JPG / JPEG: Odličen za fotografije z veliko barvami in podrobnostmi.
• PNG: Idealen za grafike, logotipe in slike, ki potrebujejo prosojno (transparentno) ozadje.
• GIF: Uporablja se za preproste animirane slike.
• WEBP / AVIF: Sodobna, visoko komprimirana formata, ki zagotavljata vrhunsko kakovost ob izjemno majhni velikosti datoteke (bistveno hitrejše nalaganje spletne strani).

Povzetek

Z obvladovanjem HTML slik ste naredili velik korak k izdelavi vizualno privlačnih in SEO optimiziranih spletnih strani. V naslednjem članku pa si bomo podrobno pogledali še napredno pretvarjanje slik v sodoben format AVIF z uporabo značke <picture>!