Pildid on iga kodulehe loomulik osa, aga fotode suuruse ja kvaliteedi vahel peab leidma sobiva tasakaalu, et veeb talumatult aeglaseks ei muutuks ega kole välja näeks. Fotograaf Mailis Vahenurm annab nõu, kuidas veebilehe omanik selle kõige paremini lahendaks.

Kodulehe välimuse keskmes on sageli fotod, mis haaravad pilku, aitavad kiiremini teksti mõista ja tekitada emotsioone. Kahjuks on need ka põhjuseks, mis aeglustab lehe töötamist, kui mahtu pole õigesti optimeeritud.

Millised pildimõõdud sobivad erinevatesse kodulehe sektsioonidesse ning kuidas tagada, et fotod oleksid visuaalselt kvaliteetsed ja tehniliselt optimeeritud? Vaatame, kuidas piltide suurust ja kvaliteeti tasakaalus hoida, millised failivormingud on sobivaimad ning millised tööriistad ja nipid aitavad pildid veebi jaoks ette valmistada.

Mis on fotode optimeerimine?

Fotode optimeerimine tähendab selliste failide loomist, mis säilitavad visuaalse kvaliteedi, kuid on võimalikult väikese failimahuga ja sobivad vaatamiseks erinevatest seadmetest.

Miks on just pildid üsna tihti kodulehe peamine kitsaskoht?

Siin on olulisemad põhjused, miks pildid võivad kodulehe sujuvat kasutamist takistada, kui need on optimeerimata ning kuidas õigesti ette valmistatud pildid veebi külastatavusele kasuks tulevad.

1. Lehe kiirus. Optimeerimata fotod aeglustavad lehe laadimist, mis võib viia selleni, et külastajad lahkuvad enne, kui leht on jõudnud lõpuni alla laadida. Isegi mõne sekundi pikkune viivitus vähendab konversioonimäära märgatavalt ehk oluliselt vähem külastajaid jõuab vajaliku infoni.

2. Mobiilisõbralikkus. Tänapäeval tarbitakse sisu peamiselt mobiilsetest seadmetest. Kui pildid ei ole mobiilivaates optimeeritud, võivad need olla moonutatud või aeglaselt alla laadida. Piltide optimeerimine aitab neil laadida kiiresti ja kohanduda erinevate ekraanisuurustega, säilitades professionaalse mulje.

3. SEO. Google võtab lehe kiirust ja mobiilisõbralikkust arvesse oma otsingutulemustes. Kui fotod on optimeeritud (nii mahult kui ka failinimede, alternatiivteksti ja laadimiskiiruse mõttes), aitab see parandada kodulehe positsiooni otsingutulemustes.

4. Serverimahu ja veebimajutuse kulu kokkuhoid. Suured ja mahukad failid koormavad serverit ja võtavad rohkem salvestusruumi, mis võib tähendada lisakulusid veebimajutuse eest. Samuti võib see mõjutada kogu lehe üldist toimimist, eriti kui korraga on palju külastajaid.

5. Kasutajakogemus. Kasutajad hindavad kodulehti, mis töötavad kiiresti, näevad head välja ja millelt on lihtne infot tarbida. Kui fotosid kasutatakse vales formaadis, kärbitakse neid automaatselt või kohandatakse hooletult, kaob oluline osa kaadrist ning tulemus mõjub ebaprofessionaalselt.

Milliseid pilte ja kui suurelt kodulehel kasutada?

Veebilehel kasutatavad pildid täidavad erinevaid rolle. Mõni on tähelepanu tõmbamiseks, teine aitab infot illustreerida ning kolmas emotsiooni luua. Iga pilditüüp vajab veidi erinevat lähenemist nii mõõtude kui ka faili suuruse osas.

1. Hero-pilt ehk esilehe suurim pilt on tavaliselt lehe kõige nähtavam visuaal, mis avaneb kohe peale lehe laadimist. Selle abil luuakse esmamulje. Siin on seda tüüpi pildi kõige olulisemad näidajad.

Soovituslik suurus: 2000–2500 pikslit lai, kõrgus kuni 1400 pikslit. Kõrgus sõltub tõesti disainist. Mõnikord võib kõrgus olla ka väiksem, näiteks kuni 800 pikslit, kui disain seda nõuab. Väiksema pikslite arvuga pilt laeb kiiremini ja on mobiilivaadetes parem.
Failitüüp: JPG, WebP või AVIF (see viimane on uuem ja efektiivsem formaat, aga kõik süsteemid ei pruugi seda veel toetada). Wordpressis sab valida, kas uued pildid, mis on loodud olemasoleva meediteegi baasil, on AVIF- või WebP-formaadis.
Faili suurus: maksimaalselt 400–500 kB.

2. Sisuteksti kõrval olevad pildid toetavad tekstilist sisu ja aitavad lugejal infot paremini mõista. Siin on oluline, et pilt ei oleks liiga suur, kuid ka mitte udune.

Soovituslik suurus: 800–1200 pikslit lai.
Faili suurus: 100–300 kB.
Failitüüp: JPG või WebP.

3. Galeriifotosid kasutatakse tihti teenuse või toote visuaalseks esitlemiseks või meeskonnaliikmete tutvustamiseks.

Soovituslik suurus: 1000–1500 pikslit lai.
Faili suurus: 150–300 kB.
Failitüüp: JPG, WebP.

4. Tootefotod ja -illustratsioonid peavad olema detailsed ja kvaliteetsed, et esindada toodet väärikalt.

Soovituslik suurus: sõltub paigutusest, aga reeglina 500–1200 pikslise laiusega.
Failisuurus: 200-500 kB.
Failiformaat: JPG, PNG (läbipaistev taust) või WebP (illustratsioonide puhul).

5. Ikoonid ja logod on väikesed, kuid mõjuvad visuaalselt tugevamalt. Et need säilitaksid teravuse igas suuruses ja toetaksid vajadusel läbipaistvust, on failiformaadil siin eriline roll.

Soovituslik suurus: 100–300 px.
Faili suurus: 10-15 kB. SVG vektorgraafika failid sageli on tunduvalt väiksemad ja võimaldavad suurendada pilti ilma kvaliteedikadudeta.
Failiformaadid: SVG – ideaalne logode ja ikoonide jaoks, sest vektorgraafika on terav ka suurel ekraanil; PNG – hea valik, kui on vaja läbipaistvust. Läbipaistvust pakuvad ka AVIF ja WebP

6. Ametiportreed on eriti tundlik teema, sest need peavad nägema head välja kõikides suurustes: nii väikese ikoonina kontaktandmetes kui ka suuremalt näiteks uudiste sektsioonis. Lisaks faili kõrgusele ja veebiversioonile tasub arvestada ka heledust ja kontrasti, kuna need mõjutavad näo selgust väiksema kuvari puhul.

Soovituslik suurus originaalfailil: vähemalt 1024 pikslit kõrguselt (võimaldab kärpida).
Veebiversioon: 600–800 pikslit kõrge.
Faili suurus: 150–250 kB.
Failitüüp: JPG või WebP.

Millest alustada fotode optimeerimist?

Fotode optimeerimise esimene ja kõige olulisem samm on eesmärgiteadlikkus. Mõtle, kus ja kuidas pilti kasutatakse. Kui pilt peab töötama hero- ehk päisesektsioonis suurel ekraanil, on selle nõuded teised kui blogipostituse pisipildil või galerii eelvaatel.

1. Vali sobiv failimõõt. Veebikasutuseks muuda pilt täpselt nii suureks, kui vaja, aga mitte suuremaks ega väiksemaks. Näiteks ära kasuta 5000 piksli laiust pilti, mida kuvatakse lehel 800 piksli suurusena – see raiskab ruumi ja aeglustab lehte.

2. Failiformaat loeb. Vali formaat vastavalt sisule:

JPG – hea fotode jaoks, väiksema failimahuga;
PNG – kui on vaja läbipaistvat tausta või kõrgemat kvaliteeti;
WebP – uus ja väga tõhus formaat, mis sobib hästi tänapäevaseks veebikasutuseks;
SVG – ideaalne vektorelementidele, logodele, ikoonidele;
GIF - aegunud formaat lihtsa animatsiooni jaoks, piiratud värvid;
AVIF - võimaldab tugevat kompressiooni kvaliteeti kaotamata.

3. Kui kasutad WordPressi, seadista piltide suurused. WordPressis saab kohandada maksimaalse pisipildi, keskmise ja suure pildi mõõtmeid nii:

Ava Settings > Media menüü;
määra sobivad laiused ja kõrgused vastavalt oma kujundusele;
nii väldid olukorda, kus süsteem lõikab pilte valesti või kasutab liiga suuri faile, mis aeglustavad lehte.

Lisaks tasub kontrollida, kas kasutatav teema või builder (näiteks Elementor, Divi) loob piltidest lisaversioone, see võib samuti mõjutada lehe kiirust.

4. Kasuta pluginad piltide optimeerimiseks WordPressis. Need pakivad pildid Wordpressis automaatselt kokku, mis on eriti mugav sel juhul, kui fotosid on palju.

Mõned pluginad, mis selleks sobivad, on järgmised:

5. Kasuta piltide laadimisel erinevaid strateegiaid

Lazy loading - pildid laaditakse alles siis, kui need jõuavad seadme ekraanil nähtavale. See sobib eriti hästi pikkadele lehtedele, sest vähendab esialgset koormust ja teeb lehe avamise kiiremaks.
Priority loading - kõige olulisemad pildid laetakse esimesena, enne kõiki teisi. Tavaliselt on selleks lehe ülemine suur pilt (hero-pilt) või muu visuaal, mis peab kohe nähtav olema. Kui seda ei märgita "prioriteetseks", võib juhtuda, et leht näitab esmalt tühja ala ja alles siis ilmub ekraanile pilt.

6. Fotode kokkupakkimine teiste programmide abil või brauseris. Kasuta spetsiaalseid tööriistu, et vähendada faili suurust ilma nähtava kvaliteedikadudeta. Soovitatud tööriistad on järgmised:

7. Failinimed ja ALT-tekstid. SEO ehk otsingumootori jaoks optimeerimise mõttes on oluline anda failidele selged ja kirjeldavad nimed (näiteks “tiim-meeskonnaportree-2025.jpg”). Samuti tasub lisada alt-tekst, see aitab Google’il mõista, mis on pildil ja parandab seeläbi lehe leitavust.

Mida optimeerimisel vältida

WebP formaati tasub eelistada JPG-le, kuna see vähendab foto mahtu. Liigne tihendamine aga toob kaasa artefaktid, nagu mürasus, detailide kadumine või värvikihistumine (posterization), mis jätab odava ja ebaprofessionaalse mulje.

Samuti väldi foto optimeerimisel selle liiga teravaks muutmist, ebavajalikku filtrite kasutamist ja piltide venitamist, mis kõik vähendavad visuaalset usaldusväärsust.

Millal ja miks kasutada suuremaid pilte?

Tänapäevased Retina- ja kõrge eraldusvõimega ekraanid (nt MacBookid, iPhone´id, uuemad Androidid) kuvavad pilte kaks korda suurema pikslitihedusega. See tähendab, et tavalise suurusega pilt võib seal tunduda udune või ebaterav.

Tagamaks teravat ja kvaliteetset tulemust ka Retina-ekraanidel, soovitatakse olulisi visuaale (näiteks logod, hero-pildid, ikoonid) kasutada kahekordses suuruses: näiteks kui visuaal kuvatakse 600 pikslises laiuses, tee fail tegelikult 1200 piksli laiune. Failid peavad olema seejuures hästi tihendatud (kasuta näiteks WebP formaati), et vältida lehe aeglustumist.