Meedia: pildid ja alt-tekst

Moodul 4: Sisu loomine · Lugemisaeg: 9 minutit

Õpieesmärk: Pärast seda õppetundi oskad pilte korralikult ette valmistada, üles laadida ja kirjeldada, nii et need laadivad kiiresti, näevad teravad välja ja on kõigile kasutatavad.

Põhimõisted: meediateek, pildisuurused, big image threshold (2560 pikslit), JPEG, PNG, WebP, AVIF, tihendamine, srcset, lazy loading, alt-tekst, failinimi, autoriõigus

Mis juhtub, kui laadid foto üles

Laadid üles foto oma telefonist: 4.000 korda 3.000 pikslit, 5 MB. WordPress teeb siis rohkem, kui arvad:

1. Kui foto on laiem või kõrgem kui 2.560 pikslit, teeb WordPress vähendatud versiooni (nimes -scaled) ja kasutab seda „originaalina“. Päris originaal jääb samuti alles. Seda nimetatakse big image threshold’iks ja see on olemas alates WordPress 5.3-st.
2. Lisaks teeb WordPress rea väiksemaid suurusi: pisipilt (vaikimisi 150 x 150 pikslit, kärbitud), keskmine (300), suur (1024) ning lisasuurused laiusega 768, 1536 ja 2048 pikslit. Sinu teema ja pluginad lisavad sageli veel oma suurusi.
3. Kõik versioonid lähevad kausta wp-content/uploads/2026/11/ (üleslaadimise aasta ja kuu).

Nii saab ühest fotost kiiresti kaheksa või rohkem faili. Seepärast kasvab kaust uploads nii kiiresti (õppetund 1.3) ja seepärast on oluline, mida üles laadid.

Lehel lisab WordPress pildile srcset’i: nimekirja kõigist neist suurustest. Brauser valib ise väikseima suuruse, mis on ekraani jaoks piisavalt terav. Telefon laadib siis 768-pikslise suuruse, suur ekraan 1536-pikslise. See toimib hästi ainult siis, kui suurused on olemas, ehk kui laadid üles meediateegi kaudu, mitte FTP-ga.

Vähenda ja tihenda eelnevalt

Ka nende automaatsete suuruste juures tasub fotosid eelnevalt vähendada:

• Mõõdud: foto, mida sinu veebisaidil kunagi laiemana kui 1.600 pikslit ei näidata, ei pea olema 4.000 pikslit lai. Vähenda see eelnevalt umbes 2.000 pikslini pikema külje pealt. See säästab salvestusruumi, varukoopia mahtu ja üleslaadimise aega.
• Tihendamine: JPEG kvaliteediga 75 kuni 85 näeb silmale peaaegu samasugune välja kui kvaliteediga 100, kuid on sageli poole väiksem.
• Metaandmed: telefoni fotodes on sageli GPS-asukoht, kus need tehti. Kui sa ei taha, et kõik teaksid, kus sa elad, eemalda see enne üleslaadimist. WordPress eemaldab vähendatud suurustest palju metaandmeid, kuid originaalis võivad need alles olla.

On pluginaid, mis tihendavad pilte üleslaadimisel või teisendavad need moodsamasse formaati. Mugav, kuid vaata, kas nad teevad seda sinu enda serveris või saadavad fotod välisele teenusele (õppetund 9.3), ja kas sul on pluginat üldse vaja, kui saad seda ka eelnevalt teha.

Milline formaat

Kui sinu server mingit formaati töödelda ei oska, annab WordPress üleslaadimisel vea või ei tee väiksemaid suurusi. Menüüs Tööriistad > Saidi tervis näed vahekaardil Info meedia käsitlemise jaotises, milliseid formaate sinu server toetab.

Lazy loading

Alates WordPress 5.5-st saavad pildid automaatselt loading="lazy": brauser laadib pildi alles siis, kui kerid selleni. See teeb pika ja paljude fotodega lehe palju kiiremaks. Esimese suure pildi lehe ülaosas jätab WordPress teadlikult ilma lazy loading’uta ja annab sellele sageli eelisõiguse fetchpriority="high"-ga, sest see peab võimalikult kiiresti nähtavale tulema. Selle juurde tuleme tagasi õppetunnis 6.3.

Määra pildile alati ka laius ja kõrgus (WordPress teeb seda meediateegi piltidega). Siis jätab brauser eelnevalt ruumi vabaks ja tekst ei hüppa paigast, kui foto saabub.

Alt-tekst: neile, kes pilti ei näe

Alt-tekst (alternatiivtekst) kirjeldab, mis pildil on. Ekraanilugejad loevad selle ette pimedatele ja vaegnägijatele külastajatele ning see ilmub, kui pilt ei laadi. Otsingumootorid kasutavad seda pildi mõistmiseks.

Hea alt-tekst kirjeldab, mida pilt selles kontekstis ütleb:

• Halb: IMG_4032.jpg või foto.
• Halb: rattapood ratas elektrijalgratas osta odav ratas (märksõnade kuhjamine ei aita kedagi).
• Hea: Mehaanik reguleerib töökojas sinise elektrijalgratta pidureid.

Kui pilt on puhtalt kaunistus (joon, taustamuster), jäta alt-tekst tühjaks. Siis jätab ekraanilugeja selle vahele. Tühi on midagi muud kui puuduv: pildi puhul, millel pole alt’i, loeb ekraanilugeja sageli ette failinime. Pilt, mis on link (näiteks logo, mis viib avalehele), kirjeldab, kuhu link viib: Rattapoe De Spaak avalehele.

Meediateegis lisad alt-teksti pildi enda juurde ja plokiredaktoris pildiploki juurde. Ettevaatust: meediateegis sisestatud alt-tekst ei muutu automaatselt piltidel, mis juba lehtedel on.

Failinimed ja autoriõigus

• Failinimi: e-bike-remmen-afstellen.jpg ütleb rohkem kui IMG_4032.jpg ja jõuab pildi aadressi. Väikesed tähed, sidekriipsud, ilma tühikuteta.
• Autoriõigus: Google’i piltidest leitud pilti ei tohi vabalt kasutada. Fotograafid ja pildipangad saadavad litsentsita kasutamise eest regulaarselt arveid. Kasuta oma fotosid, selge litsentsiga fotosid või pildipanka, mille tingimusi tead, ja hoia litsentsi tõend alles.

Salvestusruum ja koristamine

Meediateek ei korista ennast ise. Pilt, mille lehelt eemaldad, jääb teeki ja kausta uploads alles koos kõigi oma suurustega. Aastatepikkuse sisuga veebisaidil koguneb seda palju. Korista aeg-ajalt, kuid ettevaatlikult: pilti võidakse kasutada kohas, mida teek ei näe (teema seadetes, vidinas või e-kirjas). Tee kõigepealt varukoopia.

Kokkuvõte

• WordPress teeb igast üleslaadimisest mitu suurust ja vähendab suured fotod 2.560 pikslini; brauser valib srcset’i kaudu sobiva suuruse.
• Vähenda ja tihenda fotod eelnevalt ning eemalda asukohaandmed.
• Kasuta fotode jaoks JPEG-i või WebP-d, logode ja ekraanipiltide jaoks PNG-d; SVG-d ainult puhastava pluginaga.
• Lazy loading toimib automaatselt, välja arvatud esimese suure pildi puhul; laius ja kõrgus hoiavad ära paigast hüppamise.
• Alt-tekst kirjeldab, mida pilt kontekstis ütleb; puhas kaunistus saab tühja alt-teksti.

Test (quiz)

Ülesanne

Ülesanne A4.4: Pildid sinu avalehel. Sisesta oma veebisaidi aadress. Programm loeb avalehe ja vaatab esimest 20 pilti: kas neil on alt-atribuut (tühi sobib, puuduv mitte), kas neil on laius ja kõrgus ning kui suur on iga fail (HEAD-päringu kaudu)? Üle 300 kB pildid märgitakse ära. Paranda punasega märgitu oma meediateegis või lehel ja kontrolli uuesti.

Lisalugemist

Need artiklid kirjeldavad samme WebOké paneelides; teistes paneelides toimivad need sarnaselt.

• DirectAdmin juhend 18.5: Üleslaadimine liiga suur (viga 413) või ajalõpp
• Üleslaadimine ei õnnestu: suurenda väärtusi upload_max_filesize ja max_execution_time
• Meediateek (wordpress.org, inglise keeles): https://wordpress.org/documentation/article/media-library-screen/
• Alt-tekstide kirjutamine (W3C, inglise keeles): https://www.w3.org/WAI/tutorials/images/decision-tree/