Hero pilt 400-500KB? 2025. aastal on see vananenud soovitus. Realistlikud pildisuurused hero, toote ja blogi jaoks – WebP, AVIF ja responsive pildid selgitatud.

Sisukord

Veebis levib soovitus: hero pilt võiks olla kuni 400-500 KB. Kui see tundub suur, siis ongi – see on 2025. aastal eksitav nõuanne, mis pärineb ajast enne WebP ja AVIF formaate ning enne mobiili-first indekseerimist.

Tegelikkus: Hundikuu.ee avaleht kasutab hero pilti, mis on mobiilil 20,6 KB ja desktopil ~150 KB WebP formaadis. Visuaalselt täiusliku kvaliteediga. Lighthouse 98/100 mobiilil.

500 KB vs 20 KB – see vahe on 25-kordne. Aeglasel mobiiliühendusel tähendab see erinevust ühe sekundi ja pool minuti vahel.

Miks pildi suurus nii palju loeb

Pilt ei ole lihtsalt fail – see on andmeedastus. Iga kilobait tuleb üle võrgu külastaja seadmesse liikuda.

Kiire WiFi-ga kontoris ei märka sa vahet. Aga veebilehe külastajad ei ole alati kontoris kiire ühendusega. Nad on autos 4G-l, mis läheb tunnelis 3G-le. Nad on maakodus, kus signaal on nõrk. Nad on välismaal roamingul, kus andmeside on kallis ja aeglane.

Google mõõdab lehe kiirust aeglase 4G ühenduse simulatsiooniga – täpselt sellepärast, et see vastab reaalsetele kasutustingimustele. 500 KB hero pilt aeglasel ühendusel = mitu sekundit valget ekraani enne kui midagi nähtavale ilmub.

Lazy loading ei lahenda pildi suuruse probleemi. See on levinud eksiarvamus. Lazy loading lükkab pildi laadimise edasi kuni see ekraanile jõuab – aga kui pilt on 500 KB, laeb ta ikkagi 500 KB. Lihtsalt hiljem. Kasutaja ootab ikkagi.

JPEG soovitamine 2026. aastal on vananenud nõuanne

JPEG on 1992. aastal loodud formaat. See tegi revolutsiooni omal ajal. Tänapäeval on paremad alternatiivid:

WebP – Google’i 2010. aastal loodud formaat. Sama kvaliteet, 25-35% väiksem fail kui JPEG. Toetab kõik tänapäevased brauserid. Ei ole mingit põhjust JPEG-i eelistada.

AVIF – veel uuem formaat, 50% väiksem kui JPEG sama kvaliteedi juures. Tugi on laienenud – Chrome, Firefox, Safari kõik toetavad. WordPress 6.5+ toetab AVIF genereerimist natiivselt.

Mida see tähendab praktikas: foto, mis JPEG formaadis on 300 KB, on WebP-na 200 KB ja AVIF-na 150 KB. Sama pilt, sama kvaliteet, kolmandiku võrra väiksem fail.

Realistlikud suurused eri pilditüüpide jaoks

Need ei ole teoreetilised – need on tegelikus kasutuses toimivad numbrid.

Hero pilt (avaleht, päisebänner)

Ekraan	Laius	Failisuurus	Formaat
Mobiil (kuni 480px)	640px	15-30 KB	WebP
Tablet (481-1024px)	1024px	40-80 KB	WebP
Desktop (1025-1920px)	1920px	100-180 KB	WebP/AVIF

500 KB hero pilt on alati optimeerimata. Alati.

Blogipostituse päisepilt

Ekraan	Laius	Failisuurus
Mobiil	768px	20-50 KB WebP
Desktop	1200px	60-120 KB WebP

Tootefoto (WooCommerce)

Kasutus	Laius	Failisuurus
Pisipilt kataloogis	400px	15-40 KB WebP
Tootelehe peapilt	800px	40-100 KB WebP
Zoom/suurendus	1200px	80-150 KB WebP

Sisuteksti kõrval olev pilt

800-1000px laius, 30-80 KB WebP.

Logo ja ikoonid

SVG alati kui võimalik – vektor skaleerub ilma kvaliteedikaota, tüüpiline failimaht 5-20 KB. PNG alternatiivina, läbipaistva taustaga.

Retina ekraan ei tähenda topelt failimaht

Levinud müüt: “Retina ekraanid vajavad 2x suuremaid pilte, seega pean kasutama suuremaid faile.”

Tegelikkus: Retina ekraan vajab 2x suurema pikslite arvuga pilti, aga see pilt peab olema tugevamalt kompresseeritud. Tulemus peaks olema sama suur fail, mitte kaks korda suurem.

Näide: desktop hero, mis kuvatakse 960px laiusena Retina ekraanil:

Pildi laius: 1920px (2x)
Fail: 150 KB WebP (tugevalt kompresseeritud)
Tulemus: terav Retina ekraanil, mõistlik failimaht

Võrdluseks: sama pilt JPEG formaadis 500 KB on 3x suurem fail, aga ei ole Retina ekraanil isegi parem – lihtsalt rasvam.

Kuidas seda Wordpressis hallata

1. Imagify plugin – automaatne WebP/AVIF konversioon üleslaadimise hetkel. Vana pilt asendatakse optimeeritud versiooniga. Tasuta versioon katab väiksema saidi vajadused, Pro on mõistliku hinnaga.

2. WordPress responsive pildid (srcset) – WordPress genereerib automaatselt eri suurustes versioone üleslaetud piltidest. Brauser laeb automaatselt ekraanile sobiva suuruse. See on sisse ehitatud funktsionaalsus – kasuta seda.

Kontrolli Settings → Media – seal saab määrata pisipildi, keskmise ja suure pildi mõõtmed. Vaikimisi on need sageli liiga suured. Mõtle läbi, mis suurusi teema tegelikult kasutab.

3. fetchpriority=”high” hero pildile – see atribuut ütleb brauserile, et hero pilt on prioriteet. Laeb enne teisi ressursse, mõjutab positiivselt FCP (First Contentful Paint) mõõdikut.

<img src="hero.webp" fetchpriority="high" alt="..." />

WP Rocket ja teised cache pluginad lisavad selle automaatselt above-fold piltidele.

4. Lazy loading kõigile teistele piltidele – WordPress lisab loading="lazy" atribuudi automaatselt kõigile piltidele peale esimese. Ära eemalda seda.

Ilu vs kiirus – kas on kompromiss?

Ei ole, kui optimeerimine on õigesti tehtud.

Hundikuu.ee hero pilt on visuaalselt rikkalik gradient-taust koos serverite illustratsiooniga. See näeb hea välja 5K monitoril ja iPhone’il. Failimaht on 20 KB mobiilil.

Probleem ei ole ilusates piltides. Probleem on selles, et pildid serveeritakse ilma mõtlemiseta – üks suur fail kõigile ekraanidele, vale formaat, puuduv kompressioon.

Õige lähenemine:

Üles laadida kõrge kvaliteediga originaal (Imagify teeb optimeerimise)
Responsive pildid (WordPress genereerib eri suurused)
WebP/AVIF formaat (automaatne konversioon)
Õiged suurused eri ekraanidele (srcset + sizes atribuudid)

Tulemus on visuaalselt sama hea – sageli parem, sest väiksem fail laeb kiiremini ja tekst ilmub varem.

Kontrollnimekiri enne pildi üleslaadimist

[ ] Kas formaat on WebP või AVIF? (mitte JPEG ega PNG fotode puhul)
[ ] Kas mõõdud vastavad kasutusele? (hero pilt ei vaja 3000px laiust)
[ ] Kas failimaht on mõistlik? (hero pilt alla 200 KB desktopil, alla 50 KB mobiilil)
[ ] Kas failinimi on kirjeldav? (“hero-wordpress-optimeerimine.webp”, mitte “IMG_4521.jpg”)
[ ] Kas alt tekst on lisatud?
[ ] Kas hero/above-fold pildil on fetchpriority=”high”?

Piltide optimeerimine ei ole keeruline – see on distsipliin. Üks kord süsteemi seadistada (Imagify + õiged WordPress meediumisuurused + responsive pildid), edasi töötab automaatselt.