Enamik aeglaseid kodulehti ei ole aeglased halva hostingu või pluginate pärast. Nad on aeglased, sest keegi laadis üles telefoniga tehtud 6 MB fotosid ja jättis need nii. Pildid on tavaliselt lehe kõige raskem osa ning just need otsustavad, kas külastaja ootab 0,2 sekundit või kuus ning viimase puhul “jalad hääletavad”.
Selles artiklis on konkreetsed vastused: millist formaati millal kasutada, mis kvaliteediga salvestada ja kui suured pildid peaksid olema. Kui tahad teada, miks kaunid pildid ja uhked videod su lehe sageli hoopis põhja lasevad, siis loe esmalt seda artiklit ja tule siis tagasi praktiliste numbrite juurde.
Kolm asja, mis loevad (järjekorras)
Pildi optimeerimisel on kolm “kangi” ja nende mõju on väga erinev:
- Mõõtmed (pikslid): kõige suurem mõju. 4000 px lai foto, mida näidatakse 800 px alal, on raiskamine.
- Formaat: teine suurim mõju. Õige formaat vähendab faili 25–50%.
- Kvaliteet (tihendus): viimane viimistlus. Õige kvaliteet vähendab veel 30–60%, ilma et silm vahet märkaks.
Alusta alati mõõtmetest, mitte kvaliteedi nuppudest.
Millal mis formaati kasutada
| Pildi tüüp | Parim formaat | Alternatiiv |
|---|---|---|
| Foto (inimesed, loodus, tooted) | WebP | JPG, AVIF |
| Logo, ikoon, lihtne illustratsioon | SVG | PNG (kui SVG pole võimalik) |
| Ekraanipilt tekstiga, teravad servad | WebP (lossless) | PNG |
| Läbipaistva taustaga pilt | WebP | PNG, SVG |
| Animatsioon | MP4 või WebM | Animeeritud WebP |
WebP: sinu vaikevalik
WebP on kaasaegne formaat, mis toetab nii tihendatud (lossy) kui ka kadudeta (lossless) pilte ning ka läbipaistvust. Faili suurus on tavaliselt umbes 25–35% väiksem kui sama nägemisega JPG-l. Kõik tänapäevased brauserid toetavad seda ja WordPress laseb WebP-sid üles laadida alates versioonist 5.8.
Kui sul pole mõjuvat põhjust muu valimiseks, kasuta alati WebP-d.
JPG: vana, kuid töötav
JPG sobib fotodele ja töötab igal pool. Kasuta seda varuvariandina või kui sa kohtad süsteemi (e-kiri, vana CMS, teise osapoole platvorm), mis WebP-d ei toeta. Läbipaistvust JPG ei toeta.
PNG: ainult siis, kui vaja
PNG on kadudeta formaat, mis sobib ekraanipiltidele, teravate servadega graafikale ja läbipaistvusele. Fotodel on PNG aga väga raske (mitu korda suurem kui JPG). Enamasti saad sama tulemuse väiksema failiga, kui salvestad kadudeta WebP-na.
SVG: vektorgraafika
SVG ei ole pikslipõhine, vaid joonistatud matemaatiliselt, mistõttu see on iga suurusega terav ja tihti väga väike (mõni KB). Kasuta seda:
- logode jaoks
- ikoonide jaoks
- lihtsate illustratsioonide ja diagrammide jaoks
SVG ei sobi fotodele. Failisuurus kasvab kiiresti ja kvaliteet ei parane.
NB! WordPressi hoiatus ei luba SVG üleslaadimist vaikimisi, sest SVG võib sisaldada koodi ja kui kasutad SVG-d, paigalda usaldusväärne plugin (nt Safe SVG) ning lae üles ainult faile, mille allikat usaldad. Enne üleslaadimist võid faili tihendada tööriistaga SVGO või SVGOMG.
AVIF: tulevikuvalik
AVIF on veelgi tõhusam kui WebP (tavaliselt umbes 50% väiksem kui JPG), kuid kodeerimine on aeglasem ja tööriistade tugi veel väiksem. WordPress toetab AVIF-i alates versioonist 6.5 ja kui oled valmis lisaaega kulutama, on see hea valik. Alustajale piisab aga kenasti WebP-st.
GIF: väldi
Animeeritud GIF (so 90’s) on tihti kümneid kordi raskem kui sama sisuga MP4 või WebM video ning kui vajad lühikest animatsiooni, kasuta videot (tihti ilma helita, automaatse taasesitusega) või animeeritud WebP-d.
Millise kvaliteediga salvestada?
Siin on kõige levinum segadus: kvaliteedinumbrid ei ole formaatide ja tööriistade vahel võrreldavad. WebP 80 ja JPG 80 ei näe välja ühesugused ning iga tööriist kasutab veidi erinevat skaalat. Seetõttu on allpool soovituslikud vahemikud, mitte reeglid.
| Formaat / tööriist | Soovituslik kvaliteet | Märkus |
|---|---|---|
| JPG (Photoshop Save As, 0-12)* | 8-10 (alusta 9-st) | 12 on peaaegu kadudeta ja tekitab asjatult suure faili |
| JPG (Photoshop Export As, Save for Web, Squoosh jm, 0-100)* | 75-85 (alusta 80-st) | Alla 70 hakkavad ilmnema ruudulised artefaktid |
| WebP (lossy) | 75-80 | Visuaalselt umbes sama mis JPG 80-85, aga väiksem |
| WebP (lossless) | Kadudeta | Graafikale ja ekraanipiltidele |
| AVIF | 50-65 | Skaala sõltub tööriistast, testi |
| PNG | Kadudeta | Kvaliteedi liugurit pole, tihenda värvide arvu vähendamisega (PNG-8) |
| SVG | Kadudeta | Tihenda SVGO-ga, eemalda mittevajalik kood |
* Photoshopis on JPG kvaliteedil kaks skaalat. Käsk Save As kasutab skaalat 0-12, kus 8-10 vastab ligikaudu 75-85 skaalal 0-100. Käsk Export As ja Save for Web kasutavad skaalat 0-100. Skaalad ei ole täpselt võrreldavad, seega kontrolli tulemust silmaga.
Praktiline reegel: hakka kvaliteeti vähendama, kuni märkad erinevust, ja tõsta siis natuke tagasi. Skaalal 0-12 on see tavaliselt umbes 8-9, skaalal 0-100 umbes 75-80. Seda saab teha tasuta tööriistas Squoosh, mis näitab originaali ja tihendatud versiooni kõrvuti.
Üks asi veel: WordPress tihendab üleslaetud JPG-sid vaikimisi (umbes 82 kvaliteedini), seega tihendamine, mille teed enne üleslaadimist, ja tihendamine, mille teeb WordPress, liituvad. Ära tihenda enne üleslaadimist liiga agressiivselt.
Kui suured pildid peaksid olema?
Sobiv laius sõltub sellest, kus pilti kasutad:
- Tavaline sisupilt: 1200–1600 px lai
- Täislaiusega hero-pilt: 1920 px lai (tihti piisab 1600-st)
- Väike pilt (nt autori foto, tootepilt): 2× kuvatavast suurusest (retina-ekraanide jaoks)
- Logo ja ikoonid: SVG, mõõtmetest pole vahet
Faili suuruse orienteeruv sihtmärk:
- sisupilt: alla 100–150 KB
- hero-pilt: alla 200–300 KB
Need ei ole ranged reeglid, kuid kui pilt on üle 500 KB, tasub see üle vaadata.
WordPress genereerib igast pildist mitu suurust ja pakub brauserile sobivat (srcset), nii et mobiil ei lae sama suurt faili kui töölaud. Selleks peab originaal olema sobiva suurusega, mitte 6000 px lai.
Veel mõned asjad, mis pilte kiirendavad
- Laisk laadimine (lazy loading): WordPress lisab selle vaikimisi. Ära aga lazy-laadi lehe esimest suurt pilti (hero), vaid anna sellele eelisjärjekord (
fetchpriority="high"). Vastasel juhul aeglustub Core Web Vitals näitaja LCP. - Mõõtmed HTML-is: lisa pildile laius ja kõrgus (WordPress teeb seda ise), siis leht ei hüppa pildi laadimisel ja CLS jääb madalaks.
- Metaandmed: eemalda EXIF-andmed (kaamera, asukoht). Need kaaluvad ja võivad lekitada privaatset infot.
- Failinimi ja alt-tekst: kirjelda pilti selgelt, nt
kass-arvuti-taga-poolik-wordpressi-leht.webp. Alt-tekst aitab nii otsingumootorit kui ka nägemispuudega lugejat, vaata ligipääsetavuse ja SEO kiireid parandusi. - Hosting: kiire hosting ei asenda piltide optimeerimist, kuid aeglane hosting teeb raske pildi veel aeglasemaks. Loe ka: Veebilehe hostingu hind – miks 9 €/kuus tundub kallis.
Lihtne töövoog igale pildile
- Muuda suurus õigeks laiuseks (nt 1600 px).
- Vali formaat: foto → WebP, logo → SVG.
- Salvesta soovitatud kvaliteediga (WebP 75–80) ja võrdle originaaliga (Squoosh).
- Nimeta fail selgelt (väiketähed, sidekriipsud, ilma täpitähtedeta).
- Lae üles ja lisa alt-tekst.
Kui laed pilte palju üles, võid kasutada WordPressi pluginat (nt ShortPixel, Imagify, EWWW või Smush), mis tihendab ja teisendab pildid WebP-ks automaatselt. Eelmainitud 5 sammu kehtivad ikkagi, sest plugin ei saa parandada liiga suurt originaali sama hästi kui sina.
Korduma kippuvad küsimused
Milline pildiformaat on kodulehele parim?
Fotodele on parim WebP, logodele ja ikoonidele SVG. JPG on hea varuvariant ja PNG sobib ainult siis, kui vajad kadudeta ekraanipilti või läbipaistvust ja WebP ei sobi.
Mis kvaliteediga peaks WebP ja JPG salvestama?
JPG puhul 75-85 skaalal 0-100 (Photoshopi Save As puhul 8-10 skaalal 0-12), WebP lossy puhul 75-80. Kvaliteedinumbrid ei ole formaatide ega tööriistade vahel otseselt võrreldavad, seega kontrolli tulemust silmaga.
Kas WebP on parem kui JPG?
Jah, tavaliselt on WebP sama nägemise juures umbes 25–35% väiksem. Kõik tänapäevased brauserid toetavad seda ja WordPress laseb WebP-sid üles laadida.
Millal kasutada SVG-d?
Logode, ikoonide ja lihtsate illustratsioonide jaoks. SVG on iga suurusega terav ja väga väike, kuid ei sobi fotodele. WordPressis vajab SVG üleslaadimine lisapluginat.
Kui suur pilt kodulehel olema peaks?
Sisupildi laius tavaliselt 1200–1600 px ja failisuurus alla 100–150 KB. Hero-pilt võib olla 1600–1920 px lai ja alla 200–300 KB.