Slika je slika - tu i nema neke mudrosti, zar ne? Pa i nije baš tako...
Postoje elementi na sajtu koji se mogu odraditi i slikom i tekstom. Recimo stavke galvnog menija su linkovi na strane sajta. Oni mogu biti tekstualni i tada se može odabrati font, boja, neko osnovno formatiranje (podvučeni, iskošeni, zadebljani) i to bi bilo to. A mogu biti i slike, na kojima će opet biti tekst, ali sada imamo punu slobodu boja, efekata, filtera i ostalih čudesa Photoshop-a. Kao da se odgovor sam nameće - slike! Međutim...
Zamislite da je potrebno zameniti naziv linka. Kada je on tekstualni jednostavno će se ukucati novi tekst. A kada je slika moraće neko iznova nacrtati tu sliku, a taj neko će Vam najverovatnije papreno naplatiti "održavanje" sajta. Još ako ste pri naručivanju sajta pristali na "genijalnu" ideju da naslovi strana ili još neki tekstovi budu slike, radi lepšeg izgleda, onda se spremite da često posežete za novčanikom..
Zatim, pretraživači poput Googla čitaju tekst, ali ne i sa slika. Pročitaće Google alt tag slike ako ga ima, ali će ipak više vrednovati tekstualni link.
Dalje, tražite li neki tekst (CTRL + F), ako se nalazi u slici, naravno neće biti pronađen. Copy/Paste kod slike neće raditi.
Slike se uglavnom kompresuju, da bi zauzimale manje mesta (JPG, GIF), ali pri kompresiji se gubi na kvalitetu slike, tako da je sam tekst uvek čitljiviji od "slike teksta".
I na kraju, ali ne najmanje bitno je da slika zauzima uvek više mesta nego tekst. To znači da će se strane sa slikama umesto tekstom učitavati sporije, browser će trošiti više RAM-a, slike će se keširati, pa će se trošiti i prostor na disku...
Mislim da je sada stavar jasnija - kad god je moguće umesto slike staviti tekst, poželjno je to isto i uraditi!
Pri kreiranju web strana uglavnom se koriste JPG i GIF formati. Prava je retkost pronaći sliku u PNG formatu na nekom sajtu. Svaki od ova 3 formata ima svoje prednosti i mane. Samo pod određenim okolnostima prednosti će doći do izražaja, a u svim ostalim situacijama prevladaće mane, što će se odraziti na izgled slike i cele strane/sajta uopšte. Neki web dizajneri idu u tu krajnjost da na celom sajtu koriste isključivo jedan format slika, što je naravno pogrešno.
GIF je format sa limitiranim brojem boja - GIF slika može da ima maksimalno 256 boja. Iz tog razloga GIF nije pogodan za prikaz slika koje bi trebale da imaju veliki broj boja, odnosno nijansi, kao npr. fotografije, gradijenti boja i sl.
S druge strane gif ne dodaje "šum" (artifakte) slici (osim ako je urađen "dithering" tehnikom, da bi se donekle nedomestio nedostatak boja), pa je vrlo pogodan za prikaz teksta, grafikona, grafova i manjih slika.
Mislim da je više nego očigledno kakve deformitete na slici može izazvati GIF format kada se upotrebi gde ne treba. Još, nećete verovati, ali u gornjem primeru fajl GIF slike je skoro 4x veći od fajla JPG-a!
JPG je sušta suprotnost GIF-u. Kod njega broj boja nije limitiran, ali će zarad smanjenja veličine fajla sliku deformisati. Kao što se gore može primetiti JPG je najbolje rešenje za slike sa puno boja, fotografije i sl. ali nikako se ne snalazi sa velikim blokovima iste boje, kontrastnim slikama i sl. Evo primera:
Opet je razlika u kvalitetu više nego očigledna, ali se u ovom slučaju GIF pokazao kao znatno bolje rešenje. Veličina oba fajla je približno jednaka. Pogrešnim izborom formata slike ćemo u najboljem slučaju "samo" pokvariti kvalitet slike, a neretko znatno ćemo uvećati veličinu fajla.
PNG - spomenimo još i ovaj format, mada se najređe koristi. PNG je najmanje spreman na kompromise po pitanju kvaliteta slike, ali zato daje najduže fajlove.
Pored formata slike potrebno je pravilno odabrati i stepen kompresije slike - i od njega će bitno zavisiti kako izgled, tako i veličina fajla, te je potrebno postići optimalni kompromis.
Često sam se susretao sa praksom forsiranja dimenzija slika, ali se ona nikada nije pokazala korisnom. Ako se dimenzije ne navedu browser će sam utvrditi dimenzije i pravilno prikazati sliku. Ako se navedu, a budu tačne opet nema svrhe - browser bi ionako utvrdio iste dimenzije i isto prikazao sliku. Ali postoji mogućnost da se sam fajl slike zameni drugim, sa slikom drugih dimenzija, pa će onda browser razvući novu sliku da dimenzije stare.
Kvalitet razvlačenje slike varira od browsera do browsera, ali razvučena slika će uvek biti goreg kvaliteta od originala!
Postoje još slučajevi kada se namerno navode pogrešne dimenzije, da bi se slika smanjila ili povećala iz browsera. U slučaju navođenja većih dimenzija slika će osetno izgubiti na kvalitetu, dok pri navođenju manjih gubitak će biti manji (ali uočljiv), ali će fajl biti nepotrebno velik.
Sećam se primera amaterski odrađene galerije slika, gde se isti fajlovi koriste za prikaz slika i thumbnail-ova. Pored lošeg izgleda, strana sa thumbnail-ovima se jako dugo učitavala, jer su thumbnail-ovi bili možda 100-ak puta veći nego što je potrebno.
Ovo se radi jer je lakše administrirati jedan fajl po slici nego dva (sama slika i thumbnail), ali daje očajno loše rezultate.
Pogledajte desno kako izgleda ista slika iz gornjeg primera, ali kada joj se forsiraju dimenzije neznatno različite od pravih. Slika će drugačije izgledati od browser-a do browser-a. Negde će biti zamućena, a negde će se primetiti pikselizacija, ali nigde neće biti ni blizu kvaliteta originala.
Iz istog razloga neki programeri (uglednih firmi, kod sajtova velikih brendova) koriste tehniku da male slike (thumbnail-ove) dinamički generišu pri svakom prikazivanju. Na serveru se čuva jedna slika velikih dimenzija, pa je lakše odraditi administraciju za istu, a sve manje slike se dinamički generišu pri prikazu strane. Time se jako opterećuje server i sam prikaz strane je vrlo spor.
Iz svega navedenog da se zaključiti da je najbolje slike prikazivati kakve jesu, bez forsiranja dimenzija bilo od strane browsera ili servera.
Neophodno je da svaka slika ima ALT tag. Ako je slika samo deo dizajna i nema neki dublji smisao na strani ALT tag bi trebao biti prazan (da ga softver za pomoć hendikepiranim osobama koji čita sadržaj strane ne bi čitao bez potrebe). U suprotnom ALT tag treba da sadrži kraći opis slike.
