{"id":66944,"date":"2017-08-08T05:00:58","date_gmt":"2017-08-08T03:00:58","guid":{"rendered":"https:\/\/spotler.com\/blog\/png-jpg-of-gif-welk-bestandstype-gebruik-wanneer"},"modified":"2024-12-10T13:45:07","modified_gmt":"2024-12-10T12:45:07","slug":"png-jpg-of-gif-welk-bestandstype-gebruik-wanneer","status":"publish","type":"blog","link":"https:\/\/spotler.com\/nl-nl\/blog\/png-jpg-of-gif-welk-bestandstype-gebruik-wanneer","title":{"rendered":"Png, jpg of gif: welk bestandstype gebruik je wanneer?"},"content":{"rendered":"<p><strong>Als (e-mail) marketeer ben je vast wel eens tegen deze vraag aangelopen: \u201cWelk type afbeelding kan ik het beste gebruiken voor web en e-mail? Kies ik nu voor een png, jpg of gif?\u201d Daar is geen simpel antwoord op te geven. De verschillende afbeeldingtypes hebben allemaal voor- en nadelen.&nbsp;Het is goed om je af te vragen wat het doel of de functie van de afbeelding is. Wordt de afbeelding gebruikt voor een headerfoto, als button of als een speciale bullet van een opsomming? Verschillende functies vereisen verschillende oplossingen. Dus laten we eens kijken of we je met dit blog kunnen helpen met de keuze tussen png, jpg of gif.<\/strong><\/p>\n<h2 class=\"wp-block-heading\" id=\"h-png\">Png<\/h2>\n<p>Halverwege de jaren negentig kwam er meer behoefte aan een verbeterde versie van gif. Men wilde de beste opties van gif en jpg combineren. Echter het patent van gif lag bij&nbsp; CompuServe. Uiteindelijk is er voor gekozen om een heel nieuw bestandsformaat te introduceren: png (Portable Network Graphic).<\/p>\n<h3 class=\"wp-block-heading\" id=\"h-png-8\"><span class=\"has-inline-color has-blue-color\">Png-8<\/span><\/h3>\n<p>De eerste versie van png (png-8) lijkt heel erg op gif. Het gebruikt 256 kleuren en 1-bit transparantie (dat betekent dat 1 pixel uit het kleurenspectrum opgeofferd wordt om transparant te zijn). Later is er een tweede versie van png gekomen (png-24).<\/p>\n<h3 class=\"wp-block-heading\" id=\"h-png-24\"><span class=\"has-inline-color has-blue-color\">Png-24<\/span><\/h3>\n<p>Deze gebruikt 24-bit kleuren vergelijkbaar met jpg en kan miljoenen kleuren tonen. Het gebruikt \u2018lossless\u2019-compressie, dus er is geen kwaliteitsverlies. Een van de grote voordelen van png is dat het alpha-kanalen ondersteund. Met zo\u2019n alpha-kanaal kun je transparantie gebruiken. Alles tussen 0% tot 100% transparant is mogelijk. Niet zoals bij gif (of png-8) 0% \u00f3f 100% transparant. De transparante overgang kan dus veel geleidelijker gemaakt worden. Er zijn nog wel een aantal oude browsers die alpha kanalen niet kunnen tonen en om die reden het png-formaat niet ondersteunen.<\/p>\n<h3 class=\"wp-block-heading\" id=\"h-png-gebruik-je-het-beste-voor\"><span class=\"has-inline-color has-blue-color\">Png gebruik je het beste voor:<\/span><\/h3>\n<ul class=\"wp-block-list\">\n<li>afbeeldingen met veel kleuren<\/li>\n<li>(een kleurverloop naar) transparantie<\/li>\n<li>afbeeldingen waarbij de bestandsgrootte geen probleem is<\/li>\n<\/ul>\n<h2 class=\"wp-block-heading\" id=\"h-jpg\">JPG<\/h2>\n<p>Jpg (of soms ook jpeg) staat voor \u2018Joint Photographic Experts Group\u2019. Dit formaat is uitermate geschikt voor fotografisch materiaal met veel kleuren. Het gebruikt een complex wiskundig algoritme om compressie toe te passen. Meestal is een compressie van 60% &#8211; 75% optimaal voor het gebruik in mail of web. Dit formaat kun je het beste gebruiken als bestandsgrootte belangrijker is dan de kwaliteit van de afbeelding. Het menselijke oog kan niet zo goed kleur zien. Het is veel beter in het zien van contrast. Dat is de reden dat jpg kleurinformatie opoffert om de bestandsgrootte te verkleinen.<\/p>\n<p>Dit soort compressie heet in het Engels \u2018lossy compression\u2019 (\u2018lossy\u2019 komt van \u2018lost data\u2019). Jpg kan miljoenen kleuren laten zien en maakt gebruik van 16-bit data. Het is het standaard formaat van de meeste digitale camera\u2019s.<\/p>\n<h3 class=\"wp-block-heading\" id=\"h-jpg-gebruik-je-het-beste-voor\"><span class=\"has-inline-color has-blue-color\">JPG gebruik je het beste voor:<\/span><\/h3>\n<ul class=\"wp-block-list\">\n<li>standaard kleurenfoto\u2019s<\/li>\n<li>afbeeldingen met veel verschillende kleuren<\/li>\n<li>afbeeldingen met veel lichte en donkere delen<\/li>\n<\/ul>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/spotler.com\/wp-content\/uploads\/2024\/05\/jpg-compressie-voorbeeld.jpg\" alt=\"jpg-compressie-voorbeeld\" class=\"wp-image-25047\"\/><\/figure>\n<\/div>\n<p class=\"has-text-align-center\"><em>Voorbeeld van een jpg met veel compressie<\/em><\/p>\n<h2 class=\"wp-block-heading\" id=\"h-gif\">Gif<\/h2>\n<p>Over de juiste uitspraak van deze bestandsextensie is op internet een hevige discussie. De bedenker van dit formaat, Steve Wilhite, zegt dat je het uit moet spreken als \u2018jif\u2019. Gif (of \u2018jif\u2019) staat voor Graphics Interchange Format en is bedacht bij het bedrijf CompuServe in 1987. Zij wilden de mogelijkheid hebben om afbeeldingen snel over langzame verbindingen te kunnen sturen. Dit hebben ze voor elkaar gekregen door de afbeeldingen te reduceren tot maximaal 256 kleuren (in plaats van miljoenen kleuren zoals bij jpg). Minder kleuren betekent een kleinere bestandsgrootte.<\/p>\n<p>In tegenstelling tot jpg wordt er gebruik gemaakt van \u2018lossless\u2019-compressie. Er is dus geen dataverlies bij het comprimeren. Gif heeft nog een aantal voordelen. Je kunt er animaties mee maken. Het ondersteunt transparantie (maar geen semi-transparantie). En het heeft de mogelijkheid om \u2018interlaced\u2019 een afbeelding te laden. Bij de laatste wordt er eerst een lage kwaliteit afbeelding getoond en komt er geleidelijk steeds meer informatie bij totdat het de hoogste kwaliteit heeft bereikt. Het maakt gebruik van \u2018dithering\u2019. Dat betekent dat het twee pixels met een verschillende kleur combineert tot een kleur. Op die manier wordt het aantal kleuren gereduceerd.<\/p>\n<p>Het gif-formaat kun je het beste gebruiken voor afbeeldingen met weinig kleuren (bijvoorbeeld logo\u2019s of iconen), animaties en eenvoudige afbeeldingen waar al weinig kleur in zit zoals lijntekeningen.<\/p>\n<h3 class=\"wp-block-heading\" id=\"h-gif-gebruik-je-het-beste-voor\"><span class=\"has-inline-color has-blue-color\">Gif gebruik je het beste voor:<\/span><\/h3>\n<ul class=\"wp-block-list\">\n<li>afbeeldingen met weinig kleuren zoals logo\u2019s of iconen<\/li>\n<li>animaties<\/li>\n<li>eenvoudige afbeeldingen waar al weinig kleur in zit zoals lijntekeningen<\/li>\n<\/ul>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/spotler.com\/wp-content\/uploads\/2024\/05\/gif-voorbeeld.gif\" alt=\"gif-voorbeeld\" class=\"wp-image-25048\"\/><\/figure>\n<\/div>\n<p class=\"has-text-align-center\"><em>Voorbeeld van een foto bewaard als gif. Jpg zou in dit geval een betere keuze zijn<\/em><\/p>\n<p>Wil je meer weten over de designelementen gif, lees dan het blog <a href=\"https:\/\/spotler.nl\/blog\/animated-gif-in-e-mail-design\" target=\"_blank\" rel=\"noopener\">Animated gif in e-mail design<\/a>.<\/p>\n<h2 class=\"wp-block-heading\" id=\"h-wat-is-de-beste-keuze-png-jpg-of-gif\">Wat is de beste keuze: png, jpg of gif?<\/h2>\n<p>Deze drie formaten worden het meest gebruikt op het internet en in e-mail. Het is belangrijk om je af te vragen welke de juiste is voor het doel dat je voor ogen hebt. Zeker voor e-mail is bestandsgrootte een belangrijke factor. En hoe meer data, hoe duurder het voor de ontvanger kan worden (als ze de mail bijvoorbeeld op een mobiele telefoon lezen).<\/p>\n<h3 class=\"wp-block-heading\" id=\"h-keuzeschema-png-jpg-of-gif\"><span class=\"has-inline-color has-blue-color\">Keuzeschema png, jpg of gif<\/span><\/h3>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/spotler.com\/wp-content\/uploads\/2024\/05\/schema-png-jpg-of-gif.gif\" alt=\"schema png, jpg of gif\" class=\"wp-image-25051\"\/><\/figure>\n<\/div>\n<h2 class=\"wp-block-heading\" id=\"h-download-white-paper-design-in-e-mail-marketing\">Download white paper Design in e-mail marketing<\/h2>\n<p>De keuze voor een png, jpg of gif is slechts \u00e9\u00e9n van de aspecten die een rol spelen bij design in e-mail marketing. Zo kun je in het design ook werken met een uitklapmenu of met verschillende calls-to-action of een dynamische footer en nog wel 20 andere aspecten. Wil je meer weten over design in e-mail marketing? Download dan ons white paper <a href=\"https:\/\/spotler.com\/nl-nl\/whitepapers\/design-in-emailmarketing\">Design in e-mail marketing<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Handig en praktisch blog dat inzicht geeft in wanneer je het best een png, jpg of gif kunt inzetten voor o.a. e-mail marketingdoeleinden.<\/p>\n","protected":false},"author":33,"featured_media":73030,"template":"","cat_industry":[],"cat_topic":[1000],"class_list":["post-66944","blog","type-blog","status-publish","has-post-thumbnail","hentry","cat_topic-email-marketing-nl-nl"],"acf":[],"_links":{"self":[{"href":"https:\/\/spotler.com\/nl-nl\/wp-json\/wp\/v2\/blog\/66944","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/spotler.com\/nl-nl\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/spotler.com\/nl-nl\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/spotler.com\/nl-nl\/wp-json\/wp\/v2\/users\/33"}],"version-history":[{"count":2,"href":"https:\/\/spotler.com\/nl-nl\/wp-json\/wp\/v2\/blog\/66944\/revisions"}],"predecessor-version":[{"id":73037,"href":"https:\/\/spotler.com\/nl-nl\/wp-json\/wp\/v2\/blog\/66944\/revisions\/73037"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/spotler.com\/nl-nl\/wp-json\/wp\/v2\/media\/73030"}],"wp:attachment":[{"href":"https:\/\/spotler.com\/nl-nl\/wp-json\/wp\/v2\/media?parent=66944"}],"wp:term":[{"taxonomy":"cat_industry","embeddable":true,"href":"https:\/\/spotler.com\/nl-nl\/wp-json\/wp\/v2\/cat_industry?post=66944"},{"taxonomy":"cat_topic","embeddable":true,"href":"https:\/\/spotler.com\/nl-nl\/wp-json\/wp\/v2\/cat_topic?post=66944"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}