Fotografija može biti odlična, a na webu izgledati pogrešno. Ponekad je previše komprimirana; ponekad je kadar odrezan tako da se ne vidi proizvod ili važan dio prostora. Treći problem primijeti se tek na mobitelu: galerija se učitava sporo i posjetitelj ode prije nego što je pregleda.
Optimizacija slika za web znači pronaći ravnotežu između kvalitete, brzine i pravilnog prikaza. Za web vile, portfolio ili trgovinu nije dovoljno samo promijeniti ekstenziju datoteke.
Odredite gdje se fotografija prikazuje
Prije izvoza napravite popis namjena: velika početna fotografija, kartica projekta, galerija ili prikaz proizvoda. Svaka može trebati drukčiju dimenziju i kadar.
Fotografiju širine nekoliko tisuća piksela nemojte slati svakom mobitelu ako se prikazuje u maloj kartici. Istodobno, malenu sliku ne rastežite preko velikog monitora. Tehnička izvedba treba omogućiti da preglednik odabere odgovarajuću veličinu.
Razlikujte kompresiju od rezanja kadra
Kompresija smanjuje datoteku. Rezanje mijenja ono što se vidi. To su različite odluke i treba ih provjeravati odvojeno.
Primjerice, screenshot web stranice u omjeru 16:9 u visokoj kartici može izgubiti navigaciju ili dio naslova ako se koristi prikaz koji popunjava okvir rezanjem. Za prikaz projekta važnije je sačuvati cijeli screenshot nego pod svaku cijenu popuniti površinu.
Kod fotografije prostora rezanje može biti opravdano, ali provjerite ostaje li važan motiv u kadru. Mobilni prikaz često zahtijeva zaseban položaj ili zasebnu verziju fotografije.
Koji format odabrati?
WebP je čest izbor za fotografije; AVIF je dodatna mogućnost kad ga postojeći sustav i postupak obrade podržavaju. PNG ima smisla kad trebate odgovarajuću prozirnost ili specifičnu grafiku, ali nije automatski najbolji izbor za velike fotografije.
Nemojte odluku donositi samo po nazivu formata. Izvezite nekoliko varijanti, usporedite veličinu datoteke i pogledajte detalje. Obratite pozornost na lica, tekst, rubove proizvoda i tamne prijelaze. Manja datoteka nije uspjeh ako slika više ne predstavlja ponudu vjerodostojno.
Naziv datoteke i alt tekst
Naziv poput terasa-apartmana-premantura.webp opisniji je od IMG_4821.webp. Alt tekst neka objasni sadržaj fotografije korisniku koji je ne vidi, primjerice „Natkrivena terasa s blagovaonskim stolom i pogledom na vrt”.
Nemojte u svaki opis umetati iste ključne riječi. Google naglašava opisni alt tekst i izbjegavanje gomilanja izraza u smjernicama za SEO slika. Za čisto dekorativnu sliku prazan alt može biti ispravan izbor; svrha slike određuje opis.
Učitavanje i stabilnost rasporeda
Veliku fotografiju koja se odmah vidi ne treba automatski tretirati kao galeriju pri dnu stranice. Odgođeno učitavanje primijenite na slike za koje ima smisla čekati dok im se korisnik približi.
Zadajte dimenzije ili omjer slike kako raspored ne bi skakao tijekom učitavanja. Testirajte i sporiju vezu, ne samo uredski Wi-Fi. Širi tehnički kontekst opisuje naš vodič o brzini i mobilnoj optimizaciji.
Kontrolna lista za završni pregled
- Je li kadar dobar na mobitelu i računalu?
- Može li se pročitati tekst unutar screenshotova?
- Jesu li fotografije oštre u stvarnoj veličini prikaza?
- Jesu li uklonjene nepotrebno velike originalne datoteke iz prikaza?
- Ima li galerija razumljive opise i jednostavno otvaranje?
Česta pitanja
Postoji li jedna idealna veličina za sve slike?
Ne. Dimenzije ovise o namjeni i rasporedu. Zahtijevati isti izvoz za malu karticu i veliku naslovnu fotografiju obično znači kompromis.
Mogu li koristiti iste fotografije na cijelom webu?
Možete ponovno koristiti relevantne fotografije, ali svaki prikaz treba odgovarajući kadar i veličinu.
Ako pripremate novu web stranicu, pošaljite nam primjere fotografija prije završnog izvoza. Tako možemo dogovoriti formate prema stvarnom dizajnu.