Webwerf beeldformate:Die keuse van die regte formaat vir die regte taak

StackOverflow https://stackoverflow.com/questions/392635

  •  23-08-2019
  •  | 
  •  

Vra

Wanneer jy 'n webwerf ontwerp, wat beskou jy as die beste beeldformaat om vir 'n spesifieke taak te gebruik?

Ek bevind myself altyd in 'n dilemma wanneer ek probeer uitvind watter formaat om vir 'n spesifieke taak te gebruik ... soos byvoorbeeld, moet ek .jpg oral gebruik? of, wanneer en hoekom moet ek 'n .png gebruik?

Byvoorbeeld, neem Amazonse webwerf, gebruik hulle .jpg vir produk beelde (Voorbeeld), .gif vir hierdie deursigtige pixel (Voorbeeld) en .png vir hul CSS Sprites (Voorbeeld)

Aan die ander kant, Play.com gebruik 'n .gif vir hul webwerf logo (Voorbeeld), maar gebruik .jpg vir hul webwerfprodukte (soos Amazon) (Voorbeeld) en wat hul hoofblad betref, het hulle nie enige nie .pngs daarop.

So watter formate moet ek vir my webwerwe gebruik?en hoekom moet ek dit gebruik?

[OPDATEER]

Dankie Wreed O vir hierdie skakel om die verskille te verduidelik, en ook Dustin om redes te gee oor wat om te gebruik.

Was dit nuttig?

Oplossing

JPEG is vir foto's. Ek sien JPEG met teks in hulle af en toe en hulle kyk net verskriklik. Teks is die beste vir teks, PNG anders gebruik.

As dit nie 'n foto nie, maar jy wil 'n grafiese daarvan, gebruik 'n PNG. A PNG is byna altyd kleiner as die ekwivalent gif en sal nie kwaliteit te verloor soos 'n JPEG-lêer. A PNG ekwivalent van 'n JPEG sal tipies 'n baie groter wees (met die aanvaarding dis foto realistische). Daar kan tye wees waar dit is nog steeds wenslik.

PNG doen voorsiening te maak vir 8-stukkies van deursigtigheid, maar as jy na Internet Explorer ondersteun, sal jy vind dat hulle voortdurend weier om korrek te ondersteun nie. Hulle nie ondersteun 'n enkele stukkie van deursigtigheid 'n 8-bit beeld (in wese dieselfde as gif) in sover ek weet. Daar is ook talle hacks tot 8-bit deursigtigheid kry om te werk in IE. Ek het nog nooit gepla, myself.

In opsomming:

  • Fotos → jpg
  • ! Fotos → png

Ander wenke

Jy moet bewus wees van 'n paar sleutelfaktore...

Eerstens is daar twee tipes kompressie: Verliesloos en Verlies.

Verliesloos beteken dat die beeld kleiner gemaak word, maar dit benadeel nie die kwaliteit nie. Verlies beteken dat die beeld (nog) kleiner gemaak word, maar die kwaliteit benadeel.As jy 'n prent in 'n Lossy-formaat oor en oor gestoor het, sal die beeldkwaliteit geleidelik slegter en slegter word.

Daar is ook verskillende kleurdieptes (palette): Geïndekseerde kleur en Direkte kleur.

Met Geindekseer dit beteken dat die prent slegs 'n beperkte aantal kleure (gewoonlik 256) kan stoor wat deur die prentouteur gekies word, met Direkte dit beteken dat jy baie duisende kleure kan stoor wat nie deur die skrywer gekies is nie.

BMP - Verliesloos / geïndekseer en direk

Dit is 'n ou formaat.Dit is Lossless (geen beelddata gaan verlore by stoor nie), maar daar is ook min tot geen kompressie nie, wat beteken dat spaar as BMP BAIE groot lêergroottes tot gevolg het.Dit kan palette van beide geïndekseer en direk hê, maar dit is 'n klein troos.Die lêergroottes is so onnodig groot dat niemand ooit regtig hierdie formaat gebruik nie.

Goed vir:Nie regtig iets nie.Daar is niks wat BMP in uitblink nie, of dit word nie beter gedoen deur ander formate nie.

BMP vs GIF

GIF - Slegs verliesloos / geïndekseer

GIF gebruik verlieslose kompressie, wat beteken dat jy die prent oor en oor kan stoor en nooit enige data kan verloor nie.Die lêergroottes is baie kleiner as BMP, want goeie kompressie word eintlik gebruik, maar dit kan net 'n geïndekseer palet stoor.Dit beteken dat daar slegs 'n maksimum van 256 verskillende kleure in die lêer kan wees.Dit klink na nogal 'n klein bedrag, en dit is.

GIF-beelde kan ook geanimeer word en het deursigtigheid.

Goed vir:Logo's, lyntekeninge en ander eenvoudige beelde wat klein moet wees.Slegs regtig gebruik vir webwerwe.

GIF vs JPEG

JPEG - Verlies / direk

JPEG-beelde is ontwerp om gedetailleerde fotografiese beelde so klein as moontlik te maak deur inligting te verwyder wat die menslike oog nie sal opmerk nie.As gevolg hiervan is dit 'n Lossy-formaat, en om dieselfde lêer oor en oor te stoor, sal daartoe lei dat meer data mettertyd verlore gaan.Dit het 'n palet van duisende kleure en is dus ideaal vir foto's, maar die verliesagtige kompressie beteken dat dit sleg is vir logo's en lyntekeninge:Hulle sal nie net vaag lyk nie, maar sulke beelde sal ook 'n groter lêergrootte hê in vergelyking met GIF's!

Goed vir:Foto's.Ook gradiënte.

JPEG vs GIF

PNG-8 - Verliesloos / geïndekseer

PNG is 'n nuwer formaat, en PNG-8 (die geïndekseerde weergawe van PNG) is regtig 'n goeie plaasvervanger vir GIF's.Ongelukkig het dit egter 'n paar nadele:Eerstens kan dit nie animasie ondersteun soos GIF kan nie (wel dit kan, maar net Firefox blyk dit te ondersteun, anders as GIF-animasie wat deur elke blaaier ondersteun word).Tweedens het dit 'n paar ondersteuningsprobleme met ouer blaaiers soos IE6.Derdens, belangrike sagteware soos Photoshop het baie swak implementering van die formaat.(Verdomp, Adobe!) PNG-8 kan net 256 kleure stoor, soos GIF's.

Goed vir:Die belangrikste ding wat PNG-8 beter doen as GIF's, is ondersteuning vir Alpha Transparency.

PNG-8 vs GIF

Belangrike nota: Photoshop ondersteun nie Alpha Transparency vir PNG-8-lêers nie.(Verdomp jou, Photoshop!) Daar is egter maniere om Photoshop PNG-24 na PNG-8-lêers te omskep terwyl hulle hul deursigtigheid behou.Een metode is PNGQuant, 'n ander is om jou lêers mee te stoor Vuurwerke.

PNG-24 - Verliesloos / direk

PNG-24 is 'n wonderlike formaat wat Lossless enkodering kombineer met direkte kleur (duisende kleure, net soos JPEG).Dit is baie soos BMP in daardie opsig, behalwe dat PNG eintlik beelde saampers, so dit lei tot baie kleiner lêers.Ongelukkig sal PNG-24-lêers steeds baie groter wees as JPEG's, GIF's en PNG-8's, so jy moet nog steeds oorweeg of jy regtig een wil gebruik.

Alhoewel PNG-24's duisende kleure toelaat terwyl hulle kompressie het, is dit nie bedoel om JPEG-beelde te vervang nie.'n Foto wat as 'n PNG-24 gestoor is, sal waarskynlik minstens 5 keer groter wees as die ekwivalente JPEG-beeld, met baie min verbetering in sigbare kwaliteit.(Natuurlik kan dit 'n wenslike uitkoms wees as jy nie bekommerd is oor lêergrootte nie en die beste kwaliteit beeld wil kry wat jy kan.)

Net soos PNG-8, ondersteun PNG-24 ook alfa-deursigtigheid.

Ek hoop dit help!

PNG moet gebruik word wanneer:

  • Jy benodig deursigtigheid (óf 1-bis of alfa deursigtigheid)
  • Verlieslose kompressie sal goed werk (soos vir 'n grafiek of logo, of rekenaargegenereerde beeld)

JPEG moet gebruik word wanneer:

  • Verlieslose kompressie sal nie goed werk nie (soos 'n foto)
  • Volkleur is nodig

GIF moet wees wanneer:

  • PNG is nie beskikbaar nie, soos op baie ou sagteware of blaaiers
  • Animasie is nodig

Ten spyte van mites van die teendeel, presteer PNG beter as GIF in die meeste aspekte.PNG is in staat om elke beeldmodus van GIF behalwe animasie, en wanneer dieselfde beeldmodus gebruik word, sal PNG beter kompressie hê as gevolg van sy superieure DEFLATE-algoritme in vergelyking met LZW.PNG is ook in staat tot bykomende modusse wat GIF nie kan doen nie, soos 24-bis-kleur en alfa-deursigtigheid, maar dit is waar jy probleme op die web kan ondervind.Alpha-deursigtigheid het verenigbaarheidsprobleme met IE6 wat goed gedokumenteer is (alhoewel hacks bestaan ​​om rond te kom).

PNG-modusse sluit in (dit is net 'n klein subset)

  • Paletkleur van 2 tot 256 kleure (soos GIF)
  • Paletkleur van 2 tot 256 kleure, met deursigtige kleur (soos GIF)
  • Ware kleur (24-bis kleur)
  • Ware kleur met alfakanaal (24 bis kleur + 8 bis alfa deursigtigheid)

Vir die beste kompressie in PNG vir die web, gebruik altyd 'n paletmodus.As jy vind dat PNG-lêers groter is as die ekwivalente GIF-lêers, stoor jy die PNG in 24-bis-kleur en die GIF in paletmodus (omdat 'n GIF altyd in paletmodus is).Probeer eers omskakel na paletmodus.

As jy vind dat jou PNG-lêers met deursigtigheid nie behoorlik in IE6 werk terwyl jou GIF-lêers wel werk nie, dan gebruik jy 24-bis kleur + alfa-deursigtigheid in PNG en paletmodus met 'n deursigtige kleur met GIF.Jy sal moet seker maak dat jy jou PNG omskakel in 'n paletkleurmodus met 'n deursigtige kleur.

PNG het ook ander modusse soos paletkleur met alfa-deursigtigheid in die palet.Modusse soos hierdie kan nie in Photoshop gebruik word nie.

Probeer om te kyk na hierdie webwerf http://www.killersites.com/articles_2005/theory/imagesInWebPages.jsp

Hulle probeer om te verduidelik wat om te gebruik wanneer

As jy die stoor of die aanbieding van 'n groot aantal beelde die nuwe Google WebP formaat mag wees die moeite werd oorweging as dit is 25% kleiner as PNG / JPG. Let wel dit is nie deur alle blaaiers op die oomblik. NB. Hierdie een is in 2010 na hierdie vraag is gepos.

JPEG LÊERFORMAAT

  1. Groot vir beelde wanneer jy dit nodig om die grootte klein
    2. hou
  2. Goeie opsie vir foto
  3. Bad vir logo's, lyn kuns, en groot dele van plat kleur

GIF LÊERFORMAAT

  1. Groot vir geanimeerde gevolge
  2. Nice opsie vir illustrasies, plat beelde, en beelde wat 'n minimale kleure en akkurate lyne gebruik
  3. Goeie opsie vir 'n eenvoudige logo met blokke van kleure

PNG LÊERFORMAAT

  1. Less
  2. Uitstekende keuse wanneer deursigtigheid is 'n moet
  3. Goeie opsie vir logo's en lyn kuns
  4. nie oral ondersteun

Jy kan dit computeranimatie vir meer inligting, Image sien Lêersoorte: Wanneer om te gebruik JPEG, GIF & PNG

Gelisensieer onder: CC-BY-SA met toeskrywing
Nie verbonde aan StackOverflow
scroll top