Mediji: slike i alt-tekst

Modul 4: Izrada sadržaja · Vrijeme čitanja: 9 minuta

Cilj učenja: Nakon ove lekcije moći ćete pravilno pripremiti, učitati i opisati slike, tako da se brzo učitavaju, izgledaju oštro i da su korisne za sve.

Ključni pojmovi: zbirka medija, formati slika, big image threshold (2560 piksela), JPEG, PNG, WebP, AVIF, kompresija, srcset, lijeno učitavanje (lazy loading), alt-tekst, ime zapisa, autorsko pravo

Što se događa kada učitate fotografiju

Učitate fotografiju s telefona: 4.000 sa 3.000 piksela, 5 MB. WordPress tada radi više nego što mislite:

1. Ako je fotografija šira ili viša od 2.560 piksela, WordPress izrađuje smanjenu verziju (s -scaled u imenu) i koristi je kao „original”. Pravi original također se čuva. To se naziva big image threshold i postoji od WordPressa 5.3.
2. WordPress osim toga izrađuje niz manjih formata: minijatura (zadano 150 x 150 piksela, izrezana), srednji (300), veliki (1024) te dodatni formati širine 768, 1536 i 2048 piksela. Vaša tema i dodaci (plugini) često dodaju još i vlastite formate.
3. Sve verzije pohranjuju se u wp-content/uploads/2026/11/ (godina i mjesec učitavanja).

Jedna fotografija tako lako postane osam ili više zapisa. Zato se mapa uploads toliko brzo povećava (lekcija 1.3), i zato je važno što učitavate.

Na stranici WordPress uz sliku dodaje srcset: popis svih tih formata. Preglednik sam bira najmanji format koji je dovoljno oštar za zaslon. Telefon tako učitava format od 768 piksela, veliki zaslon onaj od 1536. To radi ispravno samo ako formati postoje, dakle ako učitavate putem zbirke medija, a ne putem FTP-a.

Unaprijed smanjivanje i kompresija

Čak i uz te automatske formate, isplati se fotografije unaprijed smanjiti:

• Dimenzije: fotografija koja se na Vašoj web-stranici nikad ne prikazuje šira od 1.600 piksela, ne treba biti 4.000 piksela široka. Smanjite je unaprijed na otprilike 2.000 piksela po dužoj strani. To štedi prostor za pohranu, veličinu sigurnosne kopije i vrijeme učitavanja.
• Kompresija: JPEG s kvalitetom od 75 do 85 izgleda oku gotovo jednako kao kvaliteta 100, ali je često upola manji.
• Metapodaci: fotografije s telefona često sadrže GPS lokaciju na kojoj su snimljene. Ako ne želite da svi znaju gdje stanujete, uklonite to prije učitavanja. WordPress kod smanjenih formata uklanja mnogo metapodataka, ali original ih i dalje može sadržavati.

Postoje dodaci (plugini) koji pri učitavanju komprimiraju slike ili ih pretvaraju u moderniji format. Korisno, ali provjerite rade li to na Vašem vlastitom poslužitelju ili šalju fotografije na vanjsku uslugu (lekcija 9.3), te trebate li uopće dodatak ako to možete napraviti unaprijed.

Koji format

Ako Vaš poslužitelj ne može obraditi neki format, WordPress prilikom učitavanja javlja pogrešku ili ne izrađuje manje formate. U Alati > Zdravlje web-stranice (kartica Info, pod Media-afhandeling) vidite koje formate Vaš poslužitelj podržava.

Lijeno učitavanje (lazy loading)

Od WordPressa 5.5 slike automatski dobivaju loading="lazy": preglednik učitava sliku tek kada do nje doskrolate. To čini dugu stranicu s mnogo fotografija znatno bržom. WordPress svjesno ostavlja prvu veliku sliku na vrhu stranice bez lijenog učitavanja i često joj daje prednost pomoću fetchpriority="high", jer ta slika mora biti vidljiva što prije. O tome više u lekciji 6.3.

Uvijek postavite i širinu i visinu slike (WordPress to čini kod slika iz zbirke medija). Tako preglednik unaprijed rezervira prostor i tekst se ne pomiče kada se fotografija učita.

Alt-tekst: za one koji ne vide sliku

Alt-tekst (alternativni tekst) opisuje što se nalazi na slici. Čitači zaslona ga čitaju slijepim i slabovidnim posjetiteljima, a prikazuje se i kad se slika ne učita. Tražilice ga koriste kako bi razumjele sliku.

Dobar alt-tekst opisuje što slika govori u ovom kontekstu:

• Loše: IMG_4032.jpg ili foto.
• Loše: fietsenwinkel fiets e-bike kopen goedkoop fiets (gomilanje ključnih riječi ne pomaže nikome).
• Dobro: Monteur podešava kočnice na plavom e-biciklu u radionici.

Ako je slika čisto ukras (crtica, pozadinski uzorak), ostavite alt-tekst praznim. Tada ju čitač zaslona preskače. Prazno je nešto drugo nego nedostajuće: slika bez atributa alt čitač zaslona često čita naglas kao ime zapisa. Slika koja je poveznica (na primjer logo koji vodi na naslovnu stranicu) opisuje kamo poveznica vodi: Na naslovnu stranicu trgovine Fietsenwinkel De Spaak.

U zbirci medija alt-tekst postavljate uz samu sliku, a u blok uređivaču uz blok slike. Pripazite: alt-tekst koji unesete u zbirci medija ne mijenja se automatski kod slika koje već stoje na stranicama.

Imena zapisa i autorsko pravo

• Ime zapisa: e-bike-remmen-afstellen.jpg govori više od IMG_4032.jpg i pojavljuje se u adresi slike. Mala slova, crtice, bez razmaka.
• Autorsko pravo: slika s Google Slike nije slobodna za korištenje. Fotografi i banke slika redovito šalju račune za korištenje bez licence. Koristite vlastite fotografije, fotografije s jasnom licencom ili banku slika čije uvjete poznajete, te sačuvajte dokaz svoje licence.

Pohrana i čišćenje

Zbirka medija sama se ne čisti. Slika koju uklonite sa stranice ostaje u zbirci i u mapi uploads, sa svim svojim formatima. Na web-stranici s godinama sadržaja to se nagomila. Povremeno pročistite, ali oprezno: slika se može koristiti na mjestu koje zbirka ne vidi (u postavci teme, widgetu ili e-pošti). Najprije napravite sigurnosnu kopiju.

Sažetak

• WordPress od svakog učitavanja izrađuje više formata i smanjuje velike fotografije na 2.560 piksela; preglednik putem srcset bira odgovarajući format.
• Smanjite i komprimirajte fotografije unaprijed te uklonite podatke o lokaciji.
• Koristite JPEG ili WebP za fotografije, PNG za logotipove i snimke zaslona; SVG samo uz dodatak (plugin) koji ga čisti.
• Lijeno učitavanje odvija se automatski, osim za prvu veliku sliku; širina i visina sprječavaju pomicanje sadržaja.
• Alt-tekst opisuje što slika govori u kontekstu; čisto ukrasna slika dobiva prazan alt-tekst.

Kviz

Zadatak

Zadatak A4.4: Slike na Vašoj naslovnoj stranici. Unesite adresu svoje web-stranice. Program čita naslovnu stranicu i provjerava prvih 20 slika: imaju li atribut alt (prazno smije, nedostajanje ne smije), imaju li širinu i visinu te koliko je velik svaki zapis (putem HEAD-zahtjeva)? Slike veće od 300 kB bit će prijavljene. Popravite što je crveno u svojoj zbirci medija ili na stranici te ponovno provjerite.

Dodatno čitanje

Ovi članci opisuju korake u upravljačkim pločama tvrtke WebOké; u drugim pločama rade na sličan način.

• DirectAdmin priručnik 18.5: Upload prevelik (greška 413) ili vremensko ograničenje isteklo
• Učitavanje ne uspijeva: povećajte upload_max_filesize i max_execution_time
• Zbirka medija (wordpress.org, engleski): https://wordpress.org/documentation/article/media-library-screen/
• Pisanje alt-tekstova (W3C, engleski): https://www.w3.org/WAI/tutorials/images/decision-tree/