Postoji nekoliko formata slike koje se mogu koristiti na web stranicama. Neki uobičajeni primeri su GIF , JPG i PNG . SVG datoteke se takođe obično koriste na web stranicama danas, dajući web dizajnerima još jednu mogućnost za online sliku.
GIF slike
Koristite GIF datoteke za slike koje imaju mali, fiksni broj boja. GIF datoteke su uvek svedene na ne više od 256 jedinstvenih boja. Algoritam kompresije za GIF datoteke je manje složen nego za JPG datoteke, ali kada se koristi na ravnim bojama slike i tekstu, on proizvodi vrlo male veličine datoteka .
GIF format nije pogodan za fotografske slike ili slike sa gradijentnim bojama. Pošto GIF format ima ograničen broj boja, nagibi i fotografije će se završiti bandingom i pikseliranjem kada se sačuva kao GIF datoteka.
Na kratko ćete koristiti GIF samo za jednostavne slike sa samo nekoliko boja, ali takođe možete koristiti i PNG-ove (više o tome kratko).
JPG slike
Koristite JPG slike za fotografije i druge slike koje imaju milione boja. Koristi složeni algoritam kompresije koji vam omogućava da kreirate manje grafike tako što ćete izgubiti neku kvalitetu slike. Ovo se zove "gubitak" kompresije, jer se neke slike mogu izgubiti kada se slika stisne.
Format JPG nije prilagođen slikama sa tekstom, velikim blokovima solidne boje i jednostavnim oblicima sa oštrim ivicama. To je zato što kada je slika komprimirana, tekst, boja ili linije mogu zamagliti što rezultira u slici koja nije toliko oštra, jer bi ona bila sačuvana u drugom formatu.
JPG slike se najbolje koriste za fotografije i slike koje imaju puno i puno prirodnih boja.
PNG slike
PNG format je razvijen kao zamena za GIF format kada se pojavi da će GIF slike biti predmet naknade za naknadu. PNG grafike imaju bolju stopu kompresije od GIF slika koje rezultiraju manjim slikama od iste datoteke sačuvane kao GIF. PNG datoteke nude alfa transparentnost, što znači da možete imati područja vaših slika koje su u potpunosti transparentne ili čak koriste niz alfa transparentnosti. Na primjer, sjena kapi koristi niz efekata transparentnosti i biće pogodna za PNG (ili ćete nam samo umjesto nas koristiti kraj senzora CSS).
PNG slike, poput GIF-ova, nisu pogodne za fotografije. Moguće je postići problem vezivanja koja utječe na snimke sačuvane kao GIF datoteke koristeći iste boje, ali to može dovesti do vrlo velikih slika. PNG slike takođe nisu dobro podržane starijim mobilnim telefonima i funkcionalnim telefonima.
Mi koristimo PNG za bilo koji fajl koji zahtijeva transparentnost. Takođe koristimo PNG-8 za bilo koju datoteku koja bi bila pogodna kao GIF, umjesto toga koristeći ovaj PNG format.
SVG slike
SVG označava Scalable Vector Graphic. Za razliku od formatova zasnovanih na rasterskim formatima koji se nalaze u JPG, GIF i PNG, ovi fajlovi koriste vektore za kreiranje veoma malih datoteka koje se mogu prikazati na bilo kojoj veličini bez gubitka kvaliteta povećanja veličine datoteke. Kreirani su za ilustracije poput ikona i čak logotipa.
Priprema slika za web dostave
Bez obzira koji format slike koristite, a vaša web stranica sigurno će koristiti različite formate na svim njegovim stranicama, morate osigurati da se sve slike na tom web-lokaciji pripremaju za web dostavljanje . Previše velikih slika može prouzrokovati da se stranica polako pokreće i da utiče na ukupne performanse. Da bi se suprotstavili ovome, te slike moraju biti optimizovane kako bi se pronašlo ravnoteže između visokog kvaliteta i najmanjeg broja datoteka na tom nivou kvaliteta.
Izbor pravog formata slike je dio bitke, ali takođe i obezbeđivanje da ste pripremili te fajlove je sledeći korak u ovom važnom procesu dostavljanja weba.
Originalni članak Jennifer Krynin. Uredio Jeremy Girard.