Stavljanje i učitavanje fotografija na web stranice današnja su svakodnevica i web sadržaji bez njih izgledaju drugačije i nemaju onu dozu vizualne privlačnosti za korisnike. Iako nam se možda čini kako se kod odabira fotografija radi o banalnosti, postoji cijelo jedno područje sitnih postavki i detalja koji čine ogromnu razliku u funkcionalnosti web stranica.
Prvo što treba uzeti u obzir je činjenica da je brzina web stranice kritični faktor za uspješno korisničko iskustvo i SEO optimizaciju.
Nije isto ako učitavanje sadržaja na web stranici traje od 1 do 3 sekunde ili od 1 do 10 sekundi. Korisnici kod sporih web stranica gube strpljenje i interes, a Google će zbog toga stranicu pozicionirati lošije jer je brzina jedan od faktora koji se uzimaju u obzir prilikom vrednovanja. Tko god želi testirati ako mu web stranica ima odgovarajuću brzinu, može koristiti alate kao što su Google PageSpeed Insights, GTmetrix ili Page Weight koji mogu dati podrobne informacije o prilagodbi sadržaja na web stranici prema brzini učitavanja.
Navedeni razlozi sugeriraju kako fotografije i njihova veličina mogu utjecati na rad i protočnost web stranice. Nikad nije uputno stavljati fotografije s visokom rezolucijom jer količina sadržaja kojom se zauzima više prostora može uzrokovati nepoželjna zastajkivanja. Često se savjetuje kako fotografije za web ne bi trebale prelaziti granicu od 500 KB.
Još jedan važan element su ispravne dimenzije fotografija. Nije isto ako se na web stranicu učitava fotografija koja će zauzimati cijeli okvir preglednika ili će biti jedna od fotografija u galeriji. Također nije isto ako se objavljuje fotografija za blog ili ako znamo da će većina korisnika stranicu otvarati na pametnim telefonima.
Dimenzije fotografija su vrlo važne i kod njihovog podešavanja koristan plugin u WordPressu je Resize Image After Upload ili ShortPixel u slučaju provođenja optimizacije. Pomoću njih se fotografija može prilagoditi potrebama korisnika, a dobro je znati kako postoje tzv. „page ruler“ ekstenzije za web preglednike koje uvijek pomažu u utvrđivanju sličnih mjerenja.
Svima koji plasiraju fotografije na web stranice isto tako je važno da one imaju jasnoću prikaza i da nema gubitaka na njihovoj kvaliteti. Ovdje je ključni problem odabir odgovarajućeg formata fotografije koji je pogodan za individualne potrebe korisnika.
Postoji nekoliko najčešćih formata fotografija koji se koriste za objave na web stranicama.
JPEG je mnogima najpoznatiji format i najčešće se koristi. Njegova osnovna prednost je da može prikazati spektre milijuna boja i zbog toga je izvrstan za prikaz kompleksnih fotografija koje sadrže mnogo boja i tonova. Dobro se prilagođava visokim razinama kompresije, što omogućuje prilagodljivost kad su u pitanju veličine datoteka za objave na web stranicama.
PNG format je također popularan i poput JPEG formata podržava spektre milijuna boja, ali među njima postoji vrlo bitna razlika. PNG format je mnogo bolji kod prikaza fotografija na kojima nema kompleksnih prijelaza boja i koje moraju zadržati razinu oštrine. Primjerice, PNG je idealan format kod snimki zaslona (screenshot) gdje je potrebno da prikaz rubova i sadržaja bude jasan, a korištenjem JPEG-a u ovim situacijama rubovi postaju mutni i prikaz nema odgovarajuću kvalitetu.
PNG je izvrstan i kod fotografija koje prema namjeni moraju poprimiti efekt pozadine i stopiti se s njom kroz detalj prozirnosti. Izrada logotipa je pravi primjer za to gdje je važno da su fotografija u prednjem planu i pozadina u stražnjem planu vidljive i gdje rubovi njihovih kontura moraju biti jasno ocrtani.
Još jedna razlika između PNG i JPEG formata je u kompresiji. Komprimirani PNG zadržava svoju kvalitetu, ali zbog toga će sama datoteka zauzimati više prostora. Kvaliteta JPEG formata se komprimiranjem smanjuje, ali veće su mogućnosti doziranja veličine datoteke.
Prvi znakovi distorzije tj. vidljivog pada kvalitete fotografije se često primjećuju na vrijednostima od 50 ili 60 posto kompresije.
GIF format može se odnositi na statične fotografije, ali većina ga koristi za animacije. Ovo je njegova ključna razlika u odnosu na JPEG i PNG formate jer oni animacije ne podržavaju.
GIF zbog svoje primjene kod animacija zauzima više prostora. Moguće ga je optimizirati ili komprimirati, ali rezultati neće biti tako dobri kao kod drugih formata. Važno je napomenuti kako GIF podržava do 256 boja pa ga kao format nije dobro koristiti kod prikaza kompleksnijih fotografija.
SVG je vektorski format slike jer se njegova veličina može povećati ili smanjiti bez gubitka kvalitete. Radi se zapravo o tekstualnoj datoteci koja opisuje linije, krivine, oblike i boje u XML-u. SVG se možda manje koristi u odnosu na prethodna tri formata koji su spomenuti, ali ima neke svoje prednosti.
Zbog izostanka gubitka kvalitete prilikom promjene veličine SVG format je praktičan kad se ista slika prikazuje na više mjesta koristeći razne rezolucije. Uređivanje SVG datoteka je fleksibilno jer se neke mogu uređivati u CSS-u, veličina tog formata je obično mala, a posebno je korisna informacija da Google indeksira SVG što ga, zajedno s olakšanim skaliranjem (promjenom veličine slike), čini jako poželjnim u kontekstu SEO optimizacije.
Glavni nedostatak SVG-a je što ne podržava mnogo detalja. SVG nije baziran na pikselima pa je kod prikaza detalja mnogo više limitiran od ostalih formata.
Na kraju se može spomenuti TIFF kao format koji zadržava najbolju kvalitetu fotografije. Ostali formati u tom pogledu imaju nedostatke, ali TIFF ipak nije pogodan za korištenje na web stranicama. Ne sadrži algoritme za kompresiju poput JPEG-a ili PNG-a pa su datoteke često velike i pune detalja.
TIFF format je najpogodniji za ispisivanje i tiskanje slikovnih materijala, a gotovo se u pravilu koristi u arhiviranju za master datoteke digitaliziranih fotografija.
Iz iznijetog se može zaključiti kako izbor fotografije i njenog formata utječe na tri kategorije kad govorimo o web stranicama:
- izvedba i rad web stranice
- vizualna kvaliteta sadržaja
- skaliranje vizualnog sadržaja
Ovo je samo osnovni pregled važnih elemenata na koje treba pripaziti prilikom odabira fotografija za web stranicu. Postoje nebrojene mogućnosti u podešavanju raznih značajki i odabiru postavki fotografija, ali njihov izbor isključivo ovisi o namjeni web stranice i potrebama koje će imati njeni korisnici.
Fotografijama kao vizualnom dijelu web stranice treba pristupiti ozbiljno i njihovim ispravnim i planiranim podešavanjem dolazi se do funkcionalnog rada koji će zadovoljiti sve potrebe korisnika i podignuti kvalitetu svih online aktivnosti.
Piše: Ervin Mičetić
