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 , , reacties: 115, views: 38.354 •

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
PNG ondersteunt helaas geen animatie, maar het onofficiŽle APNG wel. Helaas werkt dit enkel in Gecko-based (Firefox, Seamonkey) browsers of Opera.
Welk formaat je gebruikt hangt af van de toepassing ervan:
- jpeg, gebruik je best voor foto's, zoals in het artikel wordt aangehaald kampt gif met een max van 256 kleuren en een png is meestal zwaarder, geeft een grotere bestandsgrootte.

- gif, gebruik je voor elementen die in design een beperkt aantal kleuren hebben. Gif geeft voor zo'n elementen meestal een kleinere bestandsgrootte. ook voor elementen die transparantie nodig hebben, maar een simpele edge hebben( een simpel vierkant bijvoorbeeld ) is dit een uitermate geschikt formaat.

- png, probeer ik zo weinig mogelijk te gebruiken, omdat deze qua bestandsgrootte meestal hoger uitvalt dan de gif of jpeg tegenhangers. best enkel te gebruiken als je een "ingewikkelde" transparante image hebt. (Ondersteuning op IE valt hiervoor nog steeds tegen, zelfs op ie8 geeft dit soms problemen als je dit combineert met een css-opacity property)
Alleen bij hele kleine icoontjes is gif soms ietsje kleiner dan png, maar je praat dan hooguit over enkele tientallen bytes. Wij gebruiken een aantal tools om de statische plaatjes en icoontjes voor onze site te optimaliseren qua filesize en over het algemeen blijkt dat omzetten naar png de beste resultaten geeft. Dat is nu dus ook het standaard formaat voor de meeste van onze plaatjes (al zal je hier en daar nog wel eens een gifje tegenkomen) :)
PNG comprimeert beter dan GIF. Dat betekent dat PNG8 bestanden (256 kleuren, net als GIF) kleiner zullen zijn dan GIF bestanden. Geen reden om GIF te gebruiken dus. Behalve misschien animated GIF vanwege gebrekkige ondersteuning voor animated PNG.

Heb je een full colour PNG bestand met alpha transparency en wil je er PNG8 van maken? Probeer het dan eens door TinyPNG te halen. Scheelt vaak de helft van de bestandsgrootte.

[Reactie gewijzigd door molf op 1 februari 2013 12:31]

Gif heeft een ja nee transparantie. Daardoor is het met moderne website ontwerpen steeds minder bruikbaar. Zoals je zegt, zolang het een simpele figuur is met harde randen zoals een vierkant (zonder ronde hoeken) en zolang de inhoud niet meer dan 256 kleuren bevat, dan kan de keus op Gif vallen. In de praktijk merk ik dat ik dan alsnog eerder kies voor een PNG. Zet de kleuren lager en je hebt ongeveer dezelfde compressie.

PNG is juist enorm veel te gebruiken. Zodra een afbeelding transparant is dan is mijn keus PNG. Vooral bij logo's is dit erg handig. De bestandsgrootte kan enorm kleiner als je de juiste selectie maakt bij het exporteren van de PNG. In Photoshop kan je hier goed mee spelen in de save for web dialoog.

Als het plaatje geen transparante pixels bevat kan de keus nog steeds vallen op PNG. Je moet hier vooral kijken wat voor soort plaatje het is. PNG is namelijk erg goed in het comprimeren van grote vlakken met dezelfde kleur, plaatjes zoals de grafiek in de nieuws post worden vaak kleiner met een goede PNG compressie dan een JPEG.

JPEG is vooral goed voor foto's omdat deze veel verschillende pixels bevatten. JPEG heeft het nadeel dat het wel wat kwaliteit verliest, dit komt terug in de vorm van ruis. Bij foto's valt de ruis niet erg op en daardoor meestal de beste keus voor foto's.
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]

Png is ooit ontstaan om een alternatief te bieden voor Gif vanwege de patentgelden die Unisys (eigenaar van het patent op het door Gif gebruikte LZW-algoritme) in de eerste helft van de jaren 90 begon te heffen. Het grappige is dat alle betreffende patenten inmiddels zijn vervallen en men Gif weer gewoon gratis kan gebruiken. Zie http://en.wikipedia.org/w...nd_LZW_patent_enforcement

Wat dat betreft zou je kunnen stellen dat Png zijn noodzaak heeft overleefd. Blijkbaar heeft het zijn nut inmiddels echt bewezen.
Jammer dat png files alleen zo groot zijn, echt goede compressie zit er niet op.
Jammer dat png files alleen zo groot zijn, echt goede compressie zit er niet op.
Dat valt best mee.PNGs hoeven niet heel groot te zijn, als je het maar op de juiste manier gebruikt. Fullcolor foto's moet je niet in PNG opslaan, dat wordt veel te groot. Maar daar is JPG voor.
Exact. Als je geen gebruik maakt van variabele transparantie, waar PNG dus groot mee geworden is, dan gebruik je gewoon PNG8. Net zo efficiŽnt met geÔndexeerde kleuren als GIF, misschien nog wel efficiŽnter.
Dat ligt heel erg aan de afbeelding.

Neem een standaard compressie algoritme als ZIP. Werkt een stuk beter op plain text en bijvoorbeeld op een jpeg foto. De meeste compressie algoritmes zoeken naar herhalende patronen in de bron. Simpele tekst heeft een hogere mate van herhaling dan een foto.

Maak een simpele zwart/wit afbeelding van 1024 by 1024 en teken daarin een grote cirkel. Sla het bestand vervolgens op in bmp zodat je weet wat de grote in 'raw' formaat is. Resize nu een foto naar 1024 x 1024 en sla deze ook op als een bmp. Je zult zien dat de bitmaps even groot zijn.

Echter als je de twee afbeeldingen vervolgens opslaat als png zul je zien dat de simpele afbeelding een veel betere compressie krijgt dan de foto in png formaat..
Ik zie ongeveer 70% meer png files op mijn gratis image host in verhouding tot vorige jaar: http://imgup.nl/ (host ongeveer 14000 files nu) en kan dus bevestigen dat deze trend klopt.

Heeft waarschijnlijk ook te maken met nieuwe OS versies welke standaard in PNG opslaan.

[Reactie gewijzigd door Workaholic op 1 februari 2013 12:46]

Misschien een beetje offtopic, maar ik krijg bij het selecteer-scherm voor een afbeelding wel een hele lelijke scroll-bar in Chrome. Misschien moet je nog even je CSS in duiken. ;)
Die animaties die in GIF mogelijk zijn ... wat is daar nu een zinnige toepassing voor? Filmpjes van katten en vallende mensen zeker? |:(
@Cameleon73

Kijk effe naar jouw bewegende smiley. Dat is een typisch voorbeeld van voordeel van gif boven png en jpg.
Ik heb weinig geen verstand van websites, dus ik kan het mis hebben :)

[Reactie gewijzigd door vinnixx op 1 februari 2013 12:55]

Je hebt het goed :) En wat een prachtige vorm van ironie.
Euhmmm.... inderdaad; driewerf |:(
Leuk, zo'n populariteits onderzoek maar het is een kwestie van per afbeelding bepalen hoe of wat.

Semi-transparantie nodig? -> PNG
Weinig kleuren in de afbeelding, hooguit 'hele' transparantie nodig en als hij dan ook daadwerkelijk kleiner is -> GIF
Foto materiaal zonder transparantie? -> JPG

Er zijn nog een aantal specifieke optimalisaties die je kunt doen, maar dat zal maar door een heel klein percentage van de developers gebruikt worden aangezien de winstmarge minimaal is. (Voorbeeld: JPG optimalisatie)

Artikel komt voor mij nogal kort door de bocht over.
PNG JPG en GIF zijn niet directe concurrenten, ieder zijn eigen functie waar ze beter in zijn
PNG voor plaatjes (website elementen, plaatjes die lossness compressie gebruiken )
JPG voor afbeeldingen ( foto's, afbeeldingen met compressie om de grote van bestanden te beperken enz.)

en GIF voor annimaties

ben eerder benieuwd naar het slecht gebruik van de formaten
Wat mij vooral opviel uit het bericht was dat maar liefst 0.6% van de sites bmp gebruikt. Bmp is helemaal nergens goed in.
Iedereen die bmp gebruikt voor sites (of eigenlijk voor ieder ander doel, maar dat terzijde), zou eigenlijk een develop-verbod moeten krijgen. Dat zijn waarschijnlijk dezelfde lui als degenen die hun site alleen in IE testen.
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]

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
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...

Op dit item kan niet meer gereageerd worden.



Populair:Apple iPhone 6Samsung Galaxy Note 4Apple iPad Air 2FIFA 15Motorola Nexus 6Call of Duty: Advanced WarfareApple WatchWorld of Warcraft: Warlords of Draenor, PC (Windows)Microsoft Xbox One 500GBTablets

© 1998 - 2014 Tweakers.net B.V. Tweakers is onderdeel van De Persgroep en partner van Computable, Autotrack en Carsom.nl Hosting door True

Beste nieuwssite en prijsvergelijker van het jaar 2013