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 laaduksid kiirelt, näeksid teravad välja ja oleksid kõigile kasutatavad.

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

Mis juhtub, kui laed üles foto

Laed telefonist üles foto: 4000 x 3000 pikslit, 5 MB. WordPress teeb siis rohkem, kui arvad:

1. Kui foto on laiem või kõrgem kui 2560 pikslit, loob WordPress vähendatud versiooni (nimes on -scaled) ja kasutab seda "originaalina". Tõeline originaal jääb samuti alles. Seda nimetatakse big image threshold'iks ja see on olemas alates WordPress 5.3-st.
2. Lisaks loob WordPress rea väiksemaid formaate: pisipilt (vaikimisi 150 x 150 pikslit, kärbitud), keskmine (300), suur (1024) ning lisaformaadid laiusega 768, 1536 ja 2048 pikslit. Sinu teema ja pluginad lisavad sageli veel omi formaate.
3. Kõik versioonid satuvad kausta wp-content/uploads/2026/11/ (üleslaadimise aasta ja kuu järgi).

Niimoodi tekib ühest fotost kergesti kaheksa või rohkem faili. Seetõttu kasvab uploads-kaust nii kiiresti (õppetund 1.3) ja seetõttu on oluline, mida sa üles laed.

Lehel lisab WordPress pildile srcset'i: loetelu kõigist nendest formaatidest. Brauser valib ise väikseima formaadi, mis on ekraani jaoks piisavalt terav. Telefon laadib siis 768-pikslise formaadi, suur ekraan 1536-pikslise. See toimib korralikult ainult siis, kui formaadid on olemas, seega kui laed üles meediateegi kaudu, mitte FTP-ga.

Vähendamine ja tihendamine ette

Ka automaatsete formaatide puhul tasub fotosid eelnevalt vähendada:

• Mõõtmed: foto, mida su saidil kunagi laiemalt kui 1600 pikslit ei näidata, ei pea olema 4000 pikslit lai. Vähenda see eelnevalt umbes 2000 pikslini pikemal küljel. See säästab salvestusruumi, varukoopia suurust ja üleslaadimisaega.
• Tihendamine: JPEG kvaliteediga 75 kuni 85 näeb silmale peaaegu sama välja kui kvaliteediga 100, kuid on sageli poole väiksem.
• Metaandmed: telefoniga tehtud fotodel on sageli küljes GPS-asukoht, kus need tehti. Kui sa ei taha, et kõik teaksid, kus sa elad, eemalda see enne üleslaadimist. WordPress eemaldab vähendatud formaatide puhul palju metaandmeid, kuid originaalis võivad need alles olla.

On olemas pluginaid, mis tihendavad pilte üleslaadimisel või teisendavad need nüüdisaegsemasse formaati. Kasulik, aga kontrolli, kas nad teevad seda sinu enda serveris või saadavad fotod välisesse teenusesse (õppetund 9.3), ja kas sul tegelikult läheb pluginat vaja, kui saad seda teha ka eelnevalt.

Milline formaat

Kui su server ei suuda formaati töödelda, annab WordPress üleslaadimisel vea või ei loo väiksemaid formaate. Jaotises Tööriistad > Saidi tervis (vahekaart Teave, jaotise Meedia käsitlemine all) näed, milliseid formaate su server toetab.

Lazy loading

Alates WordPress 5.5-st saavad pildid automaatselt atribuudi loading="lazy": brauser laadib pildi alles siis, kui kerid selle juurde. See teeb pika, paljude fotodega lehe palju kiiremaks. WordPress jätab lehe ülaosas oleva esimese suure pildi teadlikult ilma lazy loadinguta ja annab sellele sageli eelisjärjekorra atribuudiga fetchpriority="high", kuna see peab olema nähtav võimalikult kiiresti. Sellele tuleme tagasi õppetükis 6.3.

Määra pildile alati ka laius ja kõrgus (WordPress teeb seda meediateegi piltide puhul automaatselt). Siis jätab brauser eelnevalt ruumi vabaks ja tekst ei hüppa, kui pilt laadub.

Alt-tekst: nende jaoks, kes pilti ei näe

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

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

• Halb: IMG_4032.jpg või foto.
• Halb: jalgrattapood jalgratas e-bike osta odav jalgratas (märksõnade kuhjamine ei aita kedagi).
• Hea: Mehaanik seadistab töökojas sinise e-ratta pidureid.

Kui pilt on puhtalt kaunistus (joonike, taustamuster), jäta alt-tekst tühjaks. Siis jätab ekraanilugeja selle vahele. Tühi on midagi muud kui puuduv: pilt ilma atribuudita alt paneb ekraanilugeja sageli failinime ette lugema. Pilt, mis on link (näiteks logo, mis viib avalehele), kirjeldab, kuhu link viib: Fietsenwinkel De Spaaki avalehele.

Meediateegis määrad alt-teksti pildi enda juures, plokiredaktoris aga pildiploki juures. Pane tähele: alt-tekst, mille meediateegis sisestad, ei muutu automaatselt piltidel, mis on juba lehtedel.

Failinimed ja autoriõigus

• Failinimi: e-bike-remmen-afstellen.jpg ütleb rohkem kui IMG_4032.jpg ja jõuab pildi aadressisse. Väikesed tähed, sidekriipsud, mitte tühikud.
• Autoriõigus: Google'i piltidest pärit pilti ei tohi vabalt kasutada. Fotograafid ja pildipangad saadavad sageli arveid litsentsita kasutamise eest. Kasuta oma fotosid, selge litsentsiga fotosid või pildipanka, mille tingimusi tunned, ja säilita oma litsentsi tõendus.

Salvestusruum ja koristamine

Meediateek ei korista ennast ise. Pilt, mille lehelt eemaldad, jääb ikkagi teeki ja uploads-kausta, koos kõigi oma formaatidega. Aastatepikkuse sisuga saidil kuhjub see üsna suureks. Korista aeg-ajalt, kuid ettevaatlikult: pilti võidakse kasutada kohas, mida teek ei näe (teema seadistuses, vidinas või e-kirjas). Tee enne kindlasti varukoopia.

Kokkuvõte

• WordPress loob igast üleslaadimisest mitu formaati ja vähendab suured fotod 2560 pikslini; brauser valib srcset'i abil sobiva formaadi.
• Vähenda ja tihenda fotosid eelnevalt ning eemalda asukohaandmed.
• Kasuta JPEG-i või WebP-d fotode jaoks, PNG-d logode ja ekraanipiltide jaoks; SVG-d ainult puhastava pluginaga.
• Lazy loading toimub automaatselt, välja arvatud esimese suure pildi puhul; laius ja kõrgus hoiavad ära teksti 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 saidi aadress. Programm loeb avalehe ja vaatab esimest 20 pilti: kas neil on atribuut alt (tühi võib, puuduv mitte), kas neil on laius ja kõrgus ning kui suur on iga fail (HEAD-päringu abil)? Pildid üle 300 kB tuuakse eraldi välja. Paranda see, mis on punane, 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/