Predstavnost: slike in besedilo alt

Modul 4: Ustvarjanje vsebine · Čas branja: 9 minut

Učni cilj: Po tej lekciji boste znali slike pravilno pripraviti, naložiti in opisati, da se bodo hitro nalagale, bodo videti ostre in bodo uporabne za vse.

Ključni pojmi: predstavnostna knjižnica, slikovni formati, big image threshold (2560 pikslov), JPEG, PNG, WebP, AVIF, stiskanje, srcset, leno nalaganje (lazy loading), besedilo alt, ime datoteke, avtorske pravice

Kaj se zgodi, ko naložite fotografijo

Naložite fotografijo s telefona: 4.000 x 3.000 pikslov, 5 MB. WordPress takrat naredi več, kot si mislite:

1. Če je fotografija širša ali višja od 2.560 pikslov, WordPress ustvari pomanjšano različico (z -scaled v imenu) in jo uporabi kot "izvirnik". Pravi izvirnik se prav tako ohrani. Temu pravimo big image threshold in obstaja od WordPressa 5.3.
2. WordPress poleg tega ustvari vrsto manjših formatov: sličico (privzeto 150 x 150 pikslov, obrezano), srednjo (300), veliko (1024) ter dodatne formate širine 768, 1536 in 2048 pikslov. Vaša tema in vtičniki jim pogosto dodajo še svoje formate.
3. Vse različice se shranijo v wp-content/uploads/2026/11/ (leto in mesec nalaganja).

Ena sama fotografija tako hitro postane osem ali več datotek. Zato mapa uploads tako hitro raste (lekcija 1.3), in zato je pomembno, kaj naložite.

Na strani WordPress sliki doda srcset: seznam vseh teh formatov. Brskalnik sam izbere najmanjši format, ki je dovolj oster za zaslon. Telefon tako naloži format 768 pikslov, velik zaslon pa format 1536. To deluje pravilno le, če formati obstajajo, torej če nalagate prek predstavnostne knjižnice in ne prek FTP.

Vnaprejšnje zmanjšanje in stiskanje

Tudi s temi samodejnimi formati se splača fotografije vnaprej pomanjšati:

• Velikost: fotografija, ki na Vašem spletnem mestu nikoli ni prikazana širša od 1.600 pikslov, ne potrebuje širine 4.000 pikslov. Pomanjšajte jo vnaprej na približno 2.000 pikslov po daljši stranici. To prihrani prostor za shranjevanje, velikost varnostnih kopij in čas nalaganja.
• Stiskanje: JPEG s kakovostjo med 75 in 85 je za oko videti skoraj enako kot kakovost 100, a je pogosto polovico manjši.
• Metapodatki: fotografije s telefona pogosto vsebujejo podatek o lokaciji GPS, kjer so bile posnete. Če ne želite, da vsi vedo, kje živite, te podatke odstranite pred nalaganjem. WordPress pri pomanjšanih formatih odstrani veliko metapodatkov, vendar jih izvirnik lahko še vedno vsebuje.

Obstajajo vtičniki, ki slike ob nalaganju stisnejo ali pretvorijo v sodobnejši format. Priročno, vendar preverite, ali to počnejo na Vašem lastnem strežniku ali fotografije pošiljajo zunanji storitvi (lekcija 9.3), in ali res potrebujete vtičnik, če lahko to naredite tudi vnaprej.

Kateri format

Če Vaš strežnik določenega formata ne zna obdelati, WordPress ob nalaganju javi napako ali ne ustvari manjših formatov. V razdelku Orodja > Zdravje spletišča (zavihek Informacije, pod Obdelava predstavnosti) lahko vidite, katere formate Vaš strežnik podpira.

Leno nalaganje (lazy loading)

Od WordPressa 5.5 slike samodejno dobijo loading="lazy": brskalnik sliko naloži šele, ko se do nje pomaknete. To naredi dolgo stran s številnimi fotografijami veliko hitrejšo. WordPress prvo veliko sliko na vrhu strani namenoma pusti brez lenega nalaganja in ji pogosto da prednost z fetchpriority="high", ker mora biti ta vidna čim prej. K temu se vrnemo v lekciji 6.3.

Vedno nastavite tudi širino in višino slike (WordPress to naredi pri slikah iz predstavnostne knjižnice). Tako brskalnik vnaprej rezervira prostor in besedilo ne skače, ko se fotografija naloži.

Besedilo alt: za tiste, ki slike ne vidijo

Besedilo alt (alternativno besedilo) opisuje, kaj je prikazano na sliki. Bralniki zaslona ga preberejo slepim in slabovidnim obiskovalcem, prikaže pa se tudi, če se slika ne naloži. Iskalniki ga uporabljajo za razumevanje slike.

Dobro besedilo alt opisuje, kaj slika pove v tem kontekstu:

• Slabo: IMG_4032.jpg ali foto.
• Slabo: trgovina s kolesi kolo e-kolo kupiti poceni kolo (kopičenje ključnih besed ne koristi nikomur).
• Dobro: Mehanik nastavlja zavore na modrem e-kolesu v delavnici.

Če je slika zgolj okrasna (črtica, ozadje z vzorcem), pustite besedilo alt prazno. Tako jo bralnik zaslona preskoči. Prazno je nekaj drugega kot manjkajoče: pri sliki brez atributa alt bralnik zaslona pogosto prebere ime datoteke. Slika, ki je hkrati povezava (na primer logotip, ki vodi na domačo stran), opisuje, kam povezava vodi: Na domačo stran trgovine s kolesi De Spaak.

V predstavnostni knjižnici besedilo alt vnesete pri sami sliki, v urejevalniku blokov pa pri bloku za sliko. Pozor: besedilo alt, ki ga vnesete v predstavnostni knjižnici, se samodejno ne spremeni pri slikah, ki so že objavljene na straneh.

Imena datotek in avtorske pravice

• Ime datoteke: e-bike-remmen-afstellen.jpg pove več kot IMG_4032.jpg in se pojavi v naslovu slike. Male črke, vezaji, brez presledkov.
• Avtorske pravice: slike iz Google Images ni dovoljeno prosto uporabljati. Fotografi in banke slik redno pošiljajo račune za uporabo brez licence. Uporabljajte lastne fotografije, fotografije z jasno licenco ali banko slik, katere pogoje poznate, in shranite dokazilo o licenci.

Prostor za shranjevanje in čiščenje

Predstavnostna knjižnica se sama ne počisti. Slika, ki jo odstranite s strani, ostane v knjižnici in v mapi uploads, z vsemi svojimi formati. Pri spletnem mestu z večletno vsebino se to hitro nakopiči. Občasno počistite, vendar previdno: slika se lahko uporablja na mestu, ki ga knjižnica ne zazna (v nastavitvi teme, pripomočku ali e-sporočilu). Najprej naredite varnostno kopijo.

Povzetek

• WordPress iz vsakega nalaganja ustvari več formatov in velike fotografije pomanjša na 2.560 pikslov; brskalnik prek srcset izbere ustrezen format.
• Fotografije vnaprej pomanjšajte in stisnite ter odstranite podatke o lokaciji.
• Za fotografije uporabite JPEG ali WebP, za logotipe in zaslonske posnetke PNG; SVG le z vtičnikom, ki ga očisti.
• Leno nalaganje deluje samodejno, razen za prvo veliko sliko; širina in višina preprečujeta skakanje vsebine.
• Besedilo alt opisuje, kaj slika pove v danem kontekstu; čisto okrasna slika dobi prazno besedilo alt.

Kviz

Naloga

Naloga A4.4: Slike na Vaši domači strani. Vnesite naslov Vašega spletnega mesta. Program prebere domačo stran in preveri prvih 20 slik: ali imajo atribut alt (prazen je dovoljen, manjkajoč ne), ali imajo širino in višino, ter kolikšna je velikost vsake datoteke (prek zahteve HEAD)? Slike nad 300 kB bodo prijavljene. Popravite, kar je označeno rdeče, v svoji predstavnostni knjižnici ali na strani, nato pa ponovno preverite.

Dodatno branje

Ti članki opisujejo korake v nadzornih ploščah WebOké; v drugih nadzornih ploščah delujejo podobno.

• Priročnik DirectAdmin 18.5: Nalaganje je preveliko (napaka 413) ali časovna omejitev poteče
• Nalaganje ni uspelo: povečajte vrednosti upload_max_filesize in max_execution_time
• Predstavnostna knjižnica (wordpress.org, angleško): https://wordpress.org/documentation/article/media-library-screen/
• Pisanje besedil alt (W3C, angleško): https://www.w3.org/WAI/tutorials/images/decision-tree/