Cookies op Tweakers

Tweakers maakt gebruik van cookies, onder andere om de website te analyseren, het gebruiksgemak te vergroten en advertenties te tonen. Door gebruik te maken van deze website, of door op 'Ga verder' te klikken, geef je toestemming voor het gebruik van cookies. Je kunt ook een cookievrije versie van de website bezoeken met minder functionaliteit. Wil je meer informatie over cookies en hoe ze worden gebruikt, bekijk dan ons cookiebeleid.

Meer informatie

Door , , 115 reacties, 38.634 views •

Het afbeeldingsformaat png heeft de populariteit van 'concurrent' gif inmiddels ingehaald, zo blijkt uit onderzoek. Vooral in Europa, waaronder ook Nederland, is het afbeeldingsformaat populair. Het populairste formaat voor afbeeldingen blijft jpeg.

Langere tijd was het gif-afbeeldingsformaat populairder dan png, maar deze maand heeft png zijn 'concurrent' ingehaald. Dat blijkt uit onderzoek van W3Techs, dat websites geautomatiseerd analyseert op gebruikte technologieën. Png wordt nu gebruikt door 62,4 procent van de websites, terwijl 62,3 procent van de websites gif gebruikt. Bovendien blijft het marktaandeel van png stijgen, terwijl dat van gif daalt.

De populariteit van png verschilt per regio: vooral in Europa zou het formaat populair zijn. Zo ligt het 'marktaandeel' van het formaat in Nederland, Frankrijk, Italië en Spanje boven de 70 procent. In Azië ligt dat aandeel veel lager: zo gebruikt slechts een krappe 30 procent van de Chinese websites het formaat. Opvallend is verder dat png populairder is op webservers met Unix dan op Windows.

Png, voluit portable network graphics, is ooit ontwikkeld als alternatief voor gif, omdat dat laatste formaat last had van patentclaims. Daarnaast kampte gif, in 1987 geïntroduceerd door de Amerikaanse isp CompuServe, met een limiet van 256 kleuren. Png heeft ondersteuning voor lossless-compressie waarbij alle kleuren bovendien behouden blijven, al kan er ook worden gekozen voor een beperkter kleurenschema.

Net als gif ondersteunt png transparantie, wat het formaat aantrekkelijk maakt om in te zetten voor interface-elementen op websites. Overigens ondersteunde Internet Explorer tot versie 7 geen transparantie bij png-afbeeldingen, behalve als ontwikkelaars javascript-trucjes gebruikten. Dat heeft de doorbraak van png langere tijd tegengehouden. Png is niet op alle vlakken te vergelijken met gif: dat laatste formaat ondersteunt bewegende afbeeldingen, terwijl dat bij png niet het geval is. Er is wel een versie van png die animatie ondersteunt, maar die wordt door de meeste browsers niet ondersteund.

Het meestgebruikte formaat voor afbeeldingen blijft het fotoformaat jpeg, dat door 72,7 procent van de websites wordt ingezet. Dat aantal is al een jaar lang min of meer stabiel. Het bitmap-formaat is nauwelijks nog aanwezig op websites: slechts 0,6 procent van de websites gebruikt bmp. Svg en tiff worden gebruikt door minder dan 0,1 procent van de websites.

Populariteit gif en png

Reacties (115)

Reactiefilter:-11150113+182+212+30
Moderatie-faq Wijzig weergave
Ik gebruik eigenlijk uit automatisme vaak nog gif, maar inderdaad geen reden meer om geen png te gebruiken.

[Reactie gewijzigd door Michielgb op 1 februari 2013 12:24]

zelfs de grafiek is een png :P
Eindelijk al die jaren dat ik png door stuur en mensen vragen wat ze met een png moeten doen, heeft resultaat geboekt.
Mooie toevoeging van PNG is ook dat het semi transparantie ondersteund, iets dat bij GIF niet het geval is: http://www.cssbakery.com/...i-transparent-png_04.html
Png is niet op alle vlakken te vergelijken met gif: dat laatste formaat ondersteunt bewegende afbeeldingen, terwijl dat bij png niet het geval is. Dat heeft de doorbraak van png langere tijd tegengehouden.
Animated PNG bestaat zeker wel, echter is de ondersteuning hiervoor in browserland beperkt. Alleen Firefox (al sinds versie 3.0) en Opera ondersteunen dit, de overige browsers weigeren....

http://caniuse.com/apng
Gebruik ik de formaten als autodidactisch "website maker" toch niet verkeerd. Nooit de onderbouwing ervan uitgezocht. Maar door trial&error kom je vanzelf achter de verschillen.

Ik gebruik als uitgangspunt altijd .jpg
Tenzij het animated is, dan is het .gif
En wanneer er erg strakke lijnen in de afbeelding staan (knoppen met tekst e.d.) geeft .png de scherpste randen maar iets groter bestandsformaat.

Wat ik nog niet bewust wist is dat .png met semi-transparantie overweg kan. Kartelrandjes langs de overgangen naar transparantie gaven me dan ook altijd kopzorgen.

Weer een lesje geleerd
Same here.
Als webdesigner gebruik ik nagenoeg altijd .PNG (om achtergronden sneller te verwijderen en voor scherpe(re) randen). Vervolgens sla ik wel nagenoeg alles (in psd) op als jpg.

Heb ook nooit echt de achtergond van png bekeken. Thnx voor het artikel T.net !
Dat animatie niet goed wordt ondersteund is echt een gemis. Degenen die animatie afdoen als een gimmick missen een groter plaatje. Zoals de korte berichtjes van Twitter, zo zijn korte animaties echt een culturele vorm op zich aan het worden. Zie bijvoorbeeld:
  • de Lightt app, waarmee je snel gifjes kan maken met je smartphone camera.
  • Loopc.am, een soortgelijke app.
Er zijn ook eindeloos veel websites, teveel om te noemen, en zelfs tentoonstellingen over animated gifs.

[Reactie gewijzigd door unfold op 1 februari 2013 15:13]

Die voorbeelden van jou kunnen perfect worden geanimeerd met css of een framework als jquery. Ik ben blij dat we af zijn van die flashy sites van vroeger en de moderne strakke lijnen terugkomen die perfect weer te geven zijn middels png's.

Naar mijn inziens zijn er dus meer voorbeelden te noemen waar animatie geen gemis is ipv wel...
Het ligt een beetje aan wat je einddoel is, maar bij webdevelopment zal ik niet snel kiezen voor animatie via gif. Veels te veel beperkingen.

Dan heb ik liever het canvas element
Gif wordt toch vooral gebruikt voor bewegende beelden? En png als 'vervanger' voor jpg? Of heb ik het mis op?
Lees het artikel anders nog even ;)
Net als gif ondersteunt png transparantie, wat het formaat aantrekkelijk maakt om in te zetten voor interface-elementen op websites.
Er is meer dan alleen wat in dit artikel staat. Keek eens rond op google en zoek op animated gif.
En als je HK access hebt:
http://gathering.tweakers.net/forum/list_messages/1473761
GIF wordt gebruikt voor statische en bewegende beelden, maar ondersteunt transparantie niet goed.
JPG wordt gebruikt voor statische beelden, maar ondersteunt transparantie niet.
PNG wordt gebruikt voor statische beelden en ondersteunt transparantie, maar geen animatie.

Met deze informatie is te stellen dat PNG een alternatief is voor JPG en statische GIF. Het is gÚÚn alternatief voor ge-animeerde GIF. Overigens zijn 'vervanger' en 'concurrent' niet de juiste woorden, omdat het slechts om een alternatief gaat die net als zijn 'voorgangers', niet per definitie foutloos is. PNG is uitzonderlijk goed in transparantie en afbeeldingen met weinig detail door goede compressie, en bewaart afbeeldingen lossless, maar het gevolg is dat de bestanden veelal groter zijn dan JPG-bestanden.
Ideaal is:
JPEG - (natuurlijke) foto's
PNG - vervanging van gif, alles wat niet natuurlijk is. O.a. tekst, logo's, transparantie, etc.
GIF - animaties of als het aantal kleuren beperkt is. Simpele logo's met beperkte kleuren comprimeren namelijk in GIF vaak kleiner dan PNG.

Maar uiteraard zijn er vaak grensgebieden. Een natuurfoto met tekst bijvoorbeeld comprimeert slecht in PNG, maar met JPEG zie je soms rafels langs de tekst. Wat doe je dan? En wat doe je als je een animatie met vooral natuurlijke foto's maakt? Etc.

Feit is dat veel websites flink nog wat winst kunnen halen door eens wat vaker expliciet te kijken naar wat voor format men waar voor gebruikt.
GIF is voor bitmap afbeeldingen met max. 256 kleuren en is in staat om lossless te comprimeren (als je het terugbrengen van het aantal kleuren niet als een compressie mechanisme beschouwd) en biedt de mogelijkheid om een doorzichtige pixels te definiŰren. PNG is meer de opvolger van GIF, met ondersteuning voor veel meer kleuren, en het belangrijkste: meerdere niveaus van transparantie.

JPEG is meer geschikt voor fotomateriaal en comprimeert wel met verlies. Helaas biedt dit formaat geen ondersteuning voor transparantie.
Gif wordt nog steeds gebruikt voor statische afbeeldingen al is het een slechter formaat. Overigens bestaat er ook apng als vervanger voor bewegende gifs alleen ondersteunen alleen firefox en Opera het standaard.
JPG is uitstekend voor foto's (veel beter dan PNG)
PNG is uitstekend voor computergegeneerde beelden (bv. sprites, iconen, logo's, achtergrondafbeeldingen ...)
In principe is PNG een beter formaat voor foto's (lossless), maar zorgt dat het bestandsformaat veel groter wordt. Daarom is JPG (lossy) een populairdere keuze, ook mede omdat daardoor de interne ruisreductie van een camera daardoor makkelijker ingezet kan worden.

Eigenlijk is tegenwoordig met de enorme bestandsformaten JPG ook een heel erg achterhaalde standaard, maarja, JPG2000 is er nooit goed doorgekomen.
PNG is tevens een lossless formaat, dit betekend at er geen compressie plaatsvind bij het opslaan van afbeeldingen.
Lossless betekent verliesvrij, dus 100% herstelbare compressie
Nee, dat klopt niet. Er vind wÚl compressie plaats, maar dan lossless. Dat betekend dat het bestand kleiner wordt, zonder dat je dat aan de kwaliteit van de afbeelding merkt.
Nee, het betekent dat er geen data verloren gaat bij de compressie, niet dat er geen compressie wordt toegepast.
PNG is wel een formaat die compressie gebruikt. Alleen gaat er bij die compressie geen kwaliteit verloren, vandaar losless. JPEG daarentegen gebruikt lossy compressie. Dus iedere keer als je een JPEG (opnieuw) opslaat, gaat er kwaliteit verloren.
Dus iedere keer als je een JPEG (opnieuw) opslaat, gaat er kwaliteit verloren.
Onzin, een goede exporter zal bij een tweede keer opslaan exact hetzelfde resultaat geven. Het deteriorate vooral op het moment dat je ook aanpassingen gaat maken.

Je kunt een 8-bits getal in 7-bits encoderen door de onderste bit weg te gooien. Effectief gooi je daarmee alle oneven getallen weg, en hou je alleen even getallen over. Als je dat inleest en weer converteert naar 8-bits, dan heb je nog steeds even getallen. Pas je daarna dezelfde lossy compression toe, dan kun je gewoon weer komen op hetzelfde resultaat als eerst.
Onzin is het niet, Paint heeft dit jaren lang gedaan tot mijn verbazing. (al lange tijd geen Paint meer gebruikt dus ik kan er nu niets over zeggen)
Onzin, een goede exporter zal bij een tweede keer opslaan exact hetzelfde resultaat geven
Paint doet het in ieder geval niet (net even geprobeerd). Op het oog is niets te zien, maar software bedoeld om verschillen in foto's op te sporen tonen wel degelijk verschillen. Vooral in gradienten zitten verschillen.

De meeste programma's werken de comprimeerde jpeg's weer om naar losse pixels. Naderhand wordt opnieuw gekeken wat te comprimeren is.
Het volgende voorbeeld klopt niet helemaal, maar maakt wel het probleem duidelijk:
Origineel (pixels): 10 30 50 70 100
Jpeg compressie geeft: :12 25 65 99 als file
Dit inlezen geeft als pixels: 12 25 65 65 99
Jpeg compressie geeft: 12 26 65 98 als file
Dat is geen onzin. Een JPEG exporteren, oppakken en weer exporteren zal in bijna ieder grafisch programma leiden tot een kwaliteitverslechtering. Dit is zelfs waar voor command line convertors. Het probleem is dus gemeengoed, en daarmee allesbehalve onzin.
Het is gewoon een wiskundig probleem - het idee van lossy compressie is dat je het aantal mogelijkheden sterk terugbrengt. Hierdoor is niet alles te encoderen op zo'n manier dat je het origineel letterlijk terugkrijgt. Maar wat je in ieder geval wÚl kunt stellen, is dat iets dat al gecomprimeerd is weldegelijk letterlijk op die manier weer te comprimeren valt. Dat het bij veel converters in de praktijk wel gebeurt maakt het nog geen vaststaand feit dat het een inherent probleem van JPG is dat het bij elke compressie weer slechter wordt.

De stelling "iedere keer als je een JPEG (opnieuw) opslaat, gaat er kwaliteit verloren" is daarmee onzin, en dat is wiskundig aantoonbaar.

[Reactie gewijzigd door .oisyn op 2 februari 2013 02:19]

Ik ben een dyslectisch maar dit kan volgens mij niet kloppen:
"Png wordt nu gebruikt door 62,4 procent van de websites, terwijl 62,3 procent van de websites gif gebruikt."
Dus gezamenlijk 124.7% ?? Ik snap der even niets van.

Daarnaast vraag ik me af wat nietswetende consumenten (zoals ik in feite) nou merk van deze overgang? Heeft het gebruik van .png na/voordelen bij het opzetten van een site t.o.v. .gif ?
Je gaat er daarbij van uit dat een website alleen maar PNG of alleen maar GIF gebruikt. De statistieken geven aan dat daar dus overlap in zit. Zo'n lollige animated GIF pagina zal inderdaad propvol GIFjes staan, maar sta er niets van te kijken dat de logo's van de site zelf gewoon in PNG formaat opgeslagen zijn.
Website A gebruikt png en gif.
Website B gebruikt png maar geen gif.
===> 100 % van deze twee websites gebruikt png en 50 % gebruikt gif
Ik denk dat veel website verschillende formaten gebruiken.

Op dit item kan niet meer gereageerd worden.



LG G4 Battlefield Hardline Samsung Galaxy S6 Edge Microsoft Windows 10 Samsung Galaxy S6 HTC One (M9) Grand Theft Auto V Apple iPad Air 2

© 1998 - 2015 de Persgroep Online Services B.V. Tweakers vormt samen met o.a. Autotrack en Carsom.nl de Persgroep Online Services B.V. Hosting door True