Pretvorba slika u WEBP

Šta je WEBP format?

WEBP je moderni format slika razvijen od strane kompanije Google. Nudi i kompresiju s gubitkom i bez gubitka, te podržava transparentnost i animacije. WEBP datoteke su značajno manje od JPG ili PNG datoteka, uz zadržavanje visokog kvaliteta.

Zašto pretvarati slike u WEBP?

Odlična kompresija

WEBP pruža 25-35% manje datoteke od JPG-a i 25-50% manje od PNG-a pri istom 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 dugme “Pretraži datoteke” ili jednostavno prevucite slike u označeno područje
2. Postavite kvalitet - Odaberite nivo kvaliteta (75-90% preporučeno)
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 novije
• Safari 14 i novije (iOS 14, macOS Big Sur)
• Opera - sve verzije

Podržani ulazni formati

Alat podržava pretvorbu iz sljedećih formata:

• JPG/JPEG - najrašireniji format fotografija
• 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 kvaliteta

Kvalitet WEBP-a određuje omjer između veličine datoteke i kvaliteta slike:

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

Poređenje s drugim formatima

Za isti vizuelni kvalitet:

• WEBP vs JPG - 25-35% manje datoteke
• WEBP vs PNG - 25-50% manje datoteke (kod fotografija još i više)
• 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
• Moderne projekte s podrškom za aktuelne preglednike

Manje pogodno za:

• Projekte koji zahtijevaju podršku starijih preglednika
• Štampanje (koristite PNG ili TIFF)
• Maksimalnu kompresiju (razmislite o AVIF-u)

Praktične prednosti WEBP-a

Stvarne uštede veličine datoteka

Uticaj 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 pomjeranja
• ⏱️ FID (First Input Delay) - Brže učitavanje = ranija interaktivnost

WEBP vs drugi formati

WEBP vs JPG

Fotografija 1920×1080:
├─ JPG (kvalitet 85%): 850 KB
├─ WEBP (kvalitet 85%): 580 KB (-32%)
└─ Vizuelni kvalitet: Identičan

Prednosti WEBP-a:

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

Mane 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%)
└─ Kvalitet boja: WEBP 16M boja, GIF 256 boja

WEBP animacije su bolje od GIF-a:

• 🎨 Milioni boja umjesto 256
• 📦 60-80% manje datoteke
• 🔍 Viši kvalitet bez ditheringa

Implementacija WEBP-a na webu

HTML s povratnim mehanizmom (fallback)

<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');
}

Automatsko otkrivanje serverom

# .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ći web

Faza 1: Priprema

1. Rezervišite sve originalne slike
2. Pretvorite sve JPG/PNG u WEBP (kvalitet 80-85%)
3. Sačuvajte WEBP pored originalnih datoteka

Faza 2: Implementacija

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

Faza 3: Praćenje

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

Automatizacija procesa

# cwebp - službeni alat od Googlea
cwebp -q 85 input.jpg -o output.webp

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

Podrška na svim 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 (plugin)
• ⚠️ 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)

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

2. Lossless (bez gubitka)

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

3. Near-lossless (gotovo bez gubitka)

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

Parametri optimizacije

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

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

# Agresivna kompresija (70%) za preglede (thumbnail-ove)
cwebp -q 70 -m 2 input.jpg -o output.webp

# Bez gubitka 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 (oko 20-30% boljom od WEBP-a), ali:

• ⚠️ Podrška još uvijek raste
• ⚠️ Sporija kompresija
• ⚠️ Veća zahtjevnost za CPU

Preporuka: Koristite WEBP sada, pratite AVIF za budućnost

Prihvatanje od strane velikih igrača

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

Prednosti ovog alata

• 100% besplatno - bez registracije i ograničenja
• Zaštita privatnosti - sve se odvija lokalno u vašem pretraživaču
• Grupna obrada - pretvorite više slika odjednom
• Očuvanje transparentnosti - alfa kanal ostaje sačuvan
• Prilagodljiv kvalitet - kontrola omjera veličine/kvaliteta
• Bez ograničenja veličine - nema ograničenja veličine datoteka
• Brzo - trenutna pretvorba bez postavljanja na server
• Moderna tehnologija - Korištenje najnovijih web standarda
• SEO korist - Manje slike = bolji PageSpeed