Media: kuvat ja alt-teksti

Moduuli 4: Sisällön tekeminen · Lukuaika: 9 minuuttia

Oppimistavoite: Tämän oppitunnin jälkeen osaat valmistella, ladata ja kuvailla kuvia niin, että ne latautuvat nopeasti, näyttävät teräviltä ja ovat kaikkien käytettävissä.

Keskeiset käsitteet: mediakirjasto, kuvaformaatit, big image threshold (2560 pikseliä), JPEG, PNG, WebP, AVIF, pakkaus, srcset, lazy loading, alt-teksti, tiedoston nimi, tekijänoikeus

Mitä tapahtuu, kun lataat kuvan

Lataat puhelimesta kuvan: 4 000 x 3 000 pikseliä, 5 Mt. WordPress tekee silloin enemmän kuin luulet:

1. Jos kuva on leveämpi tai korkeampi kuin 2 560 pikseliä, WordPress luo pienennetyn version (jonka nimessä on -scaled) ja käyttää sitä "alkuperäisenä". Varsinainen alkuperäinen säilyy myös tallessa. Tätä kutsutaan nimellä big image threshold, ja se on ollut käytössä WordPress 5.3:sta lähtien.
2. WordPress luo lisäksi joukon pienempiä kokoja: pienoiskuva (oletuksena 150 x 150 pikseliä, rajattu), keskikoko (300), suuri (1024) sekä lisäkoot 768, 1536 ja 2048 pikseliä leveinä. Teemasi ja lisäosasi lisäävät usein vielä omia kokojaan.
3. Kaikki versiot tallentuvat hakemistoon wp-content/uploads/2026/11/ (lataamisen vuosi ja kuukausi).

Yhdestä kuvasta syntyy näin helposti kahdeksan tai useampi tiedosto. Siksi uploads-hakemisto kasvaa niin nopeasti (oppitunti 1.3), ja siksi sillä on väliä, mitä lataat.

Sivulla WordPress lisää kuvan yhteyteen srcset-määrityksen: listan kaikista noista koosta. Selain valitsee itse pienimmän koon, joka on riittävän terävä näytölle. Puhelin lataa silloin 768 pikselin version, iso näyttö 1536 pikselin version. Tämä toimii vain, jos eri koot ovat olemassa, eli kun lataat kuvan mediakirjaston kautta etkä FTP:llä.

Pienennä ja pakkaa etukäteen

Vaikka automaattiset koot ovatkin käytössä, kannattaa kuvia pienentää etukäteen:

• Koko: kuvan, jota sivustollasi ei koskaan näytetä leveämpänä kuin 1 600 pikseliä, ei tarvitse olla 4 000 pikseliä leveä. Pienennä se etukäteen noin 2 000 pikseliin pisimmältä sivulta. Tämä säästää tallennustilaa, pienentää varmuuskopioita ja nopeuttaa latausta.
• Pakkaus: JPEG-kuva laatuasetuksella 75-85 näyttää silmälle lähes samalta kuin laatu 100, mutta tiedostokoko on usein puolet pienempi.
• Metadata: puhelimella otetut kuvat sisältävät usein GPS-sijainnin, jossa ne on otettu. Jos et halua, että kaikki tietävät missä asut, poista tämä tieto ennen lataamista. WordPress poistaa paljon metadataa pienennetyistä koista, mutta alkuperäinen tiedosto voi sisältää sen edelleen.

On olemassa lisäosia, jotka pakkaavat kuvat lataamisen yhteydessä tai muuntavat ne nykyaikaisempaan formaattiin. Kätevää, mutta tarkista, tekevätkö ne sen omalla palvelimellasi vai lähettävätkö kuvat ulkoiseen palveluun (oppitunti 9.3), ja tarvitsetko lisäosaa lainkaan, jos voit tehdä saman etukäteen.

Mikä formaatti

Jos palvelimesi ei pysty käsittelemään tiettyä formaattia, WordPress antaa latauksen yhteydessä virheen tai ei luo pienempiä kokoja. Kohdasta Työkalut > Sivuston eheys (välilehti Info, osiossa Median käsittely) näet, mitä formaatteja palvelimesi tukee.

Lazy loading

WordPress 5.5:stä lähtien kuvat saavat automaattisesti määrityksen loading="lazy": selain lataa kuvan vasta, kun vierität sen kohdalle. Tämä nopeuttaa huomattavasti pitkää sivua, jolla on paljon kuvia. WordPress jättää tietoisesti ensimmäisen ison kuvan sivun yläosassa ilman lazy loadingia ja antaa sille usein etusijan määrityksellä fetchpriority="high", koska sen pitää tulla näkyviin mahdollisimman nopeasti. Tähän palataan oppitunnilla 6.3.

Aseta kuvalle aina myös leveys ja korkeus (WordPress tekee tämän automaattisesti mediakirjastosta tuoduille kuville). Näin selain varaa tilan etukäteen, eikä teksti hypi, kun kuva latautuu.

Alt-teksti: niitä varten, jotka eivät näe kuvaa

Alt-teksti (vaihtoehtoinen teksti) kuvailee, mitä kuvassa näkyy. Ruudunlukuohjelmat lukevat sen ääneen sokeille ja näkövammaisille kävijöille, ja se näkyy, jos kuva ei lataudu. Hakukoneet käyttävät sitä kuvan ymmärtämiseen.

Hyvä alt-teksti kuvailee, mitä kuva kertoo juuri tässä yhteydessä:

• Huono: IMG_4032.jpg tai kuva.
• Huono: polkupyöräliike pyörä sähköpyörä osta edullinen pyörä (avainsanojen kasaaminen ei auta ketään).
• Hyvä: Mekaanikko säätää siniseen sähköpyörään jarruja korjaamossa.

Jos kuva on puhtaasti koristeellinen (viiva, taustakuvio), jätä alt-teksti silloin tyhjäksi. Silloin ruudunlukuohjelma ohittaa sen. Tyhjä on eri asia kuin puuttuva: kuva ilman alt-attribuuttia saa ruudunlukuohjelman usein lukemaan tiedoston nimen ääneen. Kuva, joka on linkki (esimerkiksi logo, joka vie etusivulle), kuvailee, minne linkki johtaa: Siirry Fietsenwinkel De Spaakin etusivulle.

Mediakirjastossa asetat alt-tekstin kuvan omiin tietoihin, ja lohkoeditorissa kuvalohkon kohdalla. Huomaa: mediakirjastoon lisäämäsi alt-teksti ei muutu automaattisesti kuvissa, jotka ovat jo sivuilla.

Tiedostonimet ja tekijänoikeus

• Tiedoston nimi: e-bike-remmen-afstellen.jpg kertoo enemmän kuin IMG_4032.jpg ja näkyy kuvan osoitteessa. Pienet kirjaimet, väliviivat, ei välilyöntejä.
• Tekijänoikeus: Google-kuvahaun kuva ei ole vapaasti käytettävissä. Valokuvaajat ja kuvapankit lähettävät säännöllisesti laskuja luvattomasta käytöstä. Käytä omia kuvia, kuvia joilla on selkeä lisenssi, tai kuvapankkia jonka ehdot tunnet, ja säilytä todiste lisenssistäsi.

Tallennustila ja siivous

Mediakirjasto ei siivoa itse itseään. Kuva, jonka poistat sivulta, jää silti kirjastoon ja uploads-hakemistoon kaikkine kokoineen. Vuosien saatossa kertyneellä sivustolla tämä kasvaa suureksi. Siivoa silloin tällöin, mutta varovasti: kuvaa voidaan käyttää paikassa, jota kirjasto ei näe (teema-asetuksessa, vimpaimessa tai sähköpostissa). Ota ensin varmuuskopio.

Yhteenveto

• WordPress luo jokaisesta ladatusta kuvasta useita kokoja ja pienentää isot kuvat 2 560 pikseliin; selain valitsee srcset:n avulla sopivan koon.
• Pienennä ja pakkaa kuvat etukäteen ja poista sijaintitiedot.
• Käytä JPEG:iä tai WebP:tä valokuville, PNG:tä logoille ja kuvakaappauksille; SVG vain puhdistavalla lisäosalla.
• Lazy loading toimii automaattisesti, paitsi ensimmäiselle isolle kuvalle; leveys ja korkeus estävät sisällön hyppimisen.
• Alt-teksti kuvailee, mitä kuva kertoo kontekstissa; puhtaasti koristeellinen kuva saa tyhjän alt-tekstin.

Tietovisa

Tehtävä

Tehtävä A4.4: Kuvat etusivullasi. Syötä sivustosi osoite. Ohjelma lukee etusivun ja tarkistaa ensimmäiset 20 kuvaa: onko niillä alt-attribuutti (tyhjä käy, puuttuminen ei), onko niillä leveys ja korkeus, ja kuinka suuri kukin tiedosto on (HEAD-pyynnön avulla)? Yli 300 kt:n kuvista ilmoitetaan. Korjaa se, mikä näkyy punaisena, mediakirjastossasi tai sivulla, ja tarkista uudelleen.

Lue lisää

Nämä artikkelit kuvailevat vaiheet WebOkén paneeleissa; muissa paneeleissa toiminta on vastaavaa.

• DirectAdmin-ohje 18.5: Lataus liian suuri (virhe 413) tai aikakatkaisu
• Lataaminen ei onnistu: nosta arvoja upload_max_filesize ja max_execution_time
• Mediakirjasto (wordpress.org, englanniksi): https://wordpress.org/documentation/article/media-library-screen/
• Alt-tekstien kirjoittaminen (W3C, englanniksi): https://www.w3.org/WAI/tutorials/images/decision-tree/