Sadržaj:
Zašto je optimizacija slika važna?
Svaka slika koja nije optimizovana usporava vaš sajt. Sporiji sajt
direktno utiče na korisničko iskustvo, posjetioci napuštaju stranice koje
se ne učitaju za nekoliko sekundi. Osim toga, brzina učitavanja je jedan
od faktora koji Google koristi za rangiranje u pretrazi (SEO), što znači
da loše optimizovane slike mogu sniziti poziciju vašeg bloga ili sajta u
rezultatima pretrage.
Optimizacijom slika postižete:
- Brže učitavanje stranice – manje KB/MB = brži sajt
- Bolja SEO pozicija – Google nagrađuje brze sajtove
- Manji troškovi hostinga – manje bandwidtha
- Bolje korisničko iskustvo – posebno na mobilnim uređajima sa slabijim internetom
Formati slika i koji kada koristiti?
Postoje četiri relevantna formata za web: JPEG, PNG, WebP i AVIF.
| Format | Kompresija | Transparentnost | Dubina boja | Idealan za |
|---|---|---|---|---|
| JPEG | Lossy | ❌ | 8-bit | Fotografije, slike sa puno boja i gradijenata |
| PNG | Lossless | ✅ | 8-bit | Logotipi, ikone, screenshotovi, grafike sa tekstom |
| WebP | Lossy i Lossless | ✅ | 8-bit | Sve – odličan universalni format |
| AVIF | Lossy i Lossless | ✅ | 12-bit | Sve – najmanji fajlovi, vrhunski kvalitet |
JPEG je dugo bio standard za fotografije na webu. Koristi lossy
kompresiju, što znači da pri svakom snimanju odbacuje dio podataka o slici
kako bi smanjio veličinu fajla. Idealan je kada imate fotografije s puno
boja i gradijenata, a transparentnost vam ne treba.
PNG
PNG format zadržava potpun kvalitet bez gubitka (lossless), ali zbog toga
su fajlovi veći. Koristiti ga treba za logotipe, ikone i grafike kojima je
potrebna prozirna pozadina (transparency). Za fotografije na webu.
Izbjegavajte PNG, jer su fajlovi nepotrebno veliki.
WebP
WebP je Googleov moderni format koji nudi do 30% bolju kompresiju od
JPEG-a uz podršku za transparentnost i animacije. Podržavaju ga svi
moderni browseri i odlična je zamjena za JPEG i PNG u većini
slučajeva.
AVIF
AVIF je trenutno najnapredniji format za web. Nudi i do 50% manje fajlove
od WebP-a pri istom vizuelnom kvalitetu, zahvaljujući AV1 kodeku na kome
je baziran. Podržava 12-bitnu dubinu boja i HDR, što ga čini idealnim i za
fotografije i za grafike. Jedini nedostatak je sporiji encoding (kreiranje
fajla), ali to nije problem za statične slike na blogu. Podrška u
browserima iznosi oko 93–95% globalnih korisnika, a svi moderni browseri
ga podržavaju od januara 2024.
Podrška po Browserima za AVIF:
| Browser | Puna podrška od verzije | Datum |
|---|---|---|
| Chrome | 85+ | Avgust 2020 |
| Edge | 121+ | Januar 2024 |
| Firefox | 93+ | Oktobar 2021 |
| Safari (macOS/iOS) | 16+ | Septembar 2022 |
| Opera | 71+ | Avgust 2020 |
| Samsung Internet | 14+ | Decembar 2020 |
Šta sa ostatkom od 5–7% korisnika?
Za one koji koriste starije verzije browsera, rješenje je <picture>
HTML tag koji automatski servira odgovarajući format:
<picture><source srcset="slika.avif" type="image/avif"><source srcset="slika.webp" type="image/webp"><img src="slika.jpg" alt="Opis slike"></picture>
Ovaj kod funkcioniše kao kaskada. Browser uzima prvi format koji podržava, a
JPEG je uvijek tu kao sigurnosna mreža za 100% kompatibilnost.
AVIF vs WebP vs JPEG
| JPEG | WebP | AVIF | |
|---|---|---|---|
| Kompresija | Osnovna | Dobra | Odlična ✅ |
| Dubina boja | 8-bit | 8-bit | 12-bit ✅ |
| Transparentnost | ❌ | ✅ | ✅ |
| HDR podrška | ❌ | ❌ | ✅ |
| Podrška u browserima | ~100% | ~96% | ~90% |
| Brzina encodinga | Brza | Brza | Spora ⚠️ |
Jedina mana AVIF-a je što je encoding (kreiranje fajla) sporiji od JPEG-a
i WebP-a. To nije problem za statične slike na sajtu koje se jednom
pripreme i postave, ali može biti spor na sajtovima koji dinamički
generišu slike u hodu.
Kompresija – Lossy vs Lossless
Kompresija je proces smanjenja veličine fajla. Postoje dva tipa:
-
Lossy – odbacuje dio podataka o slici (određene detalje koje oko teško
primijeti). Rezultira manjim fajlovima, ali sa blagim gubitkom
kvaliteta. Koristi se kod JPEG i WebP (lossy mod).
- Lossless – smanjuje fajl bez ikakvog gubitka kvaliteta, samo boljim pakovanjem podataka. Sporiji export, ali nema vizuelnih promjena. Koristi se kod PNG i WebP (lossless mod).
Praktično pravilo za web:
Za JPEG i WebP (lossy), kvalitet između 70–85% daje optimalan omjer
veličine i kvaliteta koji prosječan posjetioc neće primijetiti. Za PNG,
uvijek koristi maksimalnu kompresiju. To ne utiče na kvalitet slike, samo
na brzinu exporta.
Korak 1 - Kako promijeniti veličinu slike u GIMP-u (Resize)
Jedna od najvažnijih optimizacija je prilagođavanje dimenzija slike.
Nema smisla postavljati sliku dimenzija 4000×3000 piksela ako će se
prikazivati u širini od 800px na vašem sajtu ili blogu.
Evo kako promijeniti veličinu slike u GIMP-u:
- Otvorite sliku u GIMP-u (File > Open)
- U gornjem meniju klikni na Image > Scale Image
- Otvoriće se novi popup prozor. Unesite željenu širinu (Width) u pikselima (npr. 1200px za header sliku, 800px za sadržaj bloga)
- Provjerite da je lanac (chain icon) pored Width/Height aktiviran. To osigurava da se omjer stranica (aspect ratio) automatski prilagodi i slika ne bude izobličena
- Klikni Scale
Napomena o rezoluciji: Za web slike, rezolucija od 72 ili 96 DPI je potpuno dovoljna. Visoka rezolucija (300 DPI) je potrebna samo za print.
Korak 2 – Export slike u GIMP-u
Nakon što ste promijenili veličinu, slijedi export u odgovarajući format. U GIMP-u ne koristimo "Save As" za web slike. Koristimo "Export As", jer ta opcija omogućava odabir formata i fine podešavanja.
Export kao JPEG
- Kliknite File > Export As
- U polju za naziv fajla unesite ime i dodajte ekstenziju .jpg (npr. slika-optimizovana.jpg)
- Kliknite Export
- Otvori se popup prozor za JPEG podešavanja
- Pomjerite klizač Quality na vrijednost između 75 i 85
- Kliknite Export
Export kao PNG
- Kliknite File > Export As
- Unesite naziv sa ekstenzijom .png
- Kliknite Export
- U popup prozoru postavite Compression na maksimum (9). Ovo ne smanjuje kvalitet, samo duže traje export
- Kliknite Export
Export kao WebP
- Kliknite File > Export As
- Unesite naziv sa ekstenzijom .webp
- Kliknite Export
- Podesite Quality na 80–85 za lossy, ili aktivirajte Lossless za grafike/logotipe
- Kliknite Export
Export kao AVIF
AVIF export u GIMP 2.10 radi preko HEIF/AVIF plugina (libheif/libavif),
dostupan od verzije 2.10.22+.
GIMP 3.0 ima ugrađenu podršku za avif preko libheif pa trenutno ne
podržava animacije.
- Kliknite File > Export As
- U polje za naziv fajla upišite ime i ekstenziju .avif (npr. slika-optimizovana.avif)
- Kliknite Export. Otvoriće se poseban dijalog “Export Image as AVIF”
-
Opcije koje vas zanimaju:
- Lossless – uključite za savršeni kvalitet (veći fajl) ili isključi za klasični lossy AVIF
- Quality – ako Lossless nije uključen, postavite vrijednost oko 60–80; 80 je praktično vizuelno lossless za web
-Bit depth – 8-bit je dovoljno za standardni web, 10/12-bit koristite samo za HDR i profi fotografiju
-Speed vs Compression – “Slow” daje najmanji fajl, ali sporiji export; “Fast” je brži, malo veći fajl - Kliknite Export
Dobre prakse za nazive fajlova
Ime fajla je i SEO signal. Nemojte ostavljati nazive poput
IMG_20240315.jpg. Koristite opisne, ključnom riječju bogate nazive,
npr:
✅ gimp-optimizacija-slika-za-web.jpg
❌ IMG_0042.jpg
Svaka slika na sajtu trebalo bi da ima i popunjen alt tekst koji
opisuje sadržaj – to poboljšava i SEO i pristupačnost sajta.
Uz besplatan alat kao što je GIMP, optimizacija slika za web ne
zahtijeva ni investiciju ni napredne vještine. Pravilnim odabirom
formata, podešavanjem dimenzija i kompresije, možete dramatično
ubrzati učitavanje svog sajta i poboljšati SEO poziciju bez vidljivog
gubitka kvaliteta slike.
0 Comments