Liiga suured pildid on üks sagedasemaid põhjuseid, miks koduleht aeglaselt avaneb. See mõjutab nii kasutajakogemust, mobiilis lehe kasutamist kui ka nähtavust otsingumootorites.

Selles juhendis saad teada, milliseid pildimõõte ja failiformaate kodulehel kasutada ning kuidas muuta pildid tasuta XnConverti abil väiksemaks, ilma et nende kvaliteet märgatavalt kannataks.

Miks kodulehe pilte optimeerida?

1. Koduleht avaneb kiiremini

Suure failimahuga pildid pikendavad lehe laadimisaega. Õigesse mõõtu lõigatud ja tihendatud pildid vähendavad allalaaditava info hulka ning aitavad lehel kiiremini avaneda.

Statistika: Google andmetel lahkub 53% kasutajatest lehelt, kui see laeb kauem kui 3 sekundit.

2. Mobiilikasutus muutub mugavamaks

Mobiilseadmes võib internetiühendus olla aeglasem ja ekraan väiksem. Optimeeritud pildid vähendavad andmemahtu ning muudavad lehe kasutamise sujuvamaks.

3. Kasutajakogemus paraneb

Külastaja saab vajaliku sisu kiiremini kätte ega pea ootama suurte piltide laadimist. See aitab vähendada lehelt lahkumist ja muudab järgmise sammuni jõudmise lihtsamaks.

4. Tehniline SEO muutub tugevamaks

Lehe laadimiskiirus ja kasutuskogemus kuuluvad kodulehe tehnilise kvaliteedi hulka. Piltide optimeerimine aitab parandada jõudlust, kuigi otsingutulemusi mõjutavad lisaks ka sisu, ülesehitus ja paljud teised tegurid.

5. Serveriruumist ja varukoopiatest kulub vähem mahtu

Väiksemad pildifailid võtavad vähem serveriruumi ning aitavad vähendada kodulehe ja selle varukoopiate kogumahtu.

Siin on praktiline ülevaade kodulehel kõige sagedamini kasutatavatest pildiformaatidest:

WebP – hea põhivalik fotodele, taustapiltidele ja tavapärasele veebigraafikale. Failid on üldjuhul väiksemad kui JPEG- või PNG-formaadis ning formaat on tänapäevastes brauserites laialt toetatud.
JPEG ehk JPG – sobib fotodele ja olukordadesse, kus on vaja võimalikult laialdast ühilduvust. Läbipaistvat tausta see ei toeta.
PNG – kasuta läbipaistva taustaga graafika puhul. Fotode jaoks on PNG-failid tavaliselt põhjendamatult suured.
SVG – sobib logodele, ikoonidele ja lihtsale vektorgraafikale, mis peab jääma teravaks igas suuruses. SVG-faile tasub kasutada ainult usaldusväärsest allikast.
AVIF – väga tõhusa pakkimisega uuem formaat. See võib anda eriti väikese failimahu, kuid kõigis töövoogudes ja tööriistades pole selle kasutamine veel sama mugav kui WebP puhul.
GIF – sobib üksnes väga lihtsate animatsioonide jaoks. Pikemate või värvilisemate animatsioonide puhul eelista videoformaati, näiteks MP4 või WebM.

Halb kasutajakogemus võib põhjustada kodulehe positsiooni languse otsingumootorites.

Soovituslikud pildifailide mahud

Need mahud on praktilised orientiirid, mitte ranged piirangud. Eesmärk on leida tasakaal piisava kvaliteedi ja väikese failimahu vahel.

Tavalised sisupildid ja fotod: võimalusel alla 200 KB.
Suured bännerid ja taustapildid: üldjuhul alla 300–500 KB.
Pisipildid ja väiksem graafika: võimalusel alla 100 KB.
Logod ja ikoonid: enamasti alla 50 KB; võimalusel kasuta SVG-formaati.
Fotode formaat: eelista WebP-d ja kasuta JPEG-i vajaduse korral alternatiivina.

Kui pilt muutub tihendamisel silmanähtavalt uduseks või tekivad kvaliteedivead, suurenda veidi kvaliteeti. Väikseim võimalik fail ei ole eesmärk omaette.

Samm-sammuline juhend: kuidas optimeerida pilte XnConverti abil?

XnConvert võimaldab korraga muuta mitme pildi mõõtmeid, formaati ja kvaliteeti. Tööriist sobib Windowsile, macOS-ile ja Linuxile.

XnConvert on tasuta era-, haridus- ja mittetulunduslikuks kasutuseks. Ettevõttes kasutamiseks tuleb tootja tingimuste kohaselt osta litsents.

1. Laadi XnConvert alla ja paigalda

Ava XnConverti ametlik veebileht, vali oma operatsioonisüsteemile sobiv versioon ning paigalda programm. XnConvert on saadaval Windowsile, macOS-ile ja Linuxile.

2. Lisa töödeldavad pildid

Ava XnConverti vahekaart Input. Lohista vajalikud pildid programmiaknasse või vali Add files. Terve kausta lisamiseks kasuta valikut Add folder.

Piltide lisamine XnConverti Input-vahekaardile

3. Määra piltide mõõtmed

Ava vahekaart Actions ja vali Add action → Image → Resize. Sisesta pildi soovitud laius ning lülita sisse Keep ratio, et pildi proportsioonid säiliksid.

Pildi mõõtmete muutmine XnConverti Resize-tööriistaga

Praktilised lähtekohad:

blogi- ja sisupildile piisab enamasti 1200 piksli laiusest;
suure bänneri või taustapildi laius võib olla 1600–1920 pikslit;
väikese pildi puhul lähtu selle tegelikust kuvamissuurusest;
ära suurenda väikest algfaili kunstlikult, sest see ei lisa pildile detaile.

Kõrge pikslitihedusega ekraani jaoks võib lähtefail olla ligikaudu kaks korda suurem kui pildi tegelik kuvamissuurus. Näiteks 600 piksli laiuselt kuvatava pildi lähtefail võib olla 1200 pikslit lai.

4. Vali failiformaat ja kvaliteet

Hea lähtekoht kvaliteedi määramisel:

WebP: 75–85%;
JPEG: 70–80%.

Väldi algfailide kogemata ülekirjutamist. Salvesta optimeeritud pildid esmalt eraldi kausta ning vajuta seejärel Convert.

WebP-formaadi ja pildikvaliteedi valimine XnConvertis

5. Kontrolli tulemust

Ava optimeeritud pildid ja võrdle neid algfailidega. Kontrolli pildi mõõtmeid, failimahtu ja nähtavat kvaliteeti.
Kui pilt tundub udune või sellel esineb nähtavaid kvaliteedivigu, suurenda veidi kvaliteediseadet ja töötle pilt uuesti. Kui kvaliteedierinevust pole märgata, kuid fail on endiselt suur, proovi kvaliteeti natuke vähendada.

Pildi failinimi ja alt-tekst

Anna pildile enne üleslaadimist sisu kirjeldav failinimi. Kasuta väiketähti ning eralda sõnad sidekriipsudega, näiteks wordpressi-kodulehe-avaleht.webp.

Alt-tekst kirjeldab pildi sisu inimesele, kes pilti ei näe, ning aitab otsingumootoril mõista pildi tähendust. Kirjuta lühidalt ja loomulikult, mida pildil näidatakse või millist infot see kannab.

Näiteks:

halb alt-tekst: pilt123;
parem alt-tekst: XnConverti seadistus WebP-pildi salvestamiseks.

Ära kuhja alt-teksti märksõnu. Kui pilt on üksnes dekoratiivne ega anna sisule uut tähendust, jäta alt-tekst tühjaks.

Mida tasub vältida?

Otse kaamerast või telefonist pärit piltide üleslaadimist. Algfail võib olla mitu megabaiti suur ja sisaldada rohkem piksleid, kui kodulehel vaja.
Liiga suurte mõõtmetega pilte. Kui pilti kuvatakse 1200 piksli laiuselt, pole üldjuhul vaja laadida üles 4000 piksli laiust faili.
Pildi vähendamist ainult lehe kujunduses. Brauser võib endiselt laadida suure algfaili, isegi kui seda kuvatakse ekraanil väiksena.
Fotode salvestamist PNG-formaadis. See võib muuta faili põhjendamatult suureks. Fotode puhul eelista WebP- või JPEG-formaati.
Liiga tugevat tihendamist. Väike failimaht ei korva hägust pilti ega nähtavaid kvaliteedivigu.
Arusaamatuid failinimesid. Failinimi IMG_4827.webp ei kirjelda pildi sisu. Kasuta võimalusel selget nime, näiteks wordpressi-kodulehe-avaleht.webp.

Kokkuvõte: miks piltide optimeerimine loeb?

Kodulehe piltide optimeerimine tähendab sobivate mõõtmete, failiformaadi ja tihendustaseme valimist. Õigesti ette valmistatud pildid aitavad lehel kiiremini avaneda, parandavad kasutuskogemust ja vähendavad serverisse salvestatava info mahtu.

XnConvert võimaldab töödelda korraga mitut pilti ning muuta nende mõõtmeid, formaati ja kvaliteeti. Enne piltide avaldamist kontrolli alati nii nende failimahtu kui ka nähtavat kvaliteeti.
Kui sinu WordPressi koduleht avaneb aeglaselt või vajab tehnilist korrastamist, tutvu meie kodulehe hooldusteenusega.