Kako optimizirati slike za web stranicu?

Slike su jedan od najčešćih razloga zbog kojih web stranica postane nepotrebno teška.

Problem često nije u tome što web ima puno fotografija.

Problem je što se fotografije koriste u:

• prevelikim dimenzijama
• neodgovarajućem formatu
• previsokoj kvaliteti
• bez responsive verzija
• bez pravilnog načina učitavanja

Fotografija direktno preuzeta s fotoaparata ili mobitela može imati nekoliko megabajta.

Ako se takva slika koristi kao obična fotografija širine 600 piksela, korisnik preuzima puno više podataka nego što mu je potrebno.

Dobra optimizacija slike zato ne znači:

napraviti sliku što manjom.

Cilj je dobiti najmanju moguću datoteku koja i dalje izgleda dovoljno kvalitetno za mjesto na kojem se koristi.

Počnite od dimenzija

Jedna od najčešćih grešaka je koristiti puno veću sliku nego što je potrebno.

Primjer:

Fotografija ima:

5000 × 3333 px

Na webu se prikazuje maksimalno:

800 × 533 px

Nema puno smisla svakom korisniku slati originalnu fotografiju.

Treba pripremiti verziju koja odgovara stvarnoj veličini prikaza.

To može značajno smanjiti veličinu datoteke bez ikakve primjetne razlike za korisnika.

Ne postoji jedna veličina

Ista slika može se koristiti na različitim mjestima.

Primjerice:

• hero
• kartica projekta
• thumbnail
• mobilni prikaz

Svako od tih mjesta može zahtijevati drugačiju veličinu.

Zato nije idealno napraviti jednu ogromnu sliku i koristiti je svugdje.

Bolje je koristiti verzije prilagođene stvarnom prikazu.

Responsive slike

Moderni web može browseru ponuditi više verzija iste slike.

Browser tada može odabrati onu koja najbolje odgovara:

• širini ekrana
• gustoći piksela
• layoutu

Mobilni korisnik tako ne mora preuzeti istu fotografiju koju dobiva desktop monitor širine 2000 piksela.

To može biti posebno korisno kod:

• hero fotografija
• blog featured imagea
• galerija
• web shop proizvoda

Responsive slike su važan dio kvalitetnog mobile-first dizajna.

Odaberite pravi format

Format slike ima velik utjecaj na veličinu datoteke.

Najčešće ćete susresti:

• JPEG
• PNG
• WebP
• AVIF
• SVG

Svaki format ima svoju svrhu.

Ne treba sve slike pretvarati u isti format.

JPEG

JPEG je dugo bio standardni izbor za fotografije.

Dobar je za:

• fotografije
• kompleksne slike s puno boja
• slike bez potrebe za transparentnošću

Omogućuje značajnu kompresiju.

Ali moderniji formati često mogu ponuditi sličnu kvalitetu uz manju veličinu datoteke.

JPEG je i dalje potpuno upotrebljiv, ali više nije jedina logična opcija.

PNG

PNG se često nepotrebno koristi za velike fotografije.

Njegova velika prednost je podrška za transparentnost i lossless kompresiju.

Dobar je za:

• određene grafike
• screenshotove
• elemente s transparentnom pozadinom

Ali velika fotografija u PNG formatu može biti višestruko teža od odgovarajuće WebP ili JPEG verzije.

Ako PNG nema stvaran razlog postojanja, vrijedi razmotriti drugi format.

WebP

WebP je vrlo praktičan format za web.

Može se koristiti za:

• fotografije
• grafike
• transparentne slike

Često omogućuje manju veličinu datoteke od klasičnih JPEG i PNG alternativa uz sličnu vizualnu kvalitetu.

Zbog toga je danas vrlo čest izbor za optimizirane web slike.

Ali ni WebP nije čarobno rješenje.

WebP fotografija od 4000 piksela i dalje može biti nepotrebno velika ako se na webu prikazuje kao thumbnail.

Format ne zamjenjuje pravilne dimenzije.

AVIF

AVIF može ponuditi još učinkovitiju kompresiju u određenim situacijama.

Posebno kod fotografija može postići vrlo male datoteke uz dobru vizualnu kvalitetu.

Ali treba uzeti u obzir:

• način generiranja
• podršku alata
• workflow
• kvalitetu kod različitih tipova slika

Nije potrebno automatski pretvoriti cijeli web u AVIF samo zato što je noviji.

Treba testirati rezultat.

SVG

SVG je odličan za vektorsku grafiku.

Primjeri:

• logo
• ikone
• jednostavne ilustracije
• dijagrami

Prednost je što se može skalirati bez gubitka kvalitete.

Logo ne treba spremati kao ogromni PNG ako postoji kvalitetna SVG verzija.

Ali SVG nije zamjena za fotografije.

Format prema sadržaju

Jednostavan pristup može biti:

Fotografije

WebP ili AVIF, uz kvalitetan fallback ako je potreban.

Logo i ikone

SVG gdje je moguće.

Screenshotovi

WebP ili optimizirani PNG, ovisno o sadržaju.

Transparentne raster slike

WebP ili PNG.

Nema potrebe biti dogmatičan.

Cilj je kvalitetan rezultat uz razumnu veličinu.

Kompresija

Nakon dimenzija i formata dolazi kompresija.

Fotografija za web gotovo nikada ne treba biti spremljena u maksimalnoj kvaliteti.

Razlika između:

100% kvalitete

i:

80% kvalitete

može biti gotovo nevidljiva korisniku, dok veličina datoteke može značajno pasti.

Točna vrijednost ovisi o slici.

Fotografija proizvoda i velika pozadinska fotografija nemaju nužno isti optimalni compression level.

Najbolje je vizualno provjeriti rezultat.

Ne optimizirajte brojem

Cilj nije dobiti svaku sliku ispod nekog proizvoljnog broja.

Primjer:

Sve slike moraju biti manje od 100 KB.

To može biti dobar interni cilj za određeni projekt, ali nije univerzalno pravilo.

Velika hero fotografija možda opravdano ima više.

Mala ikona od 250 KB gotovo sigurno nema.

Veličinu treba procjenjivati prema ulozi slike.

Hero zahtijeva pažnju

Hero slika često je jedna od najvažnijih slika na stranici.

Može biti i LCP element.

Zato utječe na Core Web Vitals i ukupni dojam brzine.

Hero slika treba biti:

• dovoljno kvalitetna
• pravilnih dimenzija
• komprimirana
• brzo otkrivena od browsera
• učitana s odgovarajućim prioritetom

Ne treba joj automatski dodati lazy loading ako se nalazi odmah u početnom viewportu.

Lazy loading

Lazy loading omogućuje da se slike niže na stranici ne učitavaju odmah.

Primjer:

Blog članak ima 15 fotografija.

Korisnik na početku vidi samo prve dvije.

Nema razloga odmah preuzeti ostalih 13.

One se mogu učitati kada se korisnik približi njihovoj poziciji.

To smanjuje početno opterećenje stranice.

Ne koristite lazy loading svugdje

Lazy loading nije pravilo:

svaka slika mora biti lazy.

Ako odgodite učitavanje slike koja je ključna za prvi ekran, možete pogoršati performanse.

Posebno treba paziti na:

• hero
• glavnu product sliku
• druge važne above-the-fold elemente

Optimizacija znači pravilno prioritizirati resurse.

Width i height

Kod slika je korisno unaprijed definirati prostor koji će zauzimati.

To pomaže browseru rezervirati odgovarajuću površinu prije nego što se slika potpuno učita.

Bez toga se može dogoditi:

1. tekst se prikaže
2. slika se naknadno učita
3. sadržaj ispod nje skoči

To može pogoršati CLS.

Više o vizualnoj stabilnosti obradili smo u članku što su Core Web Vitals.

Aspect ratio

Ako ne možete uvijek unaprijed znati točne dimenzije, pravilno definiran aspect ratio također može pomoći sačuvati prostor.

Primjer:

16:9

Browser zna kolika će biti visina elementa u odnosu na njegovu širinu.

To omogućuje stabilniji layout tijekom učitavanja.

Crop prije uploada

Česta greška je uploadati cijelu fotografiju i tek je CSS-om vizualno izrezati.

Primjer:

Original prikazuje cijelu osobu i veliki dio pozadine.

Kartica prikazuje samo lice u malom kvadratu.

Ako se i dalje preuzima cijela fotografija od nekoliko tisuća piksela, korisnik plaća cijenu sadržaja koji nikada neće vidjeti.

Ako znate da će se slika koristiti u specifičnom cropu, pripremite odgovarajuću verziju.

Fotografije proizvoda

Kod webshopa slike proizvoda zaslužuju poseban pristup.

Kupcu trebaju kvalitetne fotografije.

Ne treba ih komprimirati toliko da:

• detalji nestanu
• boje izgledaju loše
• proizvod izgubi kvalitetu

Ali ni fotografija od 8 MB nije potrebna da bi se proizvod kvalitetno prikazao.

Dobro je imati:

• konzistentne dimenzije
• više kutova
• optimizirane thumbnails
• veće verzije za zoom kada je potreban

Thumbnail nije full-size

Kategorija proizvoda može prikazivati 24 proizvoda.

Ako svaki thumbnail zapravo učitava full-size fotografiju od 2000 px, kategorija može postati vrlo teška.

Za listing treba koristiti odgovarajuće male verzije.

Full-size fotografija može se učitati tek na stranici proizvoda ili pri povećanju.

Featured slike bloga

Blogovi često s vremenom nakupe stotine velikih featured slika.

Ako svaka ima nekoliko megabajta, ukupna biblioteka postaje nepotrebno teška.

Još je gore ako blog listing na jednoj stranici učitava desetak full-size fotografija.

Treba koristiti:

• pravilne thumbnails
• responsive verzije
• lazy loading

Posebno jer featured slika često nema potrebu biti ekstremno visoke rezolucije.

Screenshotovi

Screenshotovi mogu biti teški ako se spremaju bez optimizacije.

Posebno screenshot cijelog monitora.

Ako u članku prikazujete samo mali dio sučelja, možete:

• cropati relevantni dio
• smanjiti dimenzije
• koristiti WebP
• komprimirati

To također usmjerava pažnju korisnika na ono što stvarno treba vidjeti.

Dekorativne slike

Nije svaka slika potrebna.

Prije optimizacije vrijedi pitati:

Daje li ovaj vizual stvarnu vrijednost?

Ako je odgovor ne, najbolja optimizacija može biti uklanjanje slike.

To posebno vrijedi za:

• generičke stock fotografije
• dekorativne slike između svake sekcije
• ogromne pozadine bez informativne vrijednosti

Manje resursa znači i jednostavniji web.

CSS umjesto slike

Neke jednostavne dekoracije mogu se napraviti CSS-om.

Primjerice:

• gradienti
• jednostavni oblici
• pozadinske boje
• jednostavne sjene

Nema potrebe učitavati posebnu PNG sliku samo da bi se prikazao običan gradient.

Naravno, ne treba ni svaku ilustraciju pokušavati rekonstruirati CSS-om.

Ponovno je važna ravnoteža.

Ikone

Za ikone nije idealno učitavati desetke zasebnih velikih PNG datoteka.

Bolje opcije često su:

• SVG
• optimizirani icon set
• odgovarajuća komponentna biblioteka

Ali treba paziti i na drugi ekstrem.

Ako zbog tri ikone učitavate cijelu biblioteku od nekoliko stotina ikona, opet imate nepotreban overhead.

Logo

Logo treba biti oštar i na malim i velikim ekranima.

Ako postoji vektorska verzija, SVG je često vrlo praktičan.

Posebno kod jednostavnih logotipa.

Raster logo može izgledati:

• mutno na Retina ekranu
• preveliko ako se koristi verzija visoke rezolucije

Vektorski format rješava oba problema.

Background slike

CSS background slike zahtijevaju dodatnu pažnju.

One se često koriste za:

• hero
• dekorativne sekcije
• bannere

Problem je što mogu biti teže optimizirati i prioritizirati nego klasične slike.

Ako je fotografija ključni sadržaj stranice, vrijedi razmisliti treba li zaista biti background.

Ponekad je običan image element bolji izbor.

Slike i SEO

Optimizacija slika nije samo pitanje brzine.

Slike mogu pomoći i razumijevanju sadržaja.

Koristan pristup uključuje:

• smislen filename
• odgovarajući alt tekst
• kontekst oko slike

Ali treba izbjegavati keyword stuffing.

Alt tekst nije mjesto za nabrajanje deset ključnih riječi.

Njegova primarna svrha je opisati relevantan sadržaj slike korisnicima kojima slika nije dostupna.

Filename

Umjesto:

IMG_8472.jpg

možete koristiti:

izrada-web-stranice-projekt.webp

ako naziv stvarno opisuje sadržaj.

Filename nije najveći SEO faktor na svijetu.

Ali kvalitetno imenovanje:

• olakšava organizaciju
• daje više konteksta
• čini biblioteku preglednijom

To je dobra praksa s malo dodatnog rada.

Alt tekst

Alt tekst treba opisati sadržaj ili funkciju slike kada je to relevantno.

Primjer:

Loše:

web stranica SEO web stranica Osijek izrada web stranica

Bolje:

Početna stranica poslovnog weba prikazana na laptopu i mobitelu

Ne treba svaka dekorativna slika imati detaljan alt tekst.

Accessibility treba biti dio odluke.

Slike s tekstom

Važan tekst ne treba nepotrebno ugrađivati u sliku.

Primjer:

veliki banner na kojem piše:

Izrada web stranica od 500 €

Ako je cijela poruka dio JPEG-a:

• nije jednostavno responsive
• teže ju je mijenjati
• može biti problematična za accessibility
• tekst nije pravi HTML sadržaj

Bolje je koristiti stvarni tekst preko ili uz vizual kada je to moguće.

CDN za slike

Kod većih projekata slike se mogu posluživati preko CDN-a.

To može pomoći korisnicima dobiti sadržaj s bliže lokacije.

Neki image CDN servisi mogu dodatno:

• automatski mijenjati format
• generirati dimenzije
• komprimirati slike

To može značajno pojednostaviti workflow.

Za mali lokalni web nije uvijek nužno uvoditi kompleksan image infrastructure.

Ali kod većih projekata može imati smisla.

WordPress i slike

WordPress automatski generira nekoliko veličina slike nakon uploada.

To je korisno jer različiti dijelovi weba mogu koristiti različite verzije.

Problem nastaje ako:

• tema koristi pogrešnu veličinu
• builder uvijek učitava original
• plugin generira puno nepotrebnih varijanti

Vrijedi provjeriti što se stvarno šalje browseru.

Nije dovoljno vidjeti da slika vizualno izgleda mala.

Upload proces

Najbolje je imati jednostavan standard prije uploada.

Primjer:

1. crop
2. resize
3. export
4. kompresija
5. smislen filename
6. upload

Tako ne ovisite samo o pluginu koji treba naknadno popravljati ogromne originale.

Automatska optimizacija može pomoći.

Ali dobar input je i dalje najbolji početak.

Automatska optimizacija

Postoje alati i pluginovi koji mogu automatski:

• komprimirati slike
• generirati WebP
• generirati AVIF
• resizeati originale
• implementirati lazy loading

To može biti vrlo korisno kod webova gdje sadržaj uređuje više ljudi.

Ali treba provjeriti:

• kvalitetu outputa
• kompatibilnost
• količinu generiranih fileova
• utjecaj na backup

Automatizacija je korisna samo ako razumijemo što radi.

Ne čuvajte ogromne originale bez razloga

Ako klijent uploadira fotografiju od 15 MB direktno s fotoaparata, možda nema potrebe da se takav original trajno čuva unutar WordPress biblioteke.

Posebno ako postoji originalna arhiva izvan weba.

Veliki originali:

• povećavaju backup
• zauzimaju storage
• usporavaju migracije

Medijska biblioteka weba nije nužno arhiva originalnih fotografija.

Backup također raste

Slike utječu i na održavanje.

Ako media folder s vremenom naraste na desetke gigabajta:

• backup traje duže
• restore traje duže
• migracija je teža
• storage košta više

Optimizacija slika zato nije samo frontend performance tema.

Pomaže i održavanju cijelog sustava.

Provjerite stvarnu veličinu

Browser DevTools može pokazati:

• koju sliku browser učitava
• koliko ima KB
• koje su joj dimenzije
• koliko dugo se učitava

To je puno korisnije od pogađanja.

Ako mali thumbnail preuzima sliku od 1,8 MB, problem je odmah vidljiv.

Pogledajte Network

Network panel može brzo pokazati koliko ukupno stranica troši na slike.

Primjer:

Ukupna stranica: 7 MB

od čega:

slike: 5,8 MB

Jasno je gdje treba početi optimizaciju.

Nema smisla prvo analizirati JavaScript file od 30 KB.

Lighthouse

Lighthouse i PageSpeed Insights mogu također ukazati na probleme sa slikama.

Mogu upozoriti na:

• prevelike slike
• neefikasnu kompresiju
• neodgovarajuće dimenzije

Ali preporuke treba koristiti kao dijagnostiku.

Ne slijepo primjenjivati svaki prijedlog.

Slika može biti LCP problem

Ako alat pokaže loš LCP, provjerite je li LCP element slika.

Ako jest, analizirajte:

• veličinu datoteke
• dimenzije
• format
• način učitavanja
• prioritet
• server response

To je puno konkretnije od generičnog:

web je spor zbog slika.

Širu povezanost performansi i UX-a obradili smo u članku kako brzina weba utječe na korisnike i SEO.

Ne gledajte samo desktop

Desktop može učitati tešku sliku gotovo trenutno preko brze veze.

Mobilni korisnik možda neće.

Zato posebno treba testirati:

• mobilne dimenzije
• mobilnu mrežu
• stvarni uređaj

Najveća slika na desktopu vrlo često je najveći problem i na mobitelu ako nije implementiran responsive pristup.

Ne pretjerujte s kompresijom

Optimizacija ne znači uništiti vizual.

Ako fotografija proizvoda izgleda:

• mutno
• puna artefakata
• bez detalja

uštedjeli smo nekoliko kilobajta, ali smo narušili iskustvo.

Posebno kod:

• webshopova
• portfolija
• arhitekture
• fotografije
• dizajna

kvaliteta vizuala je važan dio prodaje.

Treba pronaći granicu prije nego što kompresija postane vidljiva.

Dosljedan aspect ratio

Na listing stranicama korisno je imati konzistentne omjere slika.

Primjerice, sve project kartice mogu koristiti isti aspect ratio.

To:

• stvara uredniji layout
• smanjuje layout shift
• pojednostavljuje dizajn

Ali nemojte prisilno rastezati slike.

Koristite crop ili object-fit kako biste sačuvali proporcije.

Nemojte uploadati istu sliku više puta

Ako ista fotografija postoji u nekoliko sekcija, često nema potrebe uploadati tri fizički identična filea.

Ponovno korištenje može:

• smanjiti media biblioteku
• olakšati održavanje

Naravno, ako različita mjesta zahtijevaju drugačiji crop, posebne verzije mogu imati smisla.

Organizirajte media biblioteku

Kod malog weba 20 slika nije problem.

Kod weba s tisućama proizvoda ili članaka postaje bitna organizacija.

Smisleni nazivi fileova i jasan workflow olakšavaju:

• pronalazak slike
• zamjenu
• čišćenje
• migraciju

Dobra tehnička organizacija često se isplati tek nekoliko godina kasnije.

Checklist prije uploada

Prije dodavanja nove slike provjerite:

Je li potrebna?

Ako ne daje vrijednost, možda ju ne treba koristiti.

Jesu li dimenzije razumne?

Ne uploadati 6000 px za karticu od 400 px.

Je li format dobar?

Fotografija ne treba automatski biti PNG.

Je li komprimirana?

Provjerite razliku između kvalitete i veličine.

Ima li smislen naziv?

Izbjegnite DSC_3928-final-FINAL2.jpg.

Treba li alt?

Ako slika prenosi relevantnu informaciju, dodajte ga.

Checklist nakon uploada

Na stranici provjerite:

• koja se verzija učitava
• koliko datoteka ima KB
• radi li responsive prikaz
• postoji li layout shift
• radi li lazy loading
• izgleda li slika dobro na Retina ekranu
• izgleda li dobro na mobitelu

To je puno bolji proces od pretpostavke da će CMS sve automatski riješiti.

Ne optimizirajte tek na kraju

Ako web ima 300 slika i pred objavu otkrijete da su sve uploadane kao veliki PNG fileovi, optimizacija može postati velik posao.

Bolje je pravila definirati na početku projekta.

Primjer:

• maksimalne dimenzije
• standardni aspect ratio
• format
• naming
• compression workflow

Tako se problem ne gomila.

Optimizacija slika trebala bi biti dio cijelog procesa izrade web stranice.

Slike nakon objave

Web koji je na dan lansiranja savršeno optimiziran može s vremenom postati spor.

Dovoljno je da se šest mjeseci objavljuju:

• ogromne featured fotografije
• neoptimizirani proizvodi
• PNG banneri

Zato pravila za slike trebaju biti dio procesa uređivanja sadržaja.

Ne samo razvoja.

Najčešće greške

Upload originala

Fotografija s fotoaparata ide direktno na web.

Pogrešan format

Velika fotografija spremljena kao PNG bez razloga.

Full-size thumbnail

Mala kartica učitava original od nekoliko tisuća piksela.

Lazy loading hero slike

Najvažnija slika se nepotrebno odgađa.

Nema rezerviranog prostora

Slika uzrokuje pomicanje layouta.

Prejaka kompresija

Slika izgleda loše.

Bez kompresije

Korisnik preuzima višestruko veći file bez vidljive koristi.

Ista slika za sve uređaje

Mobitel dobiva desktop resurs.

Tekst unutar slike

Važan sadržaj postaje manje fleksibilan i pristupačan.

Jednostavan workflow

Za veliki broj poslovnih webova dovoljan je jednostavan proces:

Original
↓
Crop
↓
Resize
↓
WebP / AVIF
↓
Kompresija
↓
Upload
↓
Responsive prikaz
↓
Provjera brzine

Ne treba kompliciran image pipeline za svaki mali web.

Treba dosljedan workflow.

Koliko slika smije imati stranica?

Nema univerzalnog broja.

Stranica može imati 30 dobro optimiziranih fotografija i biti razumno brza.

Može imati jednu jedinu sliku od 12 MB i biti problematična.

Važnije je:

• koliko se učitava odmah
• kolike su datoteke
• jesu li pravilno dimenzionirane
• koriste li lazy loading

Broj slika sam po sebi nije dovoljno dobar kriterij.

Kvaliteta i brzina mogu zajedno

Nema potrebe birati između:

lijepog weba

i:

brzog weba.

Kvalitetno optimizirana fotografija može izgledati gotovo identično originalu, uz višestruko manju datoteku.

Problem najčešće nije u korištenju vizuala.

Problem je u njihovoj tehničkoj pripremi.

Ako optimizaciju slika uključimo u razvoj i redovno uređivanje sadržaja, ona prestaje biti posebna intervencija.

Postaje normalan dio kvalitetnog weba.

Za širu sliku performansi pročitajte kako brzina weba utječe na korisnike i SEO, a za metrike poput LCP-a i CLS-a pogledajte vodič što su Core Web Vitals.

Ako planirate novi poslovni web, pogledajte naše pakete i cijene izrade web stranica.