Potpuni vodič za optimizaciju slika

Kako optimizirati slike za performanse weba (2025)

Smanjite veličine datoteka za 60-80%, poboljšajte Core Web Vitals i povećajte konverzije s dokazanim tehnikama optimizacije.

Dokazane tehnike

Usporedba 7 alata

8 min čitanja

Što je optimizacija slika?

Optimizacija slika je proces smanjenja veličine slikovnih datoteka uz održavanje vizualne kvalitete. Uključuje odabir pravog formata, primjenu kompresije i promjenu veličine slika na odgovarajuće dimenzije.

✓ Smanjuje vrijeme učitavanja stranice

✓ Poboljšava Core Web Vitals

✓ Smanjuje troškove propusnosti

✓ Povećava konverzije

Zašto je optimizacija slika važna

Slike čine 50-70% tipične težine web stranice

⚠️ Kašnjenje od 1 sekunde smanjuje konverzije za 7%
⚠️ 53% posjetitelja odlazi ako stranica učitava >3 sekunde
⚠️ Google koristi brzinu stranice kao faktor rangiranja
⚠️ Mobilni korisnici očekuju učitavanje <3 sekunde

Utjecaj na performanse

⚡

Brže učitavanje stranica

60-80% manje datoteke
📊

Bolji Core Web Vitals

LCP, CLS rezultati
🔍

Viši rang na Googleu

Brzina je faktor
💰

Više konverzija

Korisnici ostaju dulje

Ušteda troškova

💵 Niži troškovi CDN propusnosti
💾 Smanjeni troškovi pohrane
🖥️ Manje opterećenje servera
📉 Jeftiniji hosting

Vodič za formate slika 2025

Format	Best For	Compression	File Size
JPEG / JPG	Fotografije, složene slike s mnogo boja	S gubitkom (70-85% preporučeno)	Srednje (tipično 50-200 KB)
PNG	Grafike s prozirnosti, snimke zaslona, tekst	Bez gubitka (ili s gubitkom pomoću alata)	Veće (tipično 100-500 KB)
WebP ⭐	Univerzalan - fotografije i grafike (97% podrška preglednika)	S gubitkom i bez gubitka	30% manje od JPG
AVIF	Format sljedeće generacije (92% podrška preglednika)	S gubitkom i bez gubitka	50% manje od JPG
SVG	Ikone, logotipi, jednostavna grafika	Vektorski (beskonačno skalira)	Sićušno (1-20 KB)
GIF	Jednostavne animacije (izbjegavajte za fotografije)	Bez gubitka (maks 256 boja)	Veliko za animacije

Recommendation: Za 2025: Koristite WebP s JPEG rezervom za fotografije, PNG za grafike s prozirnosti, SVG za ikone. AVIF je u nastajanju ali provjerite podršku preglednika.

Kompresija s gubitkom vs bez gubitka

Kompresija s gubitkom

Trajno uklanja podatke za manje veličine. Vidljivi gubitak kvalitete samo pri visokoj kompresiji.

Prednosti

✓ 60-80% smanjenje veličine
✓ Puno manje od bez gubitka
✓ Odlično za fotografije

Nedostaci

✗ Kvaliteta se smanjuje sa svakim spremanjem
✗ Nije idealno za grafike/tekst

Formati: JPEG, WebP (s gubitkom)

Kompresija bez gubitka

Smanjuje veličinu bez gubitka kvalitete. Izvorni podaci mogu se savršeno rekonstruirati.

Prednosti

✓ Bez gubitka kvalitete
✓ Može se višekratno uređivati
✓ Najbolje za grafike/snimke zaslona

Nedostaci

✗ Samo 20-40% smanjenje
✗ Velike datoteke za fotografije

Formati: PNG, WebP (bez gubitka), GIF

💡 Profesionalni savjet: Koristite kompresiju s gubitkom za fotografije (70-85% kvalitete), bez gubitka za snimke zaslona i grafike s tekstom.

Tijek rada optimizacije slika

1. Odaberite format

Fotografija? → WebP/JPEG. Grafika? → PNG/SVG. Ikona? → SVG

2. Promijenite veličinu za prikaz

Ne poslužujte 4000px slike za 400px prikaz. Uskladite dimenzije slike sa stvarnom upotrebom.

3. Primijenite kompresiju

70-85% s gubitkom za fotografije. Razmotrite bez gubitka za grafike. Uravnotežite veličinu i kvalitetu.

4. Optimizirajte metapodatke

Uklonite EXIF podatke (info kamere) za privatnost i manje datoteke. Zadržite alt tekst za SEO.

5. Provjerite rezultate

Provjerite veličinu datoteke (<100 KB idealno), vizualnu kvalitetu i ocjenu brzine stranice.

💡 Tip: Diwadi automatizira korake 1-4 s AI optimizacijom. Samo povucite slike i izvezite.

Najbolji alati za optimizaciju slika

Alat	Tip	Grupna obrada	Brzina	Cijena
Diwadi ⭐	Desktop	Neograničeno	Vrlo brzo	Free / $29
TinyPNG	Online	20 slika	Srednje	Free / $25/yr
Squoosh	Online	1 odjednom	Sporo	Free
ImageOptim	Desktop	Neograničeno	Vrlo brzo	Free
ImageMagick	CLI	Skriptabilno	Vrlo brzo	Free

Recommendation: Za grupnu optimizaciju, desktop alati poput Diwadi su 25x brži od online alternativa. Online alati su dobri za brzu jednokratnu optimizaciju.

Download Diwadi Free →

Mjerenje uspjeha optimizacije

Ključne metrike za praćenje

Veličina datoteke

Cilj: <100 KB po slici

Težina stranice

Cilj: <1,5 MB ukupno slika

LCP rezultat

Cilj: <2,5 sekundi

PageSpeed rezultat

Cilj: 90+ na mobitelu

Koristite Google PageSpeed Insights, Lighthouse ili WebPageTest za mjerenje uspješnosti optimizacije.

Ready to Optimize Your Images?

Download Diwadi for free and optimize images 25x faster than online tools.

Download Diwadi Free

Često postavljana pitanja

Što je optimizacija slika? ▼

Optimizacija slika je proces smanjenja veličine slikovnih datoteka uz održavanje prihvatljive kvalitete. Uključuje kompresiju, odabir formata i prilagodbu dimenzija za poboljšanje brzine i performansi web stranice.

Zašto je optimizacija slika važna? ▼

Slike obično čine 50-70% težine web stranice. Optimizirane slike učitavaju se brže, poboljšavaju Core Web Vitals (Googleov faktor rangiranja), smanjuju troškove propusnosti i povećavaju konverzije. Kašnjenje od 1 sekunde može smanjiti konverzije za 7%.

Koja je razlika između kompresije s gubitkom i bez gubitka? ▼

Kompresija bez gubitka smanjuje veličinu datoteke bez gubitka kvalitete (PNG), dok kompresija s gubitkom postiže manje veličine uz minimalnu vidljivu redukciju kvalitete (JPG, WebP). Kompresija s gubitkom obično smanjuje veličine datoteka za 60-80% nasuprot 20-40% za kompresiju bez gubitka.

Koji je najbolji format slike za web stranice u 2025? ▼

WebP s JPG rezervom je najbolja praksa. WebP je 30% manji od JPG-a uz sličnu kvalitetu i ima 97% podršku preglednika. Koristite modernu detekciju formata: <picture> oznaku s WebP izvorom i JPG rezervom.

Koliko male trebaju biti moje slike? ▼

Cilj: <100 KB za web slike, <50 KB za mobilne. Hero slike mogu biti 150-200 KB. Slike proizvoda: 50-100 KB. Sličice: <30 KB. Ukupna težina stranice trebala bi biti ispod 1-2 MB za dobre performanse.

Should I optimize images before or after uploading? ▼

Before uploading! Pre-optimize images to save upload time, reduce server storage, and ensure consistent quality. Many CMS/website builders don't optimize properly. Desktop tools like Diwadi are 25x faster than uploading then optimizing.

What quality setting should I use? ▼

For JPG/WebP: 70-85% quality is optimal. 85% for important images (hero, products), 70-75% for content images. Below 70% shows visible artifacts. PNG: use lossy compression to reduce size by 60-70% with minimal quality loss.

Can I batch optimize 1000s of images at once? ▼

Yes with desktop tools like Diwadi! Drag entire folders and compress thousands of images simultaneously. Online tools typically limit batches to 1-20 images at a time, making large-scale optimization impractical.

Will optimizing images hurt SEO? ▼

No, it helps SEO! Google's Core Web Vitals (ranking factor) measure page speed. Optimized images improve Largest Contentful Paint (LCP) and reduce Cumulative Layout Shift (CLS), directly boosting rankings.

How often should I optimize images? ▼

Always! Optimize every image before uploading to your website. Set up a workflow: capture/create → optimize → upload. For existing sites, audit quarterly and optimize any images >100 KB.