Optimizacija slika (fotografija i crteža) za web

Prilikom izrade veb sajta vrlo je važno povesti računa o optimizaciji grafičkih sadržaja koji se na njemu nalaze. To se odnosi i na postavljanje fotografija i ilustracija na blogove, forume i druge vrste sajtova gde ne pravite ceo sajt ali neki grafički sadržaj prikazujete na njemu.

„Najteži“ grafički elementi su svakako upravo fotografije i druge ilustracije. One zauzimaju poprilično prostora, čak i ako to na prvi pogled nije očigledno. Optimizacija fotografija se svodi na postupak kojim se smanjuje dužina datoteke u kojoj se ona nalazi, ali tako da se i dalje zadrži prihvatljiv nivo njenog kvaliteta. Na taj način štedimo prostor na disku, ali i ubrzavamo učitavanje veb stranice.

Osnovni način optimizacije fotografija je da ih smanjite. Nije redak slučaj da ljudi na sajt stave fotografiju u punoj rezoluciji a prikazuju je smanjenu. Uvek smanjite fotografiju tačno na onu veličinu koja vam je potrebna na sajtu. Ako je veća, to samo nepotrebno troši prostor i usporava njeno učitavanje. Ako je potrebno da korisnik vidi i uvećanu fotografiju onda posebno postavite tu uvećanu fotografiju i omogućite korisniku da je pogleda ako to želi.

U veb stanama se fotografije prikazuju JPG, GIF i PNG formatima. Svaki od njih ima prednosti i mane.

JPG format je namenjen prvenstveno za fotografije. Način „pakovanja“ podataka je takav da se pokušava kompresija podataka na osnovu sadržaja, odnosno program nastoji da utvrdi koji elementi fotografije su nebitni, to jest oko ih ne primećuje i njih izbacuje iz fotografije. Ovaj način kompresije se zove kompresija sa gubitkom, jer se nepovratno gubi određeni deo informacija. Pažljivim podešavanjem parametara zaita se može postići da se datoteka fotografije značajno smanji (i do desetak puta) a da oko to ne primeti ili da promene budu slabo vidljive. Slaba tačka JPG formata su prelivi boja i oštre ivice, zbog čega je on i najpogodniji za fotografije, a ne za crteže.

GIF format je namenjen prvenstveno za crteže i uopšte ilustracije koje ne sadrže mnogo boja, jer ovaj format ne može da prikaže više od 256 boja. Obično se koristi za logotipe, razne sitne sličice i grafičke elemente na strani koji sadrže mali broj boja. Prednost ovog formata je upavo u tome što zbog malog broja boja, može da vrlo dobro iskompresuje sadržaj i napravi izuzetno male datoteke. Specijalnost su mu velike površine iste boje. Često može da posluži i za prikaz fotografije jer je odgovarajućim alatima moguće optimizovati svaku boju pojedinačno i tako postići da fotografija i sa 256 boja izgleda vrlo dobro. Još jedna bitna karakteristika GIF formata je da može da bude proziran – neku površinu na slici možete proglasiti providnom i kroz nju će se videti ono što se nalazi ispod sličice.

PNG format je novijeg datuma, i ima dve verzije, jedna odgovara za kompresiju fotografija, a druga kompresiji ilustracija. Po pravilu, za ilustracije je bolji od GIF-a jer daje manje datoteke za isti kvalitet.

Neophodno je da o ovome vodite računa, jer na svakom iole posećenom sajtu upravo postaje problem veliki saobraćaj i potrošnja ograničenih resursa koje po pravilu plaćate vi ako je vaš sajt ili vlasnik sajta ko sadržaj stavljate na tuđi sajt.

Detaljno uputstvo

Pre mnogo vremena, baš zbog potrebe da posetiocima svog foruma pomognem da bolje optimizuju fotografije napravio sam uputstvo za optimizaciju fotografija radi objavljivanja na web-u . Pogledajte ga i primenite. Uputstvo je detaljno sa objašnjenim postupcima i primerima i u stvari pokazuje koliko je optimizacija jednostavan postupak

Primenite ga i dobitak ćete brzo osetiti, jer ako optimizacijom samo na jednoj fotografiji uštedite 10kB (a uštedećete mngo više), to znači da sa deset fotografija na strani štedite 100kb, što će se itekako osetiti na brzini učitavanja stranice.