Uobičajeni primjeri vrsta slika na webu uključuju GIF, JPG, i PNG. SVG datoteke. Ovi različiti formati nude web dizajnerima razne mogućnosti za optimizaciju vizualne privlačnosti web stranice.
GIF slike
Upotrijebite GIF datoteke za slike koje imaju mali, fiksni broj boja. GIF datoteke su uvijek svedene na najviše 256 jedinstvenih boja. Algoritam kompresije za GIF datoteke manje je složen nego za JPG datoteke, ali kada se koristi na ravnim slikama u boji i tekstu, stvara vrlo male veličine datoteka.
GIF format nije prikladan za fotografske slike ili slike s gradijentnim bojama. Budući da GIF format ima ograničen broj boja, gradijenti i fotografije završit će pojasevima i pikselacijom kad se spreme kao GIF datoteka.
JPG slike
Koristite JPG slike za fotografije i druge slike koje imaju milijune boja. Koristi složeni algoritam kompresije koji vam omogućuje stvaranje manjih grafika gubitkom neke kvalitete slike. To se naziva kompresijom s gubitkom, jer se dio informacija o slici gubi kad se slika komprimira.
JPG format nije prikladan za slike s tekstom, velike blokove u punoj boji i jednostavne oblike s oštrim rubovima. To je zato što kad se slika komprimira, tekst, boja ili crte mogu se zamagliti što rezultira slikom koja nije toliko oštra kao što bi bila spremljena u drugom formatu.
PNG slike
PNG format razvijen je kao zamjena za GIF format kada se pokazalo da će GIF slike biti predmet naknade. PNG grafika ima bolju stopu kompresije od GIF slika, što rezultira manjim slikama od iste datoteke spremljene kao GIF. PNG datoteke nude alfa prozirnost, što znači da možete imati područja svojih slika koja su ili potpuno prozirna ili čak koristiti niz alfa prozirnosti. Na primjer, ispuštena sjena koristi niz efekata prozirnosti i bila bi prikladna za PNG (ili nas možete jednostavno završiti pomoću CSS sjena).
PNG slike, poput GIF-ova, nisu baš prikladne za fotografije. Moguće je zaobići problem s pojasevima koji utječe na fotografije spremljene kao GIF datoteke koristeći prave boje, ali to može rezultirati vrlo velikim slikama. PNG slike također nisu dobro podržane od starijih mobitela i mobilnih telefona.
SVG slike
SVG je skraćenica od Scalable Vector Graphic. Za razliku od rasterskih formata koji se nalaze u JPG, GIF i PNG, ove datoteke koriste vektore za stvaranje vrlo malih datoteka koje se mogu prikazati u bilo kojoj veličini bez gubitka u kvaliteti povećanja veličine datoteke. Stvorene su za ilustracije poput ikona, pa čak i logotipa.
Priprema slika za web isporuku
Bez obzira koji format slike koristite, osigurajte da su sve slike na toj web lokaciji pripremljen za web dostavu. Prevelike slike mogu uzrokovati da web lokacija sporo radi i utjecati na ukupnu izvedbu. Da bi se borio protiv ovoga, te slike moraju biti optimizirane kako biste pronašli ravnotežu između visoke kvalitete i najmanje veličine moguće datoteke na toj razini kvalitete.
Odabir pravog formata slika dio je bitke, ali i osiguravanje da ste pripremili te datoteke sljedeći je korak u ovom važnom procesu web isporuke.