Het is makkelijk om de keuze van welk bestandstype je voor je afbeeldingen wil gebruiken, af te doen als onbelangrijk.

Maar mensen zijn nou eenmaal visuele wezens, en afbeeldingen zijn dus een belangrijk deel van de online gebruikerservaring.

De meeste pagina’s en artikelen gebruiken screenshots en afbeeldingen om de teksten te verrijken. Slechts 8% van de websites gebruikt helemaal geen visuele content.

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 omdat de afbeeldingen niet in het beste format geleverd worden én niet geoptimaliseerd zijn.

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.

Wat zijn de verschillende bestandstypen voor afbeeldingen?

Bestandstypen en -formats voor afbeelding zijn te verdelen in twee hoofdsoorten: raster afbeeldingstypen en vector afbeeldingstypen.

Laten we elke soort beter bekijken.

Raster afbeeldingsformats

De meest gebruikelijk afbeeldingstypen op het web (JPEG, GIF en PNG) vallen allemaal in de categorie raster afbeeldingen (grid).

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

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.

Raster afbeelding - JPEG voorbeeld

Raster afbeelding – JPEG voorbeeld

De overgrote meerderheid van de foto’s en afbeeldingen die je op internet ziet gebruiken een raster format.

Vector afbeeldingsformats

SVG, EPS, AI en PDF zijn allemaal voorbeeld van vector afbeeldingstypen.

Anders dan bij de statische raster afbeeldingen, waarbij elke pixel een vaste plek en kleur heeft, zijn vector formats flexibeler.

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.

Dit betekent dat je de originele afbeelding tot in het oneindige zou kunnen vergroten zonder dat je kwaliteitsverlies of vertekeningen krijgt.

Vergroting van vector afbeeldingen

Vergroting van vector afbeeldingen (Afbeelding: Wikipedia.com)

Zoals je kan zien is het verschil, wanneer je 7x vergroot, niet te vergelijken.

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.

Slechts 8% van de websites gebruikt helemaal geen visuele content... maar voor de andere 92% is het vinden van het juiste afbeeldingstype essentieel. 🖼 Vind de 15 beste opties in deze gids👇Click to Tweet

15 meest populaire bestandstypen voor afbeeldingen

Hieronder zullen we alle belangrijke bestandstypen voor grafische bestanden bespreken, van raster webafbeeldingen, vectors, tot bestanden voor grafische software.

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.

1. JPEG (en JPG) — Joint Photographic Experts Group

Tijger afbeelding JPEG Format

Tijger afbeelding JPEG Format

JPEG (of JPG) is een raster afbeeldingstype met lossy compressie waardoor het erg geschikt is om afbeeldingen te delen. Dat JPEGs “lossy” zijn betekent dat de bestandsgrootte minder is, maar de kwaliteit ook.

JPEG is nog altijd één van de meest gebruikte afbeeldingstypen die je online kan vinden, vanwege de compressie en de nagenoeg universele ondersteuning door zowel browsers als besturingssystemen.

De meeste socialmediaplatforms (bijvoorbeeld Facebook en Instagram) zetten afbeeldingen automatisch om naar JPEG. Ook gebruiken ze allemaal hun eigen afmetingen voor social media om de resolutie van je foto’s te beheren.

Voordelen en nadelen

Ondersteuning door browsers en besturingssystemen

Use Cases

2. PNG — Portable Network Graphics

.png afbeeldingsbestand van resource center van Kinsta

.png afbeeldingsbestand van resource center van Kinsta

PNG is een raster afbeelingsformat dat “lossless” compressie ondersteunt, waarbij het detail en kleurcontrast behouden blijft.

PNG biedt vooral een veel betere leesbaarheid van tekst dan bijvoorbeeld JPEG.

Hierdoor is PNG een populaire keuze voor infographics, banners, screenshots en andere graphics waar zowel afbeeldingen als tekst in zitten.

Voordelen en nadelen

Ondersteuning door browsers en besturingssystemen

Use Cases

3. GIF — Graphics Interchange Format

Voorbeeld van een gif

Voorbeeld van een gif

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.

Het GIF format is vooral bekend door (en gebruikt voor) geanimeerde afbeeldingen vanwege de 8-bits beperking waardoor de bestandsgrootte beperkt blijft, ideaal voor online gebruik dus.

Voordelen en nadelen

Ondersteuning door browsers en besturingssystemen

Use Cases

4. WebP

Voorbeeld van WebP afbeelding

Voorbeeld van WebP afbeelding

WebP is een afbeeldingsformat dat speciaal ontwikkeld is om betere “lossless” en “lossy” compressie van afbeeldingen te bieden.

Door over te gaan van zowel JPEG als PNG naar WebP kan je fors besparen op je opslagruimte op de server en gebruikt van bandbreedte, doordat WebP 35% kleinere bestanden gebruikt voor dezelfde kwaliteit.

Voordelen en nadelen

Ondersteuning door browsers en besturingssystemen

Use Cases

5. TIFF

Icoon van TIFF

Icoon van TIFF

Een format dat zeker niet mag missen in deze gids is TIFF.

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.

Het biedt geen compressie, omdat de prioriteit ligt bij de kwaliteit van de afbeelding.

Voordelen en nadelen

Ondersteuning door browsers en besturingssystemen

Use Cases

6. BMP — Bitmap

bmp vs gif

Bitmap vs gif

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.

Voordelen en nadelen

Ondersteuning door browsers en besturingssystemen

Use Cases

7.  HEIF — High Efficiency Image File Format

jpeg vs heif

JPEG vs HEIF format

HEIF, de afkorting van High Efficiency Image File, is een afbeeldingstype dat ontwikkeld is door het team achter het MPEG video format als directe concurrent voor JPEG.

In theorie is de compressie twee keer zo efficiënt als JPEG, waardoor een afbeelding met dezelfde bestandsgrootte twee keer zo goede kwaliteit kan bieden.

Het is een raster afbeeldingstype op basis van pixel mapping, dus je kan afbeeldingen niet vergroten zonder kwaliteit te verliezen.

Voordelen en nadelen

Ondersteuning door browsers en besturingssystemen

Use Cases

8. SVG — Scalable Vector Graphics

SVG logo

SVG logo

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.

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.

Hierdoor kan je SVG bestanden oneindig vergroten zonder kwaliteit te verliezen.

Voordelen en nadelen

Ondersteuning door browsers en besturingssystemen

Use Cases

9. EPS — Encapsulated Postscript

EPS icon

EPS icon

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.

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.

Voordelen en nadelen

Ondersteuning door browsers en besturingssystemen

Use Cases

10. PDF — Portable Document Format

adobe pdf

Voorbeeld van een PDF bestand

Je zal PDF waarschijnlijk vooral associëren met het opslaan en lezen van tekstdocumenten. Dat is goed te begrijpen, aangezien het nota bene “document” in de naam heeft.

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.

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.

Voordelen en nadelen

Ondersteuning door browsers en besturingssystemen

Use Cases

11. PSD — Photoshop Document

psd logo

PSD logo

Zoals de naam doet vermoeden is het PSD bestandsformat vooral te gebruikt voor het opslaan van afbeeldingen in Adobe Photoshop.

Het is een web-safe afbeeldingstype, en wordt dus niet ondersteund door browsers of standaard afbeeldingsviewers.

Voordelen en nadelen

Use Cases

12. AI — Adobe Illustrator Artwork

Adobe Illustrator bestandsicoon

Adobe Illustrator bestandsicoon

AI is ook een speciaal afbeeldingsformat dat ontwikkeld is om niet alleen de afbeelding op te slaan, maar de hele status van een project.

Net als PSD, is het niet bedoeld om online te gebruiken en wordt dan ook niet ondersteund door browsers of standaard afbeeldingsviewers.

Moe van langzame hosting van je WordPress-site? Wij leveren razendsnelle servers en 24/7 support van wereldklasse van WordPress-experts. Bekijk onze pakketten

Anders dan bij PSD bestanden kan je AI bestanden vergroten zonder kwaliteitsverlies.

Voordelen en nadelen

Use Cases

13. XCF — eXperimental Computing Facility

xcf icon

XCF icoon

XCF, oftewel eXperimental Computing Facility, is een bestandstype dat hoort bij de open source afbeeldingseditor GIMP. Het is dus het equivalent van PSD bestanden en slaat ook paden, doorzichtigheid, filters en meer op.

Ook hierbij geldt dat het een specifiek bestandstype is voor het opslaan van projecten, en het wordt dus niet ondersteund door browsers of standaard afbeeldingsviewers.

Voordelen en nadelen

Use Cases

14.  INDD — Adobe InDesign Document

adobe indesign icoon

Adobe InDesign icoon

INDD is een bestandstype van Adobe InDesign waarmee je projecten kan opslaan, zoals de content van een pagina, stijlen, modellen en nog meer.

Alhoewel het soms een afbeeldingsbestandstype wordt genoemd, wordt er meestal alleen gelinkt naar visuele elementen.

Het wordt niet ondersteund door browsers en afbeeldingsviewers, aangezien het geen web-safe format is.

Voordelen en nadelen

Use Cases

15. “Raw” afbeeldingsformats

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

De grootste raw afbeeldingstypen per cameramerk:

Anders dan de 256 kleuren die beschikbaar zijn in een JPEG bestanden, kunnen RAW bestanden tot wel 16.384 kleuren in één foto bieden. Hierdoor heb je veel meer flexibiliteit in het later bewerken van je kleuren en contrasten.

Raw afbeeldingen zijn niet bedoeld voor het web of überhaupt om te delen, en worden dan ook niet ondersteund door grote browsers of afbeeldingsviewers.

Voordelen en nadelen

Use Cases

Veelgestelde vragen over bestandstypen voor afbeeldingen

Wat zijn 3 veelgebruikte bestandstypen voor afbeeldingen?

Op basis van data over internetgebruik, zijn de drie meest gebruikte bestandstypen PNG, JPEG en SVG.

Gebruik van afbeeldingstypen

Gebruik van afbeeldingstypen (Afbeelding: w3techs.com)

Laten we kijken wat ze precies zo populair maakt.

1. PNG: screenshots, banners, infographics, afbeeldingen

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) en dergelijke.

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.

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.

2. JPEG: afbeeldingen

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.

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.

Reminder: er is geen verschil tussen JPEG en JPG, het zijn gewoon twee verschillende afkortingen en namen van hetzelfde format.

3. SVG: Logo’s, icoontjes en illustraties

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.

Daarom is SVG de derde op de ranglijst met populaire afbeeldingsformat, en wordt door 27% van de websites gebruikt.

Eervolle vermelding: geanimeerde GIFjes

Alhoewel GIF’s bijna nooit gebruikt worden voor statische afbeeldingen, is het een enorme comeback aan het maken voor het delen van korte animaties.

Geanimeerde gif

Geanimeerde gif

Daardoor gebruikt momenteel 22% van de websites GIF’s op hun pagina’s, alhoewel ze meestal dan ook PNG en JPEG als standaardformat gebruiken.

Welk afbeeldingsformat biedt de beste kwaliteit?

“Raw” formats bieden natuurlijk verreweg de beste kwaliteit, maar daar hoort dan ook een onredelijke bestandsgrootte bij, soms wel honderden megabytes per bestand.

Voor web afbeeldingen biedt het WebP bestandsformat 25-35% kleinere bestanden dan JPEG voor dezelfde kwaliteit, wat betekent dat je bij dezelfde opslagruimte veel betere afbeeldingen kan gebruiken en zo je website sneller kan maken.

HEIF is ook een goed alternatief voor JPEG met efficiëntere compressie, maar wordt helaas nog niet ondersteund door grotere browsers.

PNG bestanden bieden lossless compressie, maar de bestanden zijn dan ook erg groot en langzaam te laden. Eén 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) en een CDN, dan kan je alsnog een snelle site hebben.

Welke bestandstypen ondersteunen transparantie?

De meest gebruikelijke afbeeldingstypen voor het web die transparantie ondersteunen zijn PNG, WebP, GIF en zelfs SVG.

De meeste standaard projectbestanden zoals PSD, XCF en AI ondersteunen dit natuurlijk ook.

Aan de andere kant biedt het populaire JPEG afbeeldingstype geen ondersteuning voor transparantie.

Is PNG beter dan JPEG?

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.

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.

PNG vs JPEG strip (Bron: lbrandy.com)

PNG vs JPEG strip (Bron: lbrandy.com)

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.

Wil dat zeggen dat JPEG een slecht bestandstype is? Zeker niet!

Voor normale blogartikelen of header afbeeldingen biedt JPEG genoeg kwaliteit, met kleinere bestandsgrootte. Je kan zo tot wel 50% aan ruimte besparen terwijl je met het blote oog nauwelijks kwaliteitsverschil kan zien.

Zorg voor scherpe visuele content van je website met deze gids over de beste afbeeldingstypen ✨Click to Tweet

Samenvatting

Er is geen tekort aan afbeeldingen die je voor je projecten kan gebruiken. Hopelijk helpt dit artikel je bij het begrijpen van welke verschillende bestandstypen voor afbeeldingen je moet gebruiken in welke context, om de beste resultaten te krijgen.

Raster formats zijn het best voor afbeeldingen en foto’s, terwijl vector afbeeldingen juist ideaal zijn voor logo’s, iconen en digitale graphics.

Door het juiste afbeeldingstype voor het juiste doel te gebruiken kan je niet alleen de laadsnelheid van je pagina verbeteren, maar ook minder bandbreedte en serverruimte gebruiken. Als bijkomend effect neemt je algehele user experience dus flink verbeteren. Dat klinkt goed, toch?


Als je dit artikel leuk vond, dan ga je Kinsta’s WordPress hosting platform ook heel erg leuk vinden! Of het nu gaat om het versnellen van je website of de 24/7 support van ons ervaren WordPress-team. Onze door Google Cloud aangedreven infrastructuur is gericht op automatische schaalbaarheid, prestaties en beveiliging. Laat ons jou het Kinsta verschil tonen! Bekijk onze pakketten