10 min
Kako optimizirati slike za splet
WebP, AVIF, lazy loading, CDN in srcset.
Ekipa BeoHosting
10+ let izkušenj — Strokovnjaki za spletno gostovanje in infrastrukturo
- Gostovanje
- WordPress
- cPanel
- SEO
- E-pošta
- Varnost
- Domene
Zadnja posodobitev:
Slike v povprečju predstavljajo 50-70 % skupne velikosti spletne strani. Neoptimizirane slike so najpogostejši vzrok počasnega nalaganja, slabega rezultata Core Web Vitals in visoke stopnje odhoda obiskovalcev. Google je potrdil, da je hitrost strani dejavnik uvrstitve, slike pa so področje, kjer z najmanj truda dosežete največje izboljšanje.
Kako optimizirati slike za splet
Izberite pravi format slike
Uporabite JPEG za fotografije in slike z veliko barvami in gradienti. PNG za slike s prosojnostjo, logotipe in grafike z ostrimi robovi. WebP je sodoben format, ki združuje kakovost JPEG s prosojnostjo PNG ob 25-35 % manjši velikosti datoteke. AVIF je najnovejši format z še boljšo kompresijo (do 50 % manjši od JPEG), a z omejeno podporo v starejših brskalnikih — zato ga uporabljajte z WebP ali JPEG fallbackom.
Zmanjšajte dimenzije slike
Ne nalagajte slike 4000x3000 pikslov, če se prikazuje v prostoru 800x600 pikslov. Zmanjšajte dimenzije na največjo velikost, v kateri se bo dejansko prikazala. Za hero slike čez celotno širino uporabite največ 1920 px širine, za slike v vsebini običajno zadošča 800-1200 px, za sličice pa 300-400 px. Za paketno spreminjanje velikosti uporabite orodje kot FastStone Photo Resizer.
Stisnite slike (lossy proti lossless)
Lossy kompresija zmanjša velikost datoteke z odstranitvijo dela slikovnih podatkov — za fotografije je JPEG kakovost 75-85 % optimalno ravnovesje med kakovostjo in velikostjo. Lossless kompresija ne izgubi kakovosti, a manj zmanjša velikost — uporabite jo za logotipe in grafike. Orodja kot TinyPNG, Squoosh ali ShortPixel samodejno optimizirajo slike z minimalno izgubo kakovosti.
Uporabite lazy loading
Lazy loading odloži nalaganje slik, ki niso vidne na zaslonu, dokler uporabnik ne pridrsa do njih. To drastično pospeši začetno nalaganje strani. V sodobnem HTML preprosto dodajte atribut loading="lazy" na oznako img. WordPress od različice 5.5 to počne samodejno. Pomembno: slike nad pregibom (above-the-fold), ki tvorijo LCP, naj NE bodo lazy, sicer poslabšate Core Web Vitals.
Dodajte alt tekst za vsako sliko
Alt tekst (alternativno besedilo) opisuje vsebino slike za iskalnike in uporabnike z okvaro vida. Dober alt tekst je jedrnat, opisuje, kaj je na sliki, in po potrebi vključuje ključno besedo. Na primer namesto „slika1.jpg" uporabite „rdeč usnjen kavč v dnevni sobi". Alt tekst izboljša dostopnost in pomaga pri uvrstitvi slik v Google Slike, kar lahko prinese dodaten promet.
Uporabite CDN za slike
CDN (omrežje za dostavo vsebine) razporedi vaše slike na strežnike po vsem svetu in jih dostavi z najbližjega strežnika obiskovalcu. To zmanjša čas nalaganja za obiskovalce z različnih geografskih lokacij. Pri BeoHostingu LiteSpeed Cache plugin ponuja brezplačno integracijo s QUIC.cloud CDN, ki samodejno optimizira, pretvarja v WebP in razporeja vaše slike.
Pripravljeni za zagon svoje strani?
Pridružite se 4.000+ zadovoljnim strankam. Brezplačna migracija in 15 dni garancije vračila denarja.
FAQ
Odgovori na najpogostejša vprašanja o naših storitvah.
Naša jamstva za vaš mir
Zaščiteni z vseh strani
15 dni garancije
Vrnemo denar brez vprašanj v prvih 15 dneh.
Brezplačna migracija
Mi prenesemo vašo stran brez prekinitve — vi ne delate ničesar.
24/7 podpora
Naši strokovnjaki so na voljo 24/7 prek vstopnic in live chata.