Največji del prenesenih podatkov povprečne spletne strani predstavljajo slike, zato je optimizacija slik najpreprostejša in najučinkovitejša pospešitev. Fotografija s telefona, velika 5 MB, lahko v objavi na blogu sama po sebi nalaganje na mobilnem internetu upočasni za več sekund, medtem ko je dobro pripravljena različica s 100–200 KB na zaslonu videti enako dobro.

V tem vodniku pregledamo, katero obliko slike uporabiti kdaj, kako slike pripraviti pred nalaganjem, kaj iz tega WordPress naredi sam, kateri vtičniki pomagajo, kako obravnavati odloženo nalaganje in najpomembnejšo sliko (LCP) ter na kaj paziti pri SEO slik. Večina nasvetov velja za katero koli spletno stran, ne le za WordPress.

Zakaj je pomembno?

• Hitrost: velike slike upočasnijo nalaganje, zlasti na mobilnih napravah. Med kazalniki Google Core Web Vitals je Largest Contentful Paint (LCP), torej čas prikaza največjega vidnega elementa, na večini strani slika, zato ga optimizacija slik neposredno izboljša.
• Stabilnost postavitve: slike brez velikosti med nalaganjem »premetavajo« besedilo, kar meri kazalnik Cumulative Layout Shift (CLS).
• Prostor in promet: manjše slike porabijo manj prostora in prometa, tudi varnostne kopije so manjše.
• SEO: hitrejša stran daje boljšo uporabniško izkušnjo, dobro poimenovane slike z nadomestnim besedilom pa je mogoče najti tudi v iskalniku slik.

Katero obliko izbrati?

Oblika	Za kaj je dober	Opomba
AVIF	Fotografije, najmanjša velikost datoteke	Podpirajo jo vsi sodobni brskalniki; v WordPress jo je mogoče naložiti od različice 6.5, če jo knjižnica slik na strežniku obvlada
WebP	Fotografije in grafike, tudi s prosojnostjo	Običajno 25–35 % manjša od JPEG, podpirajo jo vsi sodobni brskalniki
JPEG	Fotografije	Univerzalna, a večja od WebP in AVIF
PNG	Posnetki zaslona, grafike z ostrimi robovi, prosojnost	Za fotografije prevelika; običajno jo lahko nadomesti WebP
SVG	Logotipi, ikone, preproste grafike	Vektorska, v kateri koli velikosti ostra in majhna; nalaganje je iz varnostnih razlogov priporočljivo le iz preverjenih virov
GIF	–	Tudi za animacijo je boljši kratek video MP4 ali WebM

Praktično pravilo: za fotografije WebP (ali AVIF), za logotipe SVG, za posnetke zaslona WebP ali PNG. Če nisi prepričan, je WebP dobra privzeta izbira.

Priprava pred nalaganjem

1. Spremeni velikost. Vsebinski del objave na blogu je običajno širok 700–1200 slikovnih pik, slika glave čez celotno širino pa 1920 slikovnih pik. Fotografije s fotoaparata s 6000 slikovnimi pikami nikoli ne naloži v izvirni velikosti.
2. Stisni. Pri večini fotografij kakovosti 75–85 % (pri JPEG ali WebP) z očmi ni mogoče ločiti od izvirnika, velikost datoteke pa je le delček. Dobra ciljna vrednost za vsebinsko fotografijo je 100–200 KB, za veliko sliko glave pa 200–400 KB.
3. Izreži, česar ne potrebuješ: manjša površina slike pomeni tudi manjšo datoteko.
4. Odstrani metapodatke (EXIF): podatki fotoaparata in koordinate GPS po nepotrebnem povečajo datoteko in pomenijo tudi tveganje za zasebnost.
5. Daj povedno ime datoteke: namesto ljubljana-pisarna-čakalnica.webp brez šumnikov ljubljana-pisarna-cakalnica.webp, ne IMG_4567.jpg.

Orodja: v brskalniku Squoosh (Googlovo brezplačno orodje), TinyPNG (o njem govori ločen članek), na namiznem računalniku funkcija »izvoz za splet« v GIMP ali Photoshopu, za paketno obdelavo veliko slik pa ImageMagick.

Kaj naredi WordPress sam?

• Iz vsake naložene slike ustvari več velikosti (sličica, srednja, velika), z atributom srcset pa brskalnik prenese velikost, ki ustreza zaslonu.
• Zmanjša prevelike slike: za slike, širše od 2560 slikovnih pik, uporabi pomanjšano različico (izvirnik obdrži).
• Odloženo nalaganje: slikam zunaj vidnega območja samodejno doda atribut loading="lazy", tako se naložijo šele, ko se obiskovalec pomakne do njih.
• Prednost glavne slike: pri prvi, verjetno največji sliki odloženo nalaganje izpusti in jo z oznako fetchpriority="high" postavi naprej.
• Velikosti: navede atributa width in height, kar zmanjša premikanje postavitve.
• WebP in AVIF: WordPress obvlada WebP, od različice 6.5 pa tudi AVIF, če ga podpira knjižnica slik na strežniku (Imagick ali GD).

Kar ni samodejno: stiskanje naloženih slik in pretvorba v novo obliko. Za to so vtičniki.

Vtičniki za optimizacijo slik

Razširitev	Značilnost
ShortPixel	Stiskanje v oblaku, WebP/AVIF, paketna optimizacija obstoječih slik; z mesečno brezplačno kvoto
Imagify	Preprosto upravljanje, tri ravni stiskanja, WebP/AVIF
EWWW Image Optimizer	Stiska lahko tudi lokalno, na strežniku, zato ni zunanje kvote
Smush	Brezplačna osnovna različica z brezizgubnim stiskanjem, naprednejše funkcije so plačljive

Vsi znajo naknadno optimizirati tudi že naložene slike (paketna obdelava). Nekaj nasvetov:

• Uporabljaj en vtičnik in če slike optimizira tudi tvoj vtičnik za predpomnjenje, tam to izklopi.
• Ohrani izvirnik (večina vtičnikov to ponudi), da ga lahko pozneje obnoviš.
• Na deljenem gostovanju lahko lokalna obdelava pri veliko slikah doseže omejitev CPU računa; vtičniki v oblaku se temu izognejo, lahko pa paketno obdelavo zaženeš v manjših obrokih, v obdobju z malo prometa.
• Streženje WebP/AVIF lahko poteka z elementom <picture> ali s pravili .htaccess na strežniku; če uporabljaš CDN, preveri, kateri način podpira.

Video: Image optimization (WordPress, v angleščini)

Odloženo nalaganje in slika LCP

Odloženo nalaganje (lazy loading) pospeši pri slikah pod pregibom, vendar glavne slike (hero, izpostavljena slika) nikoli ne nalagaj odloženo: prikazati se mora čim prej, sicer se LCP poslabša. WordPress to privzeto obravnava pravilno, vendar nekatere predloge, graditelji strani ali vtičniki odloženo nalaganje dodajo vsem slikam. Preveri v poročilu PageSpeed Insights: če vidiš opozorilo »Largest Contentful Paint image was lazily loaded«, za prvo sliko izklopi odloženo nalaganje.

Dodatni nasveti za sliko LCP:

• naj bo čim manjša (WebP ali AVIF, ustrezna velikost),
• naj se ne naloži kot slika ozadja iz CSS, temveč kot element <img>,
• namesto počasnega drsnika uporabi eno samo statično sliko.

CDN

Omrežje za dostavo vsebin (CDN) slike streže s strežnika blizu obiskovalca, mnogi CDN-ji pa znajo slike sproti spremeniti po velikosti in pretvoriti v obliko WebP/AVIF. Koristen je, če veliko obiskovalcev prihaja od daleč ali nalagaš veliko slik. O nastavitvi govori naš vodnik za CDN.

SEO slik in dostopnost

• Nadomestno besedilo (alt): na kratko opiši, kaj je na sliki. Obiskovalcem z bralnikom zaslona je to vsebina slike, iskalnikom pa najpomembnejši signal. Pri zgolj okrasnih slikah ga lahko pustiš prazno.
• Ime datoteke: povedno, brez šumnikov, razčlenjeno z vezaji.
• Napis in okoliško besedilo: tudi besedilo ob sliki pomaga iskalnikom razumeti sliko.
• Zemljevid slik: vtičniki SEO slike običajno dodajo tudi v zemljevid strani.

Preverjanje

• PageSpeed Insights in Lighthouse: pokažeta prevelike, v napačni obliki ali odloženo naložene slike LCP. O merjenju govori naš vodnik za merjenje hitrosti spletne strani.
• Razvijalska orodja brskalnika (F12 › Omrežje, s filtrom »Img«): tu vidiš, kako velike slike se dejansko prenašajo.

Povzetek

Slike pred nalaganjem pomanjšaj in stisni, za fotografije uporabljaj WebP (ali AVIF), za logotipe SVG, obstoječe slike obdelaj z vtičnikom za optimizacijo slik, glavne slike ne nalagaj odloženo, vsaki vsebinski sliki pa daj nadomestno besedilo. S temi koraki se čas nalaganja večine spletnih strani občutno skrajša.

WordPress gostovanja aWh tečejo na NVMe SSD, s HTTP/2 in dnevno varnostno kopijo, zato hitrim slikam pripada tudi hitro streženje.

Pogosta vprašanja

Katera je najboljša oblika slik za WordPress?

Za fotografije WebP ali AVIF, za logotipe in ikone SVG, za posnetke zaslona WebP ali PNG.

Ali stiskanje poslabša kakovost slik?

Izgubno stiskanje načeloma da, vendar pri kakovosti 75–85 % razlike z očmi običajno ni videti, velikost datoteke pa bo le delček. Če je kakovost ključna (na primer pri fotografskem portfelju), izberi blažje stiskanje.

Kako velika naj bo slika?

Za vsebinsko fotografijo je dober cilj okoli 100–200 KB, za sliko glave čez celotno širino 200–400 KB, z velikostjo v slikovnih pikah, ki ustreza velikosti prikaza.

Kako optimiziram že naložene slike?

S paketno obdelavo vtičnika za optimizacijo slik (Bulk Optimization). Prej naredi varnostno kopijo, pri veliki medijski knjižnici pa jo zaženi v obdobju z malo prometa.

Ali vsaka slika potrebuje nadomestno besedilo?

Vsaka vsebinska slika da; pri zgolj okrasnih slikah ga lahko pustiš prazno, da jih bralnik zaslona preskoči.

Zakaj PageSpeed piše, naj uporabim sodobno obliko slik?

Ker so tvoje slike v obliki JPEG ali PNG, v WebP ali AVIF pa bi bile precej manjše. Vtičnik za optimizacijo slik to opravi samodejno.

Ali lahko vtičnik za optimizacijo slik upočasni stran?

Streženja ne, stiskanje pa lahko na deljenem gostovanju obremeni račun, zlasti pri lokalni obdelavi. V tem primeru izberi stiskanje v oblaku ali obdelavo zaženi v manjših obrokih.

• optimizacija slik
• wordpress
• hitrost spletne strani
• core web vitals
• vodniki