2 min
Optimizacija slika za web
WebP, AVIF, kompresija i lazy loading.
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
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.
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.
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.
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=
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:
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?
Pridružite se 4.000+ zadovoljnih korisnika. Besplatna migracija i 30 dana garancije povrata novca.
FAQ
Odgovori na najčešća pitanja o našim uslugama.
Pozovite nas: podrška radi 24/7, telefonom i kroz tikete.
(+381) 60 3535 720Koji format slike je najbolji za web?
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.
Koliko optimizacija slika utiče na brzinu sajta?
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.
Da li WebP radi u svim pregledacima?
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.
Kako optimizovati slike na WordPress sajtu?
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.
Šta su Core Web Vitals i kako slike utiču na njih?
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
30 dana garancije
Vraćamo novac bez pitanja u prvih 30 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.