Kako optimizovati slike za web (WebP, dimenzije, kompresija)

3. Dimenzije: ne skalirajte u pregledaču

Pravilo: širina slike treba da odgovara širini prostora u kom se prikazuje. Za širinu članka od 700–800 px, slika od 1200–1600 px pokriva i retina ekrane (2×) i ostaje mala. Slika od 4000 px učitava se u celosti da bi se prikazala u 700 px – čist gubitak vremena i prometa.

• Srcset – WordPress automatski generiše nekoliko verzija svake slike (150, 300, 768, 1024, 1536 px) i pregledač bira pravu; ovo radi iz fabrike, samo nemojte ga isključivati.
• Skaliranje pre otpremanja – telefon slika u 4:3 formatu; smanjite na 1600 px širine pre otpremanja (na telefonu: podelite original pre deljenja na sajt).
• Šta ne skalirati – featured slike i hero sekcije; za njih ostavite malo više rezerve (do 1920 px) jer se prikazuju preko cele širine.

Vredi znati i da svaka tema definiše svoje veličine: WordPress za svaku sliku pravi nekoliko „rezanih“ verzija prema podešavanjima teme (npr. 1200×630 za naslovnu karticu). Ako vam se čini da se featured slika čudno seče u pregledu kategorije, uzrok je najčešće u odnosu strana koji tema očekuje – proverite dokumentaciju teme za preporučene dimenzije umesto da pogađate.

4. ALT tekst: opis za pretraživače i čitaoce

ALT tekst je alternativni opis slike: prikazuje se kada se slika ne učita i čita se naglas osobama koje koriste screen reader. Za SEO, Google ga koristi da razume šta slika prikazuje – pogotovo u Google Images pretrazi, koja blogovima donosi ozbiljan saobraćaj.

• Opisujte šta je na slici, ne šta piše u članku: „plavi ekran sa tabelom cena hostinga“, ne „najbolji hosting“.
• Prirodni jezik sa ključnom reči gde ima smisla – ali bez naguranavanja; ALT je opis, ne polje za optimizaciju.
• Dekorativne slike (razdvajači, apstraktne pozadine) – prazan ALT (alt="") da screen reader ne čita nepotrebno.
• Nikad „slika1.jpg“ ili „IMG_2043“ – to je znak neoptimizovanog sajta i za Google i za čitaoca.

Kako se ALT uključuje u širu sliku optimizacije članka (naslov, struktura, interni linkovi), pokriveno je u vodiču kako optimizovati članak za Google. Brzi primer razlike: za sliku ekranske fotografije plugin-a, loš ALT je „slika“ ili „wordpress“, dobar je „Yoast SEO panel u WordPress administraciji sa poljem za meta opis“. Prvi ne govori ništa; drugi opisuje sliku i pogađa upit „kako izgleda yoast podešavanje“ u Google Images pretrazi.

5. Lazy load: neka se slike učitavaju po potrebi

Lazy load odlaže učitavanje slika koje su ispod vidljivog dela stranice – učitaju se tek kada čitalac skroluje do njih. Prva slika se i onako vidi odmah; ostalih devet ne moraju trošiti promet pre nego što ih neko stvarno vidi. WordPress ima ugrađen lazy load (loading="lazy") od verzije 5.5 – radi automatski, bez plugin-a.

Jedino pravilo izuzetka: featured slika ili prva slika u članku neka učitavaju odmah (mnogi alati imaju opciju „exclude first image“). Razlog: ako se i ona lazy-uje, na sporijoj vezi čitalac vidi prazan prostor baš u momentu kada donosi odluku da li da ostane. Uz to, lazy load ne utiče na SEO: Google indeksira sve slike redovno, jer učitava stranicu kao pregledač sa „neograničenim“ strpljenjem – odlaganje je korisno samo za posetioca.

Automatizacija u WordPress-u

Ručna optimizacija svake slike radi se jednom – posle toga plugin radi umesto vas. Na listi obaveznih plugin-ova nalazi se i Smush (ili ShortPixel): kompresija pri otpremanju, lazy load, WebP konverzija i skaliranje – sve u jednom. Podesite jednom (kvalitet 82, WebP uključen, max širina 1600) i zaboravite. Uz keš plugin i brzu temu, slike prestaju da budu problem – a izbor teme utiče više nego što se misli (poređenje u tekstu najbolje WordPress teme za blogere: lake teme učitavaju manje resursa i brže prikazuju upravo slike). Jedino na šta treba paziti sa automatizacijom: plugin mora da bude aktivan i kada tekst i slike stižu iz drugih izvora (npr. saradnici otpremaju direktno) – jer optimizacija važi samo za slike koje prođu kroz njega.

Odakle uzeti slike (koje ćete onda optimizovati)

Dve teme koje se nadovezuju, a nisu obuhvaćene ovim tekstom: legalni izvori slika – Unsplash, Pexels, Pixabay i kada se isplati platiti stock (o tome u tekstu odakle uzeti slike za blog legalno), i AI generisanje – Midjourney, DALL-E i slični alati za vizuale po meri (u tekstu AI slike za blog). U oba slučaja isto pravilo važi za krajnji rezultat: bilo kakva slika ide kroz ovih pet koraka pre nego što završi na sajtu. Izvorni fajl (original sa stock sajta ili ekport iz AI alata) uvek sačuvajte negde van biblioteke – kada zatreba reizdanje u drugačijim dimenzijama, original je jedini od koga vredi krenuti.

Česta pitanja

Da li WebP kvare kvalitet slike?

Na kvalitetu 80–85 – ne, pod normalnim gledanjem na ekranu. Tek pri 100% uvećanju fotografije vidi se blaga razlika; za blog i prezenterijske sajteve, kompromis je nevidljiv, a ušteda ogromna.

Koliko slika smem da stavim u članak?

Nema tvrdog limita – merilo je težina stranice, ne broj. Sa optimizovanim slikama (100–200 KB po slici), 8–10 slika u članku ne predstavlja problem; sa neoptimizovanim, i tri mogu da uspore stranicu. Ako PageSpeed i dalje prijavljuje „slike nisu optimizovane“ – još uvek ima čega.

Šta sa starim slikama koje sam već otpremio?

Plugin-i za optimizaciju imaju „bulk“ opciju: prolaz kroz celu biblioteku i konverziju postojećih fajlova, obično u besplatnom limitu (par stotina slika). Za blogove sa desetinama hiljada slika, to je posao od par sati u pozadini – i najbrži način da se stari sadržaj ubrza bez ijedne izmene teksta.

Zaključak

Optimizacija slika je retka stvar u web svetu koja je istovremeno najlakša i najisplativija: WebP umesto formata iz 90-ih, 1600 px umesto 4000, kvalitet 82 umesto „maksimalno“, ALT umesto „slika1“ i lazy load za slike ispod prevoja. Pet koraka, sat vremena jednokratnog rada plus plugin za buduće – i sajt koji se učitava pre nego što čitalac stigne da se predomišlja.

Na prosečnom blogu slike čine do 80% težine stranice. To znači da je optimizacija slika najbrži i najjeftiniji način da sajt postane brži – bez promene hostinga, bez dodavanja kod, bez dizajnera. U ovom vodiču prolazimo kroz pet koraka optimizacije slika za web: WebP format, prave dimenzije, kompresija bez gubitka kvaliteta, ALT tekst i lazy load. Svaki korak pojedinačno daje merljiv dobitak; zajedno, sajt koji se učitava 4 sekunde često završi ispod jedne.

Pre nego što počnete, izmerite polazno stanje: otvorite PageSpeed Insights ili DevTools (Network tab, filtrirajte „Img“) i pogledajte koliko KB/MB stranica vuče u slikama. Ta brojka je vaša pre i posle – jer optimizacija bez merenja je osećaj, a osećaj zavarava. A ako je rezultat merenja loš i posle svih koraka iz ovog teksta, problem je možda širi od slika.

Zašto su neoptimizovane slike problem

Fotografija sa telefona danas ima 12 megapiksela i 4–6 MB; na sajtu se prikazuje u širini od 800 px, gde je 400 KB više nego dovoljno. Deset takvih slika u članku = 40 MB podataka koje posetilac na mobilnoj mreži skida da bi video – tekst. Posledice: sporo učitavanje (što posetilac kažnjava odlaskom), loš Core Web Vitals (što Google kažnjava rangom) i trošenje mobilnog prometa čitalaca. Opšti kontekst zašto brzina uopšte utiče na rezultate imate u tekstu brzina sajta: zašto je bitna i kako je poboljšati; ovde se bavimo konkretno slikama.

1. WebP format: manji fajlovi, isti kvalitet

WebP je format koji je Google razvio kao zamenu za JPEG i PNG: pri istom vizuelnom kvalitetu fajl je 25–35% manji od JPEG-a i do 26% manji od PNG-a. Podržavaju ga svi moderni pregledači (Chrome, Firefox, Safari, Edge), pa razloga za oklevanje danas nema.

• WordPress 5.8+ automatski kreira WebP verzije svih otpremljenih slika (proverite u Podešavanja → Mediji da li je uključeno).
• Za postojeće slike – plugin (Smush, ShortPixel) konvertuje celu biblioteku u jednom prolazu.
• Konverzija pojedinačne slike – online alati (ili cwebp komanda, deo Google-ovog webp paketa: cwebp -q 82 input.jpg -o output.webp).

Praksa: otpremite uvek original, a WebP neka bude izlazni format za prikaz – tako čuvate kvalitet za kasnije potrebe (štampa, revizije) dok sajt prikazuje laganu verziju. Ako brinete oko starijih pregledača: podrška za WebP je danas preko 96% korisničke baze, a WordPress i plugin-i čuvaju i JPG/PNG verziju kao fallback za ostatak – nikog ne ostavljate bez slike.

2. Kompresija: gde je granica kvaliteta

Kompresija je uklanjanje informacija koje oko ne primećuje. Ključni brojevi:

• JPEG/WebP kvalitet 80–85 – vizuelno identično originalu, fajl 5–10 puta manji. Ispod 70 primećuje se magla oko teksta i ivica; iznad 90 gubite megabajte za nula vizuelnog dobitka.
• PNG samo za grafiku – logotipi, dijagrami, slike sa tekstom i prozirnošću; za fotografije je PNG uvek pogrešan izbor (3–5× veći fajl bez ikakve prednosti).
• Dimenzije pre kompresije – skaliranje na ciljnu širinu prvo, pa tek onda kompresija; kompresija originala od 4000 px troši vreme za fajl koji ionako nikad neće biti prikazan.

Uz kompresiju, plugin-i obično skidaju i EXIF podatke – informacije o fotoaparatu, GPS lokaciji i vremenu snimanja koje telefon upisuje u svaku fotografiju. Ti podaci su deo fajla i teže nekoliko KB, a GPS koordinate na ličnim fotografijama ne želite na javnom sajtu; čišćenje EXIF-a je dobitak u veličini i privatnosti istovremeno.

3. Dimenzije: ne skalirajte u pregledaču

Pravilo: širina slike treba da odgovara širini prostora u kom se prikazuje. Za širinu članka od 700–800 px, slika od 1200–1600 px pokriva i retina ekrane (2×) i ostaje mala. Slika od 4000 px učitava se u celosti da bi se prikazala u 700 px – čist gubitak vremena i prometa.

• Srcset – WordPress automatski generiše nekoliko verzija svake slike (150, 300, 768, 1024, 1536 px) i pregledač bira pravu; ovo radi iz fabrike, samo nemojte ga isključivati.
• Skaliranje pre otpremanja – telefon slika u 4:3 formatu; smanjite na 1600 px širine pre otpremanja (na telefonu: podelite original pre deljenja na sajt).
• Šta ne skalirati – featured slike i hero sekcije; za njih ostavite malo više rezerve (do 1920 px) jer se prikazuju preko cele širine.

Vredi znati i da svaka tema definiše svoje veličine: WordPress za svaku sliku pravi nekoliko „rezanih“ verzija prema podešavanjima teme (npr. 1200×630 za naslovnu karticu). Ako vam se čini da se featured slika čudno seče u pregledu kategorije, uzrok je najčešće u odnosu strana koji tema očekuje – proverite dokumentaciju teme za preporučene dimenzije umesto da pogađate.

4. ALT tekst: opis za pretraživače i čitaoce

ALT tekst je alternativni opis slike: prikazuje se kada se slika ne učita i čita se naglas osobama koje koriste screen reader. Za SEO, Google ga koristi da razume šta slika prikazuje – pogotovo u Google Images pretrazi, koja blogovima donosi ozbiljan saobraćaj.

• Opisujte šta je na slici, ne šta piše u članku: „plavi ekran sa tabelom cena hostinga“, ne „najbolji hosting“.
• Prirodni jezik sa ključnom reči gde ima smisla – ali bez naguranavanja; ALT je opis, ne polje za optimizaciju.
• Dekorativne slike (razdvajači, apstraktne pozadine) – prazan ALT (alt="") da screen reader ne čita nepotrebno.
• Nikad „slika1.jpg“ ili „IMG_2043“ – to je znak neoptimizovanog sajta i za Google i za čitaoca.

Kako se ALT uključuje u širu sliku optimizacije članka (naslov, struktura, interni linkovi), pokriveno je u vodiču kako optimizovati članak za Google. Brzi primer razlike: za sliku ekranske fotografije plugin-a, loš ALT je „slika“ ili „wordpress“, dobar je „Yoast SEO panel u WordPress administraciji sa poljem za meta opis“. Prvi ne govori ništa; drugi opisuje sliku i pogađa upit „kako izgleda yoast podešavanje“ u Google Images pretrazi.

5. Lazy load: neka se slike učitavaju po potrebi

Lazy load odlaže učitavanje slika koje su ispod vidljivog dela stranice – učitaju se tek kada čitalac skroluje do njih. Prva slika se i onako vidi odmah; ostalih devet ne moraju trošiti promet pre nego što ih neko stvarno vidi. WordPress ima ugrađen lazy load (loading="lazy") od verzije 5.5 – radi automatski, bez plugin-a.

Jedino pravilo izuzetka: featured slika ili prva slika u članku neka učitavaju odmah (mnogi alati imaju opciju „exclude first image“). Razlog: ako se i ona lazy-uje, na sporijoj vezi čitalac vidi prazan prostor baš u momentu kada donosi odluku da li da ostane. Uz to, lazy load ne utiče na SEO: Google indeksira sve slike redovno, jer učitava stranicu kao pregledač sa „neograničenim“ strpljenjem – odlaganje je korisno samo za posetioca.

Automatizacija u WordPress-u

Ručna optimizacija svake slike radi se jednom – posle toga plugin radi umesto vas. Na listi obaveznih plugin-ova nalazi se i Smush (ili ShortPixel): kompresija pri otpremanju, lazy load, WebP konverzija i skaliranje – sve u jednom. Podesite jednom (kvalitet 82, WebP uključen, max širina 1600) i zaboravite. Uz keš plugin i brzu temu, slike prestaju da budu problem – a izbor teme utiče više nego što se misli (poređenje u tekstu najbolje WordPress teme za blogere: lake teme učitavaju manje resursa i brže prikazuju upravo slike). Jedino na šta treba paziti sa automatizacijom: plugin mora da bude aktivan i kada tekst i slike stižu iz drugih izvora (npr. saradnici otpremaju direktno) – jer optimizacija važi samo za slike koje prođu kroz njega.

Odakle uzeti slike (koje ćete onda optimizovati)

Dve teme koje se nadovezuju, a nisu obuhvaćene ovim tekstom: legalni izvori slika – Unsplash, Pexels, Pixabay i kada se isplati platiti stock (o tome u tekstu odakle uzeti slike za blog legalno), i AI generisanje – Midjourney, DALL-E i slični alati za vizuale po meri (u tekstu AI slike za blog). U oba slučaja isto pravilo važi za krajnji rezultat: bilo kakva slika ide kroz ovih pet koraka pre nego što završi na sajtu. Izvorni fajl (original sa stock sajta ili ekport iz AI alata) uvek sačuvajte negde van biblioteke – kada zatreba reizdanje u drugačijim dimenzijama, original je jedini od koga vredi krenuti.

Česta pitanja

Da li WebP kvare kvalitet slike?

Na kvalitetu 80–85 – ne, pod normalnim gledanjem na ekranu. Tek pri 100% uvećanju fotografije vidi se blaga razlika; za blog i prezenterijske sajteve, kompromis je nevidljiv, a ušteda ogromna.

Koliko slika smem da stavim u članak?

Nema tvrdog limita – merilo je težina stranice, ne broj. Sa optimizovanim slikama (100–200 KB po slici), 8–10 slika u članku ne predstavlja problem; sa neoptimizovanim, i tri mogu da uspore stranicu. Ako PageSpeed i dalje prijavljuje „slike nisu optimizovane“ – još uvek ima čega.

Šta sa starim slikama koje sam već otpremio?

Plugin-i za optimizaciju imaju „bulk“ opciju: prolaz kroz celu biblioteku i konverziju postojećih fajlova, obično u besplatnom limitu (par stotina slika). Za blogove sa desetinama hiljada slika, to je posao od par sati u pozadini – i najbrži način da se stari sadržaj ubrza bez ijedne izmene teksta.

Zaključak

Optimizacija slika je retka stvar u web svetu koja je istovremeno najlakša i najisplativija: WebP umesto formata iz 90-ih, 1600 px umesto 4000, kvalitet 82 umesto „maksimalno“, ALT umesto „slika1“ i lazy load za slike ispod prevoja. Pet koraka, sat vremena jednokratnog rada plus plugin za buduće – i sajt koji se učitava pre nego što čitalac stigne da se predomišlja.