Kdaj uporabiti oblike JPG, GIF, PNG in SVG za vaše spletne slike

Obstajajo številne oblike slik, ki jih lahko uporabljate na spletnih straneh. Nekateri pogosti primeri so GIF , JPG in PNG . Datoteke SVG se prav tako pogosto uporabljajo na spletnih straneh, kar spletnim oblikovalcem omogoča še eno možnost za spletno podobo.

GIF slike

Uporabite datoteke GIF za slike, ki imajo majhno, določeno število barv. Datoteke GIF se vedno zmanjšajo na največ 256 edinstvenih barv. Stiskalni algoritem za datoteke GIF je manj zapleten kot za datoteke JPG, vendar se pri uporabi na ravnih barvnih slikah in besedilu proizvaja zelo majhne velikosti datotek .

Format GIF ni primeren za fotografske slike ali slike z barvami gradienta. Ker imajo oblike GIF omejeno število barv, se bodo nakloni in fotografije končali s pasnicami in slikovnimi pikami, kadar jih shranite kot datoteko GIF.

Na kratko bi uporabili GIF samo za preproste slike z le nekaj barvami, lahko pa tudi za to uporabite PNG (več o tem kmalu).

JPG slike

Uporabite JPG slike za fotografije in druge slike, ki imajo na milijone barv. Uporablja kompleksen algoritem stiskanja, ki vam omogoča, da ustvarite manjše grafike tako, da izgubite nekaj kakovosti slike. To se imenuje kompresija "izgubo", ker so nekatere informacije o sliki izgubljene, ko je slika stisnjena.

Format JPG ni primeren za slike z besedilom, velike črne barve in preproste oblike z ostrimi robovi. To je zato, ker ko je slika stisnjena, lahko besedilo, barva ali črte zameglijo, kar pomeni, da slika ni tako ostra, ker bi bila shranjena v drugem formatu.

Slike JPG se najbolje uporabljajo za fotografije in slike, ki imajo veliko in veliko naravnih barv.

Slike PNG

Oblika PNG je bila razvita kot nadomestilo za obliko GIF, ko se je zdelo, da bi bile slike GIF predmet plačila licenčnine. Grafike PNG imajo boljšo stopnjo stiskanja kot slike GIF, kar povzroči manjše slike kot ista datoteka, shranjena kot GIF. PNG datoteke ponujajo alfa preglednost, kar pomeni, da imate lahko področja vaših slik, ki so popolnoma pregledne ali celo uporabljajo vrsto alfa preglednosti. Na primer, kapljica kapljice uporablja vrsto učinkov transparentnosti in bi bila primerna za PNG (ali namesto tega lahko namesto tega uporabite sence CSS).

Slike PNG, kot so GIF, niso primerne za fotografije. Obstajajo težave z vezenjem, ki vpliva na fotografije, shranjene kot GIF datoteke z uporabo dejanskih barv, vendar lahko to povzroči zelo velike slike. Slike stare PNG tudi ne podpirajo starejši mobilni telefoni in funkcijski telefoni.

PNG uporabljamo za vse datoteke, ki zahtevajo preglednost. Uporabljamo tudi PNG-8 za katero koli datoteko, ki bi bila primerna kot GIF, namesto tega uporabite ta format PNG.

SVG slike

SVG označuje Scalable Vector Graphic. V nasprotju z rasterskimi oblikami, ki jih najdemo v JPG, GIF in PNG, te datoteke uporabljajo vektorje za ustvarjanje zelo majhnih datotek, ki jih je mogoče prikazati na poljubni velikosti, ne da bi pri tem izgubili kakovost povečanja velikosti datoteke. Ustvarjeni so za ilustracije, kot so ikone in celo logotipi.

Priprava slik za spletno dostavo

Ne glede na obliko slike, ki jo uporabljate, in vaša spletna stran je prepričana, da uporablja številne različne oblike na vseh svojih straneh, morate zagotoviti, da so vse slike na tem spletnem mestu pripravljene za spletno dostavo . Preveč velike slike lahko povzročijo, da stran deluje počasi in vpliva na splošno učinkovitost. Za boj proti tem je treba te slike optimizirati, da bi našli ravnovesje med visoko kakovostjo in najmanjšo velikostjo datoteke na tej ravni kakovosti.

Izbira pravilne oblike slik je del bitke, a tudi zagotovite, da ste jih pripravili, je naslednji korak v tem pomembnem spletnem procesu dostave.

Izvorni članek Jennifer Krynin. Uredil Jeremy Girard.