Helaas snappen veel websitebeheerders nog altijd niet welke bestandstypen ze moeten kiezen voor hun afbeeldingen en dat het ideale type verschilt per use case. Het resultaat? Hun website wordt langzamer<\/a> omdat de afbeeldingen niet in het beste format geleverd worden \u00e9n niet geoptimaliseerd zijn.<\/p>\n In dit artikel zullen we het hebben over de belangrijkste bestandstypen voor afbeeldingen en wanneer je welk type moet gebruiken om je bezoekers de best mogelijke user experience te bieden.<\/p>\n Bestandstypen en -formats voor afbeelding zijn te verdelen in twee hoofdsoorten: raster afbeeldingstypen en vector afbeeldingstypen.<\/p>\n Laten we elke soort beter bekijken.<\/p>\n De meest gebruikelijk afbeeldingstypen op het web (JPEG, GIF en PNG<\/a>) vallen allemaal in de categorie raster afbeeldingen (grid).<\/p>\n Een raster afbeeldingsbestand laat statische afbeeldingen zien waarbij elke pixel een bepaalde kleur, positie en grootte heeft op basis van de resolutie (bijvoorbeeld 1280×720).<\/p>\n Aangezien ze statisch zijn, kan je de afmetingen niet eenvoudig veranderen, aangezien je daarmee gewoon het originele ontwerp oprekt om de extra ruimte op te vullen. Hierdoor kan het resultaat een vage, pixelige of vertekende afbeelding zijn.<\/p>\n De overgrote meerderheid van de foto’s en afbeeldingen die je op internet ziet gebruiken een raster format.<\/p>\n SVG<\/a>, EPS, AI en PDF<\/a> zijn allemaal voorbeeld van vector afbeeldingstypen.<\/p>\n Anders dan bij de statische raster afbeeldingen, waarbij elke pixel een vaste plek en kleur heeft, zijn vector formats flexibeler.<\/p>\n Vectorafbeeldingen gebruiken een systeem van lijnen en bogen op een Cartesisch vlak, waarbij ze geschaald worden in verhouding tot het totale oppervlak van de afbeelding.<\/p>\n Dit betekent dat je de originele afbeelding tot in het oneindige zou kunnen vergroten zonder dat je kwaliteitsverlies of vertekeningen krijgt.<\/p>\n Zoals je kan zien is het verschil, wanneer je 7x vergroot, niet te vergelijken.<\/p>\n Aangezien de SVG afbeelding de posities berekent op basis van een percentage van de totale oppervlakte in plaats van op een vast aantal pixels, wordt de afbeelding niet korrelig.<\/p>\n\n Hieronder zullen we alle belangrijke bestandstypen voor grafische bestanden bespreken, van raster webafbeeldingen, vectors, tot bestanden voor grafische software.<\/p>\n We duiken in de details en zullen de voor- en nadelen bespreken, de ondersteuning door browsers en besturingssystemen, en de ideale use case voor elk format.<\/p>\n JPEG (of JPG)<\/a>\u00a0is een raster afbeeldingstype met lossy compressie<\/a> waardoor het erg geschikt is om afbeeldingen te delen. Dat JPEGs “lossy” zijn betekent dat de bestandsgrootte minder is, maar de kwaliteit ook.<\/p>\n JPEG is nog altijd \u00e9\u00e9n van de meest gebruikte afbeeldingstypen die je online kan vinden, vanwege de compressie en de nagenoeg universele ondersteuning door zowel browsers als besturingssystemen.<\/p>\n De meeste socialmediaplatforms<\/a> (bijvoorbeeld Facebook en Instagram) zetten afbeeldingen automatisch om naar JPEG. Ook gebruiken ze allemaal hun eigen afmetingen voor social media<\/a> om de resolutie van je foto’s te beheren.<\/p>\n PNG is een raster afbeelingsformat dat “lossless” compressie ondersteunt, waarbij het detail en kleurcontrast behouden blijft.<\/p>\n PNG biedt vooral een veel betere leesbaarheid van tekst dan bijvoorbeeld JPEG.<\/p>\n Hierdoor is PNG een populaire keuze voor infographics, banners<\/a>, screenshots en andere graphics waar zowel afbeeldingen als tekst in zitten.<\/p>\n De GIF valt ook in de categorie raster formats. Het gebruikt “lossless” compressie maar beperkt de afbeelding tot 8 bits per pixel en een minder uitgebreid palet van 256 kleuren.<\/p>\n Het GIF format<\/a> is vooral bekend door (en gebruikt voor) geanimeerde afbeeldingen vanwege de 8-bits beperking waardoor de bestandsgrootte beperkt blijft, ideaal voor online gebruik dus.<\/p>\n WebP is een afbeeldingsformat dat speciaal ontwikkeld is om betere “lossless” en “lossy” compressie van afbeeldingen te bieden.<\/p>\n Door over te gaan van zowel JPEG als PNG naar WebP kan je fors besparen op je opslagruimte op de server<\/a> en gebruikt van bandbreedte, doordat WebP 35% kleinere bestanden gebruikt voor dezelfde kwaliteit.<\/p>\n Een format dat zeker niet mag missen in deze gids is TIFF.<\/p>\n TIFF, de afkorting van Tagged Image File Format, is een raster afbeeldingsformat die vooral gebruikt wordt voor het opslaan en bewerken van afbeeldingen die later geprint gaan worden.<\/p>\n Hoewel het lossy-compressie ondersteunt, wordt het meestal gebruikt als een lossless afbeeldingsindeling. Bovendien gebruiken de meeste professionele grafische applicaties die TIFF ondersteunen (Photoshop, Illustrator, etc.) geen compressie. Het is dus gebruikelijk dat TIFF afbeeldingen een grotere bestandsgrootte hebben.<\/p>\n Bitmap (BMP) is een vrij ouderwets bestandsformat dat individuele pixels opslaat, nagenoeg zonder compressie. Dat betekent dat BMP bestanden snel groot worden en dus onhandig zijn om op te slaan of te verplaatsen.<\/p>\n HEIF, de afkorting van High Efficiency Image File, is een afbeeldingstype dat ontwikkeld is door het team achter het MPEG video format<\/a> als directe concurrent voor JPEG.<\/p>\n In theorie is de compressie twee keer zo effici\u00ebnt als JPEG, waardoor een afbeelding met dezelfde bestandsgrootte twee keer zo goede kwaliteit kan bieden.<\/p>\n Het is een raster afbeeldingstype op basis van pixel mapping, dus je kan afbeeldingen niet vergroten zonder kwaliteit te verliezen.<\/p>\n Het bestandsformat Scalable Vector Graphics, kortweg SVG, is ontwikkeld door W3C als markup taal om tweedimensionale afbeeldingen direct in de browser weer te kunnen geven.<\/p>\n Het is niet gebaseerd op pixels, zoals de rasterformats, maar gebruikt XML tekst om vormen en lijnen te bepalen, op een soortgelijke manier als wiskundige formules een grafieklijn bepalen.<\/p>\n Hierdoor kan je SVG bestanden oneindig vergroten zonder kwaliteit te verliezen.<\/p>\n Kort gezegd is een EPS-bestand, oftewel een Encapsulated PostScript, een vector afbeelding voor het opslaan van illustraties in Adobe Illustrator en soortgelijke illustratiesoftware, zoals CorelDraw.<\/p>\n Net zoals SVG bestanden is EPS eigenlijk een tekstgebaseerd document vormen en lijnen definieert op basis van code, in plaats van pixels en kleuren op een bepaalde positie op te slaan. Daardoor ondersteunen EPS bestanden ook voor vergroting zonder kwaliteitsverlies.<\/p>\n Je zal PDF waarschijnlijk vooral associ\u00ebren met het opslaan en lezen van tekstdocumenten. Dat is goed te begrijpen, aangezien het nota bene “document” in de naam heeft.<\/p>\n Maar PDF bestanden zijn eigenlijk gebaseerd op dezelfde PostScript taal als EPS vector afbeeldingen, en kan dan ook net zo gebruikt worden om afbeeldingen en illustraties op te slaan.<\/p>\n Het is daardoor een ideaal format voor het opslaan van illustraties, de omslag van een magazine, of alles wat later nog geprint moet worden. Het is ook onze favoriet voor onze Kinsta e-books<\/a>.<\/p>\n Zoals de naam doet vermoeden is het PSD bestandsformat vooral te gebruikt voor het opslaan van afbeeldingen in Adobe Photoshop.<\/p>\n Het is een web-safe afbeeldingstype<\/strong>, en wordt dus niet ondersteund door browsers of standaard afbeeldingsviewers.<\/p>\n AI is ook een speciaal afbeeldingsformat dat ontwikkeld is om niet alleen de afbeelding op te slaan, maar de hele status van een project.<\/p>\n Net als PSD, is het niet bedoeld om online te gebruiken<\/strong> en wordt dan ook niet ondersteund door browsers of standaard afbeeldingsviewers.<\/p>\n Anders dan bij PSD bestanden kan je AI bestanden vergroten zonder kwaliteitsverlies.<\/p>\n XCF, oftewel eXperimental Computing Facility, is een bestandstype dat hoort bij de open source afbeeldingseditor GIMP<\/a>. Het is dus het equivalent van PSD bestanden en slaat ook paden, doorzichtigheid, filters en meer op.<\/p>\n Ook hierbij geldt dat het een specifiek bestandstype is voor het opslaan van projecten, en het wordt dus niet ondersteund door browsers<\/strong> of standaard afbeeldingsviewers.<\/p>\n INDD is een bestandstype van Adobe InDesign waarmee je projecten kan opslaan, zoals de content van een pagina, stijlen, modellen en nog meer.<\/p>\n Alhoewel het soms een afbeeldingsbestandstype wordt genoemd, wordt er meestal alleen gelinkt naar visuele elementen.<\/p>\n Het wordt niet ondersteund door browsers en afbeeldingsviewers, aangezien het geen web-safe format is<\/strong>.<\/p>\n “Raw” bestandsformats, oftewel de ruwe bestandstypen, zijn de bestandstypen die een digitale camera gebruikt om volledig foto’s op te slaan op de originele kwaliteit, voor latere bewerking.<\/p>\n De grootste raw afbeeldingstypen per cameramerk:<\/p>\n In plaats van de 256 tinten per kleurkanaal (8 bit) die beschikbaar zijn in een JPEG bestand, bieden RAW bestanden tot 16.384 tinten per kleurkanaal (14 bit) in \u00e9\u00e9n foto. Dat geeft je meer flexibiliteit bij het aanpassen van kleuren en contrast tijdens de nabewerking.<\/p>\n Raw afbeeldingen zijn niet bedoeld voor het web<\/strong> of \u00fcberhaupt om te delen, en worden dan ook niet ondersteund door grote browsers of afbeeldingsviewers.<\/p>\n Op basis van data over internetgebruik, zijn de drie meest gebruikte bestandstypen PNG, JPEG en SVG.<\/p>\n Laten we kijken wat ze precies zo populair maakt.<\/p>\n Doordat PNG als format het meest geschikt is voor tekst binnen afbeeldingen, wordt dit vaker gebruikt voor screenshots, banners (afhankelijk van de maat van de banner<\/a>) en dergelijke.<\/p>\n Doordat het “lossless” compressie bevat, wordt het ook veel door ontwerpers en fotografen gebruikt om afbeeldingen van hoge kwaliteit te tonen op bijvoorbeeld portfolio websites<\/a>.<\/p>\n Deze twee factoren, samen met de algehele ondersteuning door browsers en besturingssystemen, maken het tot het meest populaire afbeeldingstype op het web. Zo zijn PNG’s te vinden op een indrukwekkende 77% van de websites.<\/p>\n De “lossy” compressie betekent dat JPEG een betere optie is om afbeeldingen in je content te laten zien. Dit kwaliteitsverlies zal de gemiddelde internetgebruiker echt niet opvallen, en je kan wel fors besparen op opslagruimte en bandbreedte.<\/p>\n Daardoor is het de tweede qua populariteit, en wordt door bijna 72% van de websites gebruikt. Veel websites gebruiken trouwens zowel PNG als JPEG, afhankelijk van het specifieke doel van de afbeelding.<\/p>\n Reminder: er is geen verschil tussen JPEG en JPG<\/a>, het zijn gewoon twee verschillende afkortingen en namen van hetzelfde format.<\/p>\n SVG bestanden zijn volledig schaalbare vector bestanden die ideaal zijn voor iconen, logo’s, grafieken en eenvoudige illustraties. De afbeeldingen kan direct in de pagina ingevoegd worden als CSS code<\/a>.<\/p>\n Daarom is SVG de derde op de ranglijst met populaire afbeeldingsformat, en wordt door 27% van de websites gebruikt.<\/p>\n Alhoewel GIF’s bijna nooit gebruikt worden voor statische afbeeldingen, is het een enorme comeback aan het maken voor het delen van korte animaties.<\/p>\n Daardoor gebruikt momenteel 22% van de websites GIF’s op hun pagina’s, alhoewel ze meestal dan ook PNG en JPEG als standaardformat gebruiken.<\/p>\n “Raw” formats bieden natuurlijk verreweg de beste kwaliteit, maar daar hoort dan ook een onredelijke bestandsgrootte bij, soms wel honderden megabytes per bestand.<\/p>\n Voor web afbeeldingen biedt het WebP bestandsformat 25-35% kleinere bestanden<\/a> dan JPEG voor dezelfde kwaliteit, wat betekent dat je bij dezelfde opslagruimte veel betere afbeeldingen kan gebruiken en zo je website sneller kan maken<\/a>.<\/p>\n HEIF is ook een goed alternatief voor JPEG met effici\u00ebntere compressie, maar wordt helaas nog niet ondersteund door grotere browsers.<\/p>\n PNG bestanden bieden lossless compressie, maar de bestanden zijn dan ook erg groot en langzaam te laden. E\u00e9n PNG bestand kan zomaar honderden KB’s of zelfs meer dan een MB zijn. Maar als je handig gebruik maakt van tactieken zoals lazy loading (beschikbaar in de WordPress kern sinds versie 5.5)<\/a> en een CDN<\/a>, dan kan je alsnog een snelle site hebben.<\/p>\n De meest gebruikelijke afbeeldingstypen voor het web die transparantie ondersteunen zijn PNG, WebP, GIF en zelfs SVG.<\/p>\n De meeste standaard projectbestanden zoals PSD, XCF en AI ondersteunen dit natuurlijk ook.<\/p>\n Aan de andere kant biedt het populaire JPEG afbeeldingstype geen<\/strong> ondersteuning<\/strong> voor transparantie.<\/p>\n Het grootste verschil tussen PNG en JPEG is dat PNG lossless is, terwijl JPEg juist “lossy” is. Dit betekent dat PNG compressietechnieken gebruikt die geen kwaliteit van de afbeelding opofferen voor kleinere bestandsgrootte.<\/p>\n Heb je tekst in afbeeldingen of in bijvoorbeeld een tutorial screenshot, en wil je dat elementen 100% zichtbaar zijn in een foto, dan is PNG de juiste keuze.<\/p>\n Zoals je hierboven ziet, waarbij PNG aan de linkerkant te zien is, is het veel beter in het weergeven van tekst en eenvoudige vormen in vergelijking met JPEG, rechts te zien.<\/p>\n Wil dat zeggen dat JPEG een slecht bestandstype is? Zeker niet!<\/p>\nWat zijn de verschillende bestandstypen voor afbeeldingen?<\/h2>\n
Raster afbeeldingsformats<\/h3>\n
![\"Raster](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/raster-image-jpg.jpg\")
Vector afbeeldingsformats<\/h3>\n
![\"Vergroting](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/vector-image.jpg\")
15 meest populaire bestandstypen voor afbeeldingen<\/h2>\n
1. JPEG (en JPG) \u2014 Joint Photographic Experts Group<\/h3>\n
![\"Tijger](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/tiger-jpg.jpg\")
Voordelen en nadelen<\/h4>\n
\n
Ondersteuning door browsers en besturingssystemen<\/h4>\n
\n
Use Cases<\/h4>\n
\n
2. PNG \u2014 Portable Network Graphics<\/h3>\n
![\".png](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/kinsta-resource-center-png-image.png\")
Voordelen en nadelen<\/h4>\n
\n
Ondersteuning door browsers en besturingssystemen<\/h4>\n
\n
Use Cases<\/h4>\n
\n
3. GIF \u2014 Graphics Interchange Format<\/h3>\n
![\"Voorbeeld](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/turtle-dancing-gif.gif\")
Voordelen en nadelen<\/h4>\n
\n
Ondersteuning door browsers en besturingssystemen<\/h4>\n
\n
Use Cases<\/h4>\n
\n
4. WebP<\/h3>\n
![\"Voorbeeld](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/webp-image-compression.jpg\")
Voordelen en nadelen<\/h4>\n
\n
Ondersteuning door browsers en besturingssystemen<\/h4>\n
\n
Use Cases<\/h4>\n
\n
5. TIFF<\/h3>\n
![\"Icoon](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/tiff-icon.jpg\"){kind=icon}
Voordelen en nadelen<\/h4>\n
\n
Ondersteuning door browsers en besturingssystemen<\/h4>\n
\n
Use Cases<\/h4>\n
\n
6. BMP \u2014 Bitmap<\/h3>\n
![\"bmp](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/bmp-vs-gif.png\")
Voordelen en nadelen<\/h4>\n
\n
Ondersteuning door browsers en besturingssystemen<\/h4>\n
\n
Use Cases<\/h4>\n
\n
7. \u00a0HEIF \u2014 High Efficiency Image File Format<\/h3>\n
![\"jpeg](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/jpeg-vs-heif.jpg\")
Voordelen en nadelen<\/h4>\n
\n
Ondersteuning door browsers en besturingssystemen<\/h4>\n
\n
Use Cases<\/h4>\n
\n
8. SVG \u2014 Scalable Vector Graphics<\/h3>\n
![\"SVG](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/1200px-SVG_logo.svg.png\"){kind=logo}
Voordelen en nadelen<\/h4>\n
\n
Ondersteuning door browsers en besturingssystemen<\/h4>\n
\n
Use Cases<\/h4>\n
\n
9. EPS \u2014 Encapsulated Postscript<\/h3>\n
![\"EPS](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/pasted-image-0-3.png\")
Voordelen en nadelen<\/h4>\n
\n
Ondersteuning door browsers en besturingssystemen<\/h4>\n
\n
Use Cases<\/h4>\n
\n
10. PDF \u2014 Portable Document Format<\/h3>\n
![\"adobe](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/adobe-pdf.png\")
Voordelen en nadelen<\/h4>\n
\n
Ondersteuning door browsers en besturingssystemen<\/h4>\n
\n
Use Cases<\/h4>\n
\n
11. PSD \u2014 Photoshop Document<\/h3>\n
![\"psd](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/psd-logo.png\"){kind=logo}
Voordelen en nadelen<\/h4>\n
\n
Use Cases<\/h4>\n
\n
12. AI \u2014 Adobe Illustrator Artwork<\/h3>\n
![\"Adobe](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/adobe-illustrator-file-icon.png\"){kind=icon}
Voordelen en nadelen<\/h4>\n
\n
Use Cases<\/h4>\n
\n
13. XCF \u2014 eXperimental Computing Facility<\/h3>\n
![\"xcf](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/xcf-icon.png\"){kind=icon}
Voordelen en nadelen<\/h4>\n
\n
Use Cases<\/h4>\n
\n
14. \u00a0INDD \u2014 Adobe InDesign Document<\/h3>\n
![\"adobe](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/adobe-indesign-icon.png\"){kind=icon}
Voordelen en nadelen<\/h4>\n
\n
Use Cases<\/h4>\n
\n
15. “Raw” afbeeldingsformats<\/h3>\n
\n
Voordelen en nadelen<\/h4>\n
\n
Use Cases<\/h4>\n
\n
Veelgestelde vragen over bestandstypen voor afbeeldingen<\/h2>\n
Wat zijn 3 veelgebruikte bestandstypen voor afbeeldingen?<\/h3>\n
![\"Gebruik](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/09\/image-file-types-stats.png\")
1. PNG: screenshots, banners, infographics, afbeeldingen<\/h4>\n
2. JPEG: afbeeldingen<\/h4>\n
3. SVG: Logo’s, icoontjes en illustraties<\/h4>\n
Eervolle vermelding: geanimeerde GIFjes<\/h4>\n
![\"Geanimeerde](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/comeback-gif.gif\")
Welk afbeeldingsformat biedt de beste kwaliteit?<\/h3>\n
Welke bestandstypen ondersteunen transparantie?<\/h3>\n
Is PNG beter dan JPEG?<\/h3>\n
![\"PNG](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/09\/png-vs-jpeg.png\")