Preskoči na sadržaj
BeoHosting
BeoHosting

2 min

Optimizacija slika za web

WebP, AVIF, kompresija i lazy loading.

BeoHosting Tim

10+ godina iskustva — Stručnjaci za web hosting i infrastrukturu

Posljednje ažurirano:

Slike čine u prosjeku 50-70% ukupne veličine web stranice. Neoptimizovane slike su najčešći razlog sporog učitavanja sajtova, loseg Core Web Vitals skora i visokog bounce rate-a. Google je potvrdio da je brzina sajta faktor rangiranja, a slike su oblast gdje je moguće postici najveća poboljšanja sa najmanje truda.

Optimizacija slika za web

1

Izaberite pravi format slike

Koristite JPEG za fotografije i slike sa puno boja i gradijenata. PNG za slike sa transparentnoscu, logotipe i grafike sa ostrim ivicama. WebP za moderni format koji kombinuje kvalitet JPEG-a sa transparentnoscu PNG-a uz 25-35% manje veličine fajla. AVIF za najnoviji format sa još boljom kompresijom (do 50% manji od JPEG-a), ali ogranicenom podrškom u starijim pregledacima.

2

Smanjite dimenzije slike

Ne postavljajte sliku od 4000x3000 piksela ako se prikazuje u prostoru od 800x600 piksela. Smanjite dimenzije slike na maksimalnu veličinu u kojoj će se prikazivati na sajtu. Za full-width hero slike koristite maksimalno 1920px širine. Za slike u sadržaju obično je dovoljno 800-1200px. Za thumbnailove 300-400px. Koristite srcset atribut da pregledač automatski učita pravu veličinu za svaki uređaj.

3

Kompresujte slike (lossy vs lossless)

Lossy kompresija smanjuje veličinu fajla uklanjanjem nekih podataka o slici - za fotografije, JPEG kvalitet 75-85% je optimalan balans između kvaliteta i veličine. Lossless kompresija ne gubi kvalitet ali manje smanjuje veličinu - koristite za logotipe i grafike. Alati poput TinyPNG, Squoosh ili ShortPixel automatski optimizuju slike sa minimalnim gubitkom kvaliteta.

4

Koristite lazy loading

Lazy loading odlaze učitavanje slika koje nisu vidljive na ekranu dok korisnik ne skroluje do njih. Ovo dramatično ubrzava inicijalno učitavanje stranice. U modernom HTML-u, dodajte atribut loading=

5

Dodajte alt tekst za svaku sliku

Alt tekst (alternativni tekst) opisuje sadržaj slike za pretraživače i korisnike sa oštećenim vidom. Dobar alt tekst je koncizan, opisuje šta je na slici i uključuje ključnu reč ako je relevantna. Na primjer:

6

Koristite CDN za slike

CDN (Content Delivery Network) distribuira vaše slike na servere širom svijeta i isporučuje ih sa najblizeg servera posjetiocu. Ovo smanjuje vrijeme učitavanja za posjetioce iz različitih geografskih lokacija. Na BeoHosting-u, LiteSpeed Cache plugin nudi besplatnu integraciju sa QUIC.cloud CDN-om koji automatski optimizuje i distribuira vaše slike.

Spremni da pokrenete svoj sajt?

SSL zaštita
Brzina
24/7 podrška

Pridružite se 4.000+ zadovoljnih korisnika. Besplatna migracija i 15 dana garancije povrata novca.

15 dana garancija povrata novca
Besplatna migracija15 dana garancija24/7 podrška

FAQ

Odgovori na najčešća pitanja o našim uslugama.

Za fotografije: WebP je trenutno najbolji izbor jer nudi odličan kvalitet sa 25-35% manjom veličinom od JPEG-a i podržavaju ga svi moderni pregledaci. Za grafike sa transparentnoscu: WebP ili PNG. Za najnovije sajtove: AVIF nudi još bolju kompresiju ali ima ograniceniju podršku. Kao fallback, koristite JPEG za fotografije i PNG za grafike.

Slike čine u prosjeku 50-70% ukupne veličine web stranice. Pravilnom optimizacijom (kompresija, pravi format, lazy loading, responsive veličine) možete smanjiti vrijeme učitavanja stranice za 40-60%. Na primjer, tipična stranica sa 10 neoptimizovanih slika (ukupno 5MB) može se smanjiti na 800KB-1.5MB bez vidljivog gubitka kvaliteta.

WebP danas podržava preko 97% pregledaca uključujući Chrome, Firefox, Safari, Edge i Opera. Jedini pregledaci koji ne podržavaju WebP su Internet Explorer (koji je ukinut) i veoma stare verzije Safari-a (prije 14.0). Za maksimalnu kompatibilnost, koristite HTML picture element sa WebP kao primarnim formatom i JPEG/PNG kao fallback-om.

Na BeoHosting-u, najlakši način je LiteSpeed Cache plugin koji automatski kompresuje slike, konvertuje ih u WebP format i dodaje lazy loading. Alternativno, instalirajte ShortPixel ili Imagify plugin koji automatski optimizuje svaku sliku pri uploadu. Takođe, koristite srcset atribut (WordPress ga automatski generiše) da pregledač učita odgovarajucu veličinu slike za svaki uređaj.

Core Web Vitals su Google-ovi pokažatelji korisničkog iskustva: LCP (Largest Contentful Paint - vrijeme učitavanja najvećeg elementa), CLS (Cumulative Layout Shift - vizuelna stabilnost) i INP (Interaction to Next Paint - interaktivnost). Slike direktno utiču na LCP jer je najčešći najveći element na stranici upravo slika. Optimizovane slike sa definisanim width/height atributima poboljšavaju i LCP i CLS.

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.