10 min
Kako optimizirati slike za splet
WebP, AVIF, lazy loading, CDN in srcset.
BeoHosting Tim
10+ godina iskustva — Stručnjaci za web hosting i infrastrukturu
- Gostovanje
- WordPress
- cPanel
- SEO
- E-pošta
- Varnost
- Domene
Poslednje ažurirano:
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.
Spremni da pokrenete svoj sajt?
Pridružite se 4.000+ zadovoljnih korisnika. Besplatna migracija i 15 dana garancije povrata novca.
FAQ
Odgovori na najčešća pitanja o našim uslugama.
Naše garancije za vaš mir
Zaštićeni ste sa svake strane
15 dana garancije
Vraćamo novac bez pitanja u prvih 15 dana.
Besplatna migracija
Mi prebacimo vaš sajt bez prekida — vi ništa ne radite.
24/7 podrška
Naši stručnjaci su tu 24/7 kroz tikete i live chat.