Želite da se vaša web stranica visoko rangira na Googleu? Želite da sadržaj koji objavljujete ostavi što bolji dojam na posjetitelje? Ako je odgovor da, onda nastavite čitati – u ovom članku saznat ćete sve o tome kako optimizirati slike za web.
Zašto su slike važne?
Korištenje fotografija i ilustracija na web stranici donosi brojne prednosti. Osim što obogaćuju vizualni dojam, grafike mogu privući nove korisnike putem Google pretraživanja slika.
Fotografije koje ste sami snimili ili ilustracije posebno izrađene za vaš sadržaj imat će veći učinak nego one preuzete sa stock servisa – jer nikad ne znamo koliko ih je drugih web stranica već koristilo, i u kojem kontekstu.
Bez obzira koristite li vlastite, kupljene ili besplatne slike, važno je naučiti kako ih pravilno optimizirati.
Što je optimizacija slika?
Optimizacija, u najširem smislu, znači pojednostavljivanje procesa uz postizanje najboljeg mogućeg rezultata. Kod slika i grafika za web to znači smanjenje veličine datoteke bez značajnog gubitka kvalitete.
Slike direktno s fotoaparata ili punih dimenzija iz stock biblioteka mogu ozbiljno usporiti vašu stranicu. To šteti korisničkom iskustvu, a spora stranica utječe i na lošiji rang na Googleu.
Zamislite web trgovinu u kojoj svaki proizvod ima više fotografija visoke rezolucije. Kako ponuda raste, stranice se sve sporije učitavaju – i korisnici odlaze. Google to vidi – i kažnjava padom u rezultatima pretrage.
No, tu nije kraj – nakon što pripremite slike i učitate ih u WordPress, preostaje SEO optimizacija slika, ali o tome malo kasnije. Krenimo redom.
1. Optimizacija veličine datoteke
Bez obzira koristite li profesionalne alate poput Photoshopa ili besplatne online servise, cilj je isti – smanjiti “težinu” slike.
Skaliranje i obrezivanje
Prvo provjerite u kojim dimenzijama će se slika prikazivati na stranici. Nema smisla učitavati veću sliku nego što je potrebno.
Zadržite izvorni omjer stranica prilikom skaliranja.
Ako vam treba drugačiji omjer ili samo dio slike – koristite obrezivanje.
Uvijek sačuvajte original u slučaju da vam kasnije zatreba.
2. Optimizacija formata datoteke
Najčešći formati na webu su: .JPG, .PNG, .GIF, .SVG i .WEBP. Svaki ima svoje prednosti:
JPG – idealan za fotografije.
PNG – za digitalne ilustracije, grafove, prozirnu pozadinu.
GIF – za jednostavne animacije.
SVG – lagan vektorski format za ikone, logotipe i crteže.
WEBP – moderni Googleov format koji podržava prozirnost i animaciju, a pruža izvrsnu kompresiju.
3. Kompresija slika
Kompresija smanjuje veličinu datoteke, a postoje dvije vrste:
Lossy (s gubitkom kvalitete)
Uklanja dio podataka iz slike, ali zadržava dobru kvalitetu – pogodno za web. Primjeri: JPG, WEBP (može biti i lossless).
Lossless (bez gubitka kvalitete)
Smanjuje veličinu zadržavajući izvornu kvalitetu slike. Pogodno za dijagrame, grafove itd. Primjeri: PNG, WEBP.
4. Optimizacija naziva datoteke
Pravilan naziv datoteke pomaže u SEO-u i indeksiranju. Ključne smjernice:
Koristite kratke, opisne nazive.
Izbjegavajte dijakritičke znakove (č, ć, š…).
Riječi razdvajajte crticom (-), a ne razmakom ili donjom crtom (_).
Primjer:
✅ ilustracija-programer.png
❌ IMG_2124.jpg
Dodajte ključne riječi gdje je moguće, npr. krakow-glavni-trg.jpg.
5. Image SEO – optimizacija unutar WordPressa
Nakon što ste sliku učitali u WordPress, ispunite sljedeća polja:
Alt tekst (alternativni opis)
Opisuje sadržaj slike – važan za pristupačnost (WCAG) i SEO.
Pomaže Googleu razumjeti sadržaj slike.
Prikazuje se ako se slika iz nekog razloga ne učita.
Naslov slike (title attribute)
Prikazuje se kada korisnik prijeđe mišem preko slike.
Nema jak utjecaj na SEO, ali poboljšava korisničko iskustvo.
Savjet: Nemojte duplicirati iste opise u imenu, alt tekstu i naslovu slike.
6. Alati za optimizaciju slika
Desktop aplikacije
Photoshop (“Save for Web” opcija)
ImageOptim (Mac)
Riot (Windows)
Online alati
WordPress pluginovi
Smush
Robin Image Optimizer
TinyPNG
EWWW Image Optimizer
WebP Express
7. Kako provjeriti učinak optimizacije?
Za kraj, evo nekoliko besplatnih alata koji analiziraju brzinu vaše web stranice:
