Pretvorba slika u WEBP

Što je WEBP format?

WEBP je moderan format slike razvijen od strane tvrtke Google. Nudi i kompresiju s gubitkom i bez gubitaka, te podržava transparentnost i animacije. WEBP datoteke su značajno manje od JPG ili PNG uz zadržavanje visoke kvalitete.

Zašto pretvarati slike u WEBP?

Izvrsna kompresija

WEBP pruža 25-35% manje datoteke od JPG-a i 25-50% manje od PNG-a uz istu kvalitetu.

Podrška za transparentnost

Za razliku od JPG-a, WEBP podržava alfa kanal za transparentnost.

Široka podrška

WEBP je podržan u svim modernim preglednicima uključujući Chrome, Firefox, Edge i Safari.

Kako koristiti ovaj alat?

1. Učitajte slike - Kliknite na gumb “Pregledaj datoteke” ili jednostavno povucite slike u označeno područje
2. Postavite kvalitetu - Odaberite razinu kvalitete (preporučeno 75-90%)
3. Automatska pretvorba - Slike će se automatski pretvoriti u WEBP format
4. Preuzimanje - Preuzmite pojedinačne slike ili sve odjednom kao ZIP arhivu

Podrška preglednika

WEBP je podržan u:

• Chrome - sve verzije
• Edge - sve verzije
• Firefox 65 i noviji
• Safari 14 i noviji (iOS 14, macOS Big Sur)
• Opera - sve verzije

Podržani ulazni formati

Alat podržava pretvorbu iz sljedećih formata:

• JPG/JPEG - najrašireniji fotografski format
• PNG - uključujući transparentnost, koja će biti sačuvana
• GIF - statične i animirane slike
• BMP - osnovni bitmap format
• TIFF - profesionalni format
• SVG - vektorska grafika

Postavke kvalitete

WEBP kvaliteta određuje omjer između veličine datoteke i kvalitete slike:

• 85-95% - visoka kvaliteta, veće datoteke
• 75-85% - optimalno za većinu upotreba
• 65-75% - manje datoteke, još uvijek dobra kvaliteta
• Ispod 65% - male datoteke, vidljiv gubitak kvalitete

Usporedba s drugim formatima

Za istu vizualnu kvalitetu:

• WEBP vs JPG - 25-35% manje datoteke
• WEBP vs PNG - 25-50% manje datoteke (još više za fotografije)
• WEBP vs GIF - 60-80% manje datoteke za animacije

Kada koristiti WEBP?

Idealno za:

• Web stranice i aplikacije
• Fotografije s prozirnom pozadinom
• Slike koje zahtijevaju manju veličinu datoteke
• Moderni projekti s podrškom za trenutne preglednike

Manje prikladno za:

• Projekti koji zahtijevaju podršku starijih preglednika
• Ispis (koristite PNG ili TIFF)
• Maksimalna kompresija (razmotrite AVIF)

Praktične prednosti WEBP-a

Stvarne uštede u veličini datoteka

Utjecaj na performanse web stranice

Primjer: E-trgovina s 50 slika proizvoda

• JPG ukupno: 50 × 400 KB = 20 MB
• WEBP ukupno: 50 × 280 KB = 14 MB
• Ušteda: 6 MB = brže učitavanje za 2-4 sekunde

Core Web Vitals

Google ocjenjuje brzinu učitavanja:

• ⚡ LCP (Largest Contentful Paint) - WEBP ubrzava učitavanje glavnih slika
• 📊 CLS (Cumulative Layout Shift) - Manje datoteke = manje pomaka
• ⏱️ FID (First Input Delay) - Brže učitavanje = interaktivnost ranije

WEBP vs ostali formati

WEBP vs JPG

Fotografija 1920×1080:
├─ JPG (kvaliteta 85%): 850 KB
├─ WEBP (kvaliteta 85%): 580 KB (-32%)
└─ Vizualna kvaliteta: Identicna

Prednosti WEBP-a:

• ✅ 25-35% manje pri istoj kvaliteti
• ✅ Podržava transparentnost (JPG ne)
• ✅ Podržava animacije (JPG ne)

Nedostaci WEBP-a:

• ⚠️ Lošija podrška u starijem softveru
• ⚠️ Duže vrijeme kompresije

WEBP vs PNG

Logo s transparentnošću 800×600:
├─ PNG: 320 KB
├─ WEBP: 95 KB (-70%)
└─ Transparentnost: Sačuvana u oba

Kada koristiti WEBP umjesto PNG-a:

• Web i aplikacije (brzina važnija od kompatibilnosti)
• Moderne platforme
• Slike s transparentnošću

Kada ostati pri PNG-u:

• Grafički dizajn (Adobe Photoshop, Illustrator)
• Profesionalni ispis
• Maksimalna kompatibilnost

WEBP vs GIF

Animacija 500×500, 30 sličica:
├─ GIF: 4,2 MB
├─ WEBP: 950 KB (-77%)
└─ Kvaliteta boja: WEBP 16M boja, GIF 256 boja

WEBP animacije su bolje od GIF-a:

• 🎨 Milijuni boja umjesto 256
• 📦 60-80% manje datoteke
• 🔍 Viša kvaliteta bez ditheringa

Implementacija WEBP-a na webu

HTML s fallbackom

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="Opis slike">
</picture>

Kako to funkcionira:

• Moderni preglednici učitavaju WEBP
• Stariji preglednici učitavaju JPG
• Svi korisnici vide sliku

CSS pozadina

.hero {
  background-image: url('hero.jpg');
}

/* Modernizr ili @supports */
.webp .hero {
  background-image: url('hero.webp');
}

Automatska detekcija servera

# .htaccess - Apache
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_FILENAME}.webp -f
  RewriteRule ^(.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1]
</IfModule>

Migracija s JPG/PNG na WEBP

Strategija za postojeću web stranicu

Faza 1: Priprema

1. Sigurnosno kopirajte sve originalne slike
2. Pretvorite sve JPG/PNG u WEBP (kvaliteta 80-85%)
3. Spremite WEBP pored originalnih datoteka

Faza 2: Implementacija

1. Koristite <picture> element s fallbackom
2. Ažurirajte CSS za pozadinske slike
3. Testirajte u svim preglednicima

Faza 3: Nadzor

1. Pratite PageSpeed Insights rezultat
2. Provjerite Core Web Vitals
3. Analizirajte podatke analitike

Automatizacija procesa

# cwebp - službeni alat tvrtke Google
cwebp -q 85 input.jpg -o output.webp

# Skupna konverzija svih JPG datoteka
for file in *.jpg; do
  cwebp -q 85 "$file" -o "${file%.jpg}.webp"
done

Podrška na različitim platformama

Preglednici

Pokrivenost: Više od 95% korisnika interneta (2024)

Mobilni uređaji

• ✅ Android 4.0+ (2011)
• ✅ iOS 14+ (2020)
• ✅ Chrome Mobile - sve verzije
• ✅ Firefox Mobile 68+

Softver

• ⚠️ Adobe Photoshop - Potreban dodatak
• ⚠️ GIMP - Da (s dodatkom)
• ✅ Figma - Nativni izvoz
• ✅ Canva - Podržava WEBP
• ⚠️ Microsoft Office - Ograničena podrška

Često postavljana pitanja (FAQ)

Napredne postavke WEBP-a

Vrste kompresije

1. Lossy (s gubitkom)

   • Kvaliteta 0-100
   • Idealno za fotografije
   • Male datoteke

2. Lossless (bez gubitaka)

   • Bez gubitka podataka
   • Idealno za grafiku
   • Veće od lossy, manje od PNG

3. Near-lossless (gotovo bez gubitaka)

   • Kompromis između lossy i lossless
   • Gotovo neprimjetan gubitak
   • Značajno manje od lossless

Parametri optimizacije

# Visoka kvaliteta (90%) za portfolio
cwebp -q 90 -m 6 input.jpg -o output.webp

# Uravnoteženo (80%) za uobičajene web stranice
cwebp -q 80 -m 4 input.jpg -o output.webp

# Agresivna kompresija (70%) za sličice
cwebp -q 70 -m 2 input.jpg -o output.webp

# Bez gubitaka za logotipe i grafiku
cwebp -lossless input.png -o output.webp

Budućnost WEBP-a

Konkurencija: AVIF

AVIF je noviji format s još boljom kompresijom (20-30% boljom od WEBP-a), ali:

• ⚠️ Podrška još uvijek raste
• ⚠️ Sporija kompresija
• ⚠️ Veća potrošnja CPU-a

Preporuka: Trenutno koristite WEBP, pratite AVIF za budućnost

Usvajanje od strane velikih igrača

• Google - Preferira WEBP na svim uslugama
• Facebook/Meta - WEBP za fotografije
• YouTube - Sličice u WEBP-u
• WordPress - Nativna podrška od verzije 5.8
• Shopify - Automatska konverzija u WEBP

Prednosti ovog alata

• 100% besplatno - bez registracije i ograničenja
• Zaštita privatnosti - sve se odvija lokalno u vašem pregledniku
• Skupna obrada - pretvorite više slika odjednom
• Očuvanje transparentnosti - alfa kanal ostaje sačuvan
• Podesiva kvaliteta - kontrola nad omjerom veličine/kvalitete
• Bez ograničenja veličine - nema ograničenja veličine datoteka
• Brzo - trenutna konverzija bez prijenosa na poslužitelj
• Moderna tehnologija - Korištenje najnovijih web standarda
• SEO pogodnost - Manje slike = bolji PageSpeed