Daar is 'n aantal beeldformate wat op webblaaie gebruik kan word. Enkele algemene voorbeelde is GIF , JPG en PNG . SVG lêers word ook algemeen gebruik op webwerwe vandag, wat webontwerpers nog 'n opsie vir aanlynbeeld gee.
GIF Beelde
Gebruik GIF-lêers vir beelde wat 'n klein, vaste aantal kleure het. GIF lêers word altyd verminder tot nie meer as 256 unieke kleure. Die kompressie-algoritme vir GIF-lêers is minder kompleks as vir JPG-lêers, maar wanneer dit op plat kleurbeelde en teks gebruik word, word dit baie klein lêergroottes .
Die GIF-formaat is nie geskik vir fotografiese beelde of beelde met gradiënt kleure nie. Omdat die GIF-formaat 'n beperkte aantal kleure het, sal gradiënte en foto's eindig met banding en pixelasie wanneer dit gestoor word as 'n GIF-lêer.
In 'n neutedop gebruik jy slegs GIF's vir eenvoudige beelde met slegs 'n paar kleure, maar jy kan ook PNG's hiervoor gebruik (meer kortliks).
JPG Images
Gebruik JPG beelde vir foto's en ander beelde wat miljoene kleure het. Dit gebruik 'n komplekse kompressie-algoritme wat jou toelaat om kleiner grafika te skep deur sommige van die kwaliteit van die prent te verloor. Dit word 'n "verliese" kompressie genoem omdat sommige van die beeldinligting verlore gaan as die prentjie saamgepers word.
Die JPG-formaat is nie geskik vir beelde met teks, groot blokke van vaste kleur nie, en eenvoudige vorms met skerp rande. Dit is omdat wanneer die prentjie saamgepers word, die teks, kleur of lyne vervaag, wat lei tot 'n beeld wat nie so skerp is nie, aangesien dit in 'n ander formaat gestoor sal word.
JPG beelde word die beste gebruik vir foto's en beelde wat baie natuurlike kleure bevat.
PNG-beelde
Die PNG-formaat is ontwikkel as 'n vervanging vir die GIF-formaat wanneer dit blyk dat GIF-beelde onderhewig sou wees aan 'n tantiemfooi. PNG-grafika het 'n beter drukverhouding as GIF-beelde wat kleiner beelde tot gevolg het as dieselfde lêer wat as 'n GIF gestoor is. PNG-lêers bied alfa-deursigtigheid, wat beteken dat jy areas van jou beelde kan hê wat heeltemal deursigtig is of selfs 'n reeks alfa-deursigtigheid gebruik. Byvoorbeeld, 'n druppelskadu gebruik 'n verskeidenheid deursigtige effekte en sal geskik wees vir 'n PNG (of jy kan net ons met CSS-skaduwees in plaas daarvan stop).
PNG-beelde, soos GIF's, is nie geskik vir foto's nie. Dit is moontlik om die verbandprobleem wat foto's op te slaan wat as GIF-lêers gestoor word, gebruik te maak van ware kleure, maar dit kan tot baie groot beelde lei. PNG-beelde word ook nie goed ondersteun deur ouer selfone en funksie fone nie.
Ons gebruik PNG vir enige lêer wat deursigtigheid vereis. Ons gebruik ook PNG-8 vir enige lêer wat geskik sou wees as 'n GIF, in plaas daarvan om hierdie PNG-formaat te gebruik.
SVG Images
SVG staan vir Scalable Vector Graphic. In teenstelling met die raster-gebaseerde formate wat in JPG, GIF en PNG gevind word, gebruik hierdie lêers vektore om baie klein lêers te skep wat op enige grootte gelewer kan word sonder verlies van kwaliteit van toename in lêergrootte. Hulle word geskep vir illustrasies soos ikone en selfs logo's.
Voorbeelde van beelde vir weblewering
Ongeag watter beeldformaat jy gebruik, en jou webwerf is sekerlik 'n aantal verskillende formate oor al sy bladsye, moet jy seker maak dat alle beelde op die webwerf vir weblewering voorberei word . Te groot beelde kan veroorsaak dat 'n webwerf stadig vertoon en die algehele prestasie beïnvloed. Om dit te bekamp, moet die beelde geoptimaliseer word om die balans tussen hoë gehalte en die laagste lêergrootte op daardie gehaltevlak te vind.
Die keuse van die regte beeldformaat is deel van die stryd, maar ook om seker te maak dat u daardie lêers voorberei het, is die volgende stap in hierdie belangrike web afleweringsproses.
Oorspronklike artikel deur Jennifer Krynin. Geredigeer deur Jeremy Girard.