Postoji niz formata slika koji se mogu koristiti na web stranicama. Neki uobičajeni primjeri su GIF , JPG i PNG . SVG datoteke se također često koriste na web stranicama, dajući web dizajneri još jednu opciju za online sliku.
GIF slike
Koristite GIF datoteke za slike koje imaju mali, fiksni broj boja. GIF datoteke uvijek se smanjuju na više od 256 jedinstvenih boja. Kompresija algoritma za GIF datoteke je manje složena nego za JPG datoteke, ali kada se koristi na ravnoj boji slike i tekst daje vrlo male datoteke veličine .
GIF format nije pogodan za fotografske slike ili slike s gradijentnim bojama. Budući da GIF format ima ograničen broj boja, gradijenti i fotografije završit će s banding i pixelation kada se sprema kao GIF datoteku.
Ukratko, koristite GIF-ove samo za jednostavne slike sa samo nekoliko boja, ali za to biste također mogli koristiti i PNG-ove (više o tome uskoro).
JPG Slike
Koristite JPG slike za fotografije i druge slike s milijunima boja. Koristi složeni algoritam kompresije koji vam omogućuje stvaranje manje grafike gubitkom neke kvalitete slike. To se zove "gubitak" kompresije jer se neke informacije o slici izgube kad je slika komprimirana.
JPG format nije prikladan za slike s tekstom, velikim blokovima čvrste boje i jednostavnim oblicima s oštrim rubovima. To je zato što kada je slika komprimirana, tekst, boja ili linije mogu zamagliti što rezultira slikom koja nije tako oštra kao što bi bila spremljena u nekom drugom formatu.
JPG slike najbolje se koriste za fotografije i slike koje imaju puno i puno prirodnih boja.
PNG slike
PNG format razvijen je kao zamjena za GIF format kada se činilo da će GIF slike biti podložne naknadi naknade. PNG grafika ima bolju brzinu kompresije od GIF slika što rezultira manjim brojem slika od iste datoteke spremljene kao GIF. PNG datoteke nude alfa transparentnost, što znači da možete imati područja vaših slika koje su potpuno transparentne ili čak koriste niz alfa transparentnosti. Na primjer, sjena sjena koristi različite efekte prozirnosti i prikladna je za PNG (ili nas možete jednostavno upotrijebiti pomoću CSS sjena).
PNG slike, poput GIF-ova, nisu prikladne za fotografije. Moguće je doći do problema vezivanja koji utječe na fotografije spremljene kao GIF datoteke pomoću istinitih boja, no to može rezultirati vrlo velikim slikama. PNG slike također nisu dobro podržane od starijih mobitela i značajki telefona.
Koristimo PNG za bilo koju datoteku koja zahtijeva transparentnost. Također koristimo PNG-8 za bilo koju datoteku koja bi bila prikladna kao GIF, umjesto toga koristila ovaj PNG format.
SVG Slike
SVG označava Scalable Vector Graphic. Za razliku od formata rastera koji se nalaze u JPG, GIF i PNG, te datoteke koriste vektore za stvaranje vrlo malih datoteka koje se mogu prikazati u bilo kojoj veličini bez gubitka kvalitete povećanja veličine datoteke. Oni su stvoreni za ilustracije poput ikona i čak logotipa.
Priprema slika za web isporuku
Bez obzira na koji format koji koristite, a vaša web stranica svakako će upotrebljavati niz različitih formata na svim stranicama, morate osigurati da su sve slike na toj web stranici spremne za isporuku na webu . Prevelike slike mogu uzrokovati polagano pokretanje web mjesta i utjecaj na ukupnu izvedbu. Da bi se borili protiv toga, te slike moraju biti optimizirane kako bi se pronašla ravnoteža između visoke kvalitete i najniže moguće veličine datoteke na toj razini kvalitete.
Odabir odgovarajućeg formata slike dio je bitke, ali i osiguravanje da ste spremili te datoteke je sljedeći korak u ovom važnom procesu isporuke web stranica.
Izvorni članak Jennifer Krynin. Uredio je Jeremy Girard.