Wannear jo de JPG, GIF, PNG, en SVG-formaten brûke foar jo websides

Der binne in oantal byldfoarmmen dy't brûkt wurde op websiden. Guon brûkte foarbylden binne GIF , JPG , en PNG . SVG-bestannen binne ek gewoan brûkt op websiden, sadat web designers noch in oare opsje foar onlineôfbylding jaan.

GIF-ôfbyldings

Brûk GIF-bestannen foar ôfbyldings dy't in lyts, fêste oantal kleuren hawwe. GIF-bestannen wurde altyd feroare oant 256 unike kleuren. It kompresje-algoritme foar GIF-bestannen is minder komplekser as foar JPG-triemmen, mar as it brûkt wurdt op flat-ôfbyldings en tekst, makket it lytsere triemgrutte .

It GIF-formaat is net geskikt foar fotografyskeôfbyldings of bylden mei gradient kleuren. Omdat it GIF-formaat in beheind tal kleuren hat, sjoggers en fotografyen beslute mei banding en pixelaasje as jo bewarje as in GIF-bestân.

Yn in nutshell brûke jo GIFs allinich foar ienfâldige bylden mei mar in pear kleuren, mar jo kinne ek PNGs ek brûke (mear op dat koart).

JPG Images

Brûk JPG-ôfbyldings foar foto's en oare bylden dy't miljoenen kleuren hawwe. It brûkt in komplekse kompresjealgoritme dat jo lytsere grafiken meitsje kinne troch wat fan 'e kwaliteit fan it byld te ferliezen. Dit wurdt in "lossy" kompresje neamd, om't guon fan 'e byldynformaasje ferlern wurdt as it byld komprimearret.

It JPG-formaat is net bepaald foar ôfbyldings mei tekst, grutte blokken fan fêste kleuren, en ienfâldige foarmen mei skerpe rigen. Dit is omdat as it byld komprimearret, de tekst, kleur, linen kinne blurje yn resultaten foar in ôfbylding dy't net sa skerpte is as it yn in oar format wurde bewarre.

JPG-ôfbyldings binne benammen brûkt foar foto's en bylden dy't in protte natuerlike kleuren hawwe.

PNG Ofbyldings

It PNG-formaat is ûntwikkele as in ferfanging foar it GIF-formaat as it ferskynde dat GIF-ôfbyldings ûnderwerp fan in fertsjintwurdiging wêze sille. PNG-grafiken hawwe in bettere kompresjaten as GIF-ôfbyldings dy't resultaat in lytsere byldmateriaal as deselde triem as bewarre as GIF. PNG-bestannen biede alfa-transparânsje, dat jo kinne gebieten hawwe fan jo ôfbyldings dy't folslein transparant binne of sels in alderfak-transparânsje brûke. Bygelyks, in drop-shadow brûkt in sprieding fan transparânsje-effekten en soe gaadlik wêze foar in PNG (of jo kinne gewoan ús einigje mei CSS-shadows).

PNG-ôfbyldings, lykas GIF's, binne net goed oanwêzich foar foto's. It is mooglik om it bandsprobleem te krijen dy't foto's bewarre as GIF-bestannen brûke mei echte kleuren, mar dit kin in grut grutte ôfbyldingen hawwe. PNG-ôfbyldings binne ek net goed stipe troch âldere mobile tillefoans en funksjes tillefoans.

Wy brûke PNG foar alle bestannen dy't transparânsje nedich is. Wy brûke ek PNG-8 foar elke triem dy't passend is as GIF, yn plak fan dit PNG-formaat.

SVG-ôfbyldings

SVG stiet foar Scalable Vector Graphic. Oars as de rasterbasearre formaten fûn yn JPG, GIF, en PNG, brûke dizze bestannen fekkers om lytse triemmen te meitsjen dy't op elke grutte werjûn wurde mei gjin kwaliteit fan ferlies fan fergrutting fan triemgrutte. Se binne makke foar yllustraasjes lykas byldkaikes en sels logos.

It meitsjen fanôfbyldings foar webferliening

Oft it gebrûk fan ôfbyldings jo brûke, en jo webside is wis dat jo in oantal ferskillende formaten brûke fan al har siden, moatte jo derfoar soargje dat alle ôfbyldings op dizze webside taret binne foar webferliening . Too-grutte ôfbyldings kinne in side opmeitsje om stadichoan út te fieren en de totale prestaasjes te beynfloedzjen. Om dit te bestriden, moatte dy bylden optimisearre wurde om de balâns tusken hege kwaliteit en de leechste triemgrutte mooglik te finen op dat kwaliteitsnivo.

It rjochtsjen fan it goede byldfoarm is in ûnderdiel fan 'e striid, mar ek jo meitsje dat jo dizze te bestjoeren binne de folgjende stap yn dizze wichtige webferliening.

Oarspronklik artikel fan Jennifer Krynin. Edited by Jeremy Girard.