Soorten afbeeldingsformaten voor betere webprestaties

Afbeeldingen spelen een grote rol op bijna elke website. Ze maken een pagina duidelijker, aantrekkelijker en makkelijker te begrijpen. Toch wordt er vaak te weinig nagedacht over soorten afbeeldingsformaten, terwijl het gekozen bestandsformaat veel invloed heeft op de kwaliteit, bestandsgrootte en laadsnelheid van een website.

Een foto, logo, screenshot of icoon kan er op het eerste gezicht gewoon uitzien als “een afbeelding”. Maar achter die afbeelding zit altijd een bestandsformaat, zoals JPG, PNG, WebP, AVIF of SVG. Elk formaat werkt anders. Sommige formaten zijn perfect voor foto’s, andere juist voor logo’s, iconen, transparante achtergronden, drukwerk of bewerkbare ontwerpen.

Als je het verkeerde formaat gebruikt, kan een afbeelding onnodig zwaar worden. Daardoor laden pagina’s trager, krijgen bezoekers een minder fijne ervaring en kan ook je SEO hieronder lijden. Gebruik je juist het goede formaat, dan blijft je website sneller, ziet je beeldmateriaal er scherper uit en voorkom je onnodig grote bestanden.

In dit artikel lees je wat afbeeldingsformaten zijn, wat het verschil is tussen raster en vector, welke bestandsformaten veel worden gebruikt en wanneer je welk formaat het beste kiest.

Wat is een afbeeldingsformaat?

Een afbeeldingsformaat is de manier waarop een afbeelding digitaal wordt opgeslagen. Je herkent het formaat meestal aan de bestandsextensie achter de bestandsnaam. Denk aan .jpg, .png, .webp, .svg of .avif.

Zo’n extensie lijkt misschien een klein detail, maar het bepaalt veel meer dan alleen de naam van het bestand. Het formaat bepaalt onder andere:

• hoe groot het bestand wordt
• hoeveel kwaliteit behouden blijft
• of de afbeelding transparantie ondersteunt
• of de afbeelding geschikt is voor animatie
• of je de afbeelding goed kunt vergroten
• of browsers en apparaten het bestand goed kunnen tonen
• of het bestand geschikt is voor web, print of bewerking

Een foto van een product heeft bijvoorbeeld andere eisen dan een logo. Een logo moet vaak scherp blijven op elk schermformaat. Een productfoto moet vooral mooi blijven, maar mag niet te zwaar zijn. Een screenshot met tekst moet goed leesbaar blijven. En een animatie moet soepel laden zonder dat de pagina traag wordt.

Daarom bestaat er niet één beste afbeeldingsformaat voor alles. Het juiste formaat hangt altijd af van het doel. Wil je breder begrijpen hoe beeld, structuur en techniek samen invloed hebben op een goede website? Lees dan ook: Waar moet een goede website aan voldoen?

Raster en vector: het belangrijkste verschil

Voordat je de verschillende soorten afbeeldingsformaten goed kunt kiezen, is het handig om eerst het verschil tussen raster en vector te begrijpen. Dit is de basis. Niet spannend genoeg voor een film, maar wel handig als je website niet als een aardappel moet laden.

Rasterafbeeldingen

Rasterafbeeldingen bestaan uit pixels. Een pixel is een klein vierkantje met een kleur. Samen vormen al die pixels de volledige afbeelding.

Foto’s zijn bijna altijd rasterafbeeldingen. Denk aan JPG, PNG, WebP, AVIF, GIF, TIFF, BMP en RAW. Deze formaten zijn geschikt voor beelden met veel details, kleuren, licht, schaduw en realistische overgangen.

Het nadeel van rasterafbeeldingen is dat ze minder goed schaalbaar zijn. Als je een kleine afbeelding heel groot maakt, worden de pixels zichtbaar. De afbeelding wordt dan onscherp, korrelig of blokkerig.

Een rasterafbeelding is dus ideaal voor:

• foto’s
• productafbeeldingen
• screenshots
• blogafbeeldingen
• banners met veel kleur en detail
• afbeeldingen voor social media

Maar je moet goed letten op de resolutie en bestandsgrootte. Een afbeelding van 5000 pixels breed uploaden terwijl deze op je website maar 800 pixels breed wordt getoond, is meestal onnodig. Je server moet dan een veel te zwaar bestand laden, en bezoekers mogen wachten. Blijkbaar vonden we wachten op internet nog niet vervelend genoeg.

Vectorafbeeldingen

Vectorafbeeldingen werken anders. Ze bestaan niet uit vaste pixels, maar uit lijnen, vormen, punten en berekeningen. Daardoor kun je een vectorbestand eindeloos vergroten of verkleinen zonder kwaliteitsverlies.

Een logo in SVG-formaat blijft bijvoorbeeld scherp op een kleine mobiele telefoon, maar ook op een groot scherm. Dat maakt vectorformaten erg geschikt voor grafische elementen die strak en schaalbaar moeten blijven.

Vectorafbeeldingen zijn vooral handig voor:

• logo’s
• iconen
• illustraties
• eenvoudige grafieken
• patronen
• lijnen en vormen
• visuele elementen in een huisstijl

Bekende vectorformaten zijn SVG, EPS, AI en soms PDF. Voor websites is vooral SVG interessant, omdat dit formaat licht, schaalbaar en goed geschikt is voor moderne webdesigns.

Wil je beter begrijpen hoe schaalbare ontwerpen bijdragen aan een goede mobiele ervaring? Lees dan ook: Responsief webdesign en waarom het zo belangrijk is voor SEO.

Compressie: waarom sommige afbeeldingen kleiner zijn dan andere

Bij afbeeldingsformaten kom je vaak het woord compressie tegen. Compressie betekent dat een bestand kleiner wordt gemaakt. Dat kan op verschillende manieren.

Compressie met kwaliteitsverlies

Bij compressie met kwaliteitsverlies wordt een afbeelding kleiner gemaakt door bepaalde beeldinformatie weg te halen. Dit heet ook lossy compressie.

JPG werkt bijvoorbeeld op deze manier. Het bestand wordt kleiner, maar als je te sterk comprimeert, zie je kwaliteitsverlies. De afbeelding kan dan vlekkerig worden of details verliezen, vooral rondom tekst, scherpe lijnen en kleurvlakken.

Dit type compressie is handig voor foto’s, omdat je daar vaak veel bestandsgrootte kunt besparen zonder dat het direct zichtbaar wordt.

Compressie zonder kwaliteitsverlies

Bij compressie zonder kwaliteitsverlies wordt het bestand kleiner gemaakt zonder beeldinformatie te verwijderen. Dit heet lossless compressie.

PNG gebruikt bijvoorbeeld vaak dit type compressie. Daardoor blijven tekst, scherpe randen en transparante delen goed behouden. Het nadeel is dat bestanden sneller groot worden, vooral bij grote afbeeldingen of foto’s met veel kleuren.

Ongecomprimeerde bestanden

Sommige bestanden slaan bijna alle beeldinformatie op zonder sterke compressie. Denk aan BMP, TIFF of RAW. Dat levert hoge kwaliteit op, maar ook grote bestanden.

Voor webgebruik zijn zulke bestanden meestal niet geschikt. Ze zijn handig voor fotografie, archief, drukwerk of professionele bewerking, maar niet voor een gewone webpagina.

De belangrijkste soorten afbeeldingsformaten

Er bestaan veel soorten afbeeldingsformaten, maar ze zijn niet allemaal even belangrijk voor websites. Sommige gebruik je dagelijks, andere zijn vooral bedoeld voor ontwerpsoftware, drukwerk of fotografie. Hieronder lees je de belangrijkste formaten en wanneer je ze wel of niet gebruikt.

JPG en JPEG

JPG en JPEG zijn eigenlijk hetzelfde afbeeldingsformaat. De korte versie .jpg komt vooral uit oudere systemen waar bestandsextensies maar drie letters mochten hebben. Tegenwoordig kun je beide tegenkomen.

JPEG is een van de bekendste formaten voor foto’s. Het gebruikt compressie met kwaliteitsverlies, waardoor foto’s relatief klein kunnen worden opgeslagen. Dat maakt JPG handig voor websites, blogs, nieuwsartikelen, portfolio’s en productfoto’s.

JPG is vooral geschikt voor:

• foto’s
• blogafbeeldingen
• sfeerbeelden
• productfoto’s zonder transparantie
• afbeeldingen met veel kleurverloop
• social media beelden

JPG is minder geschikt voor:

• logo’s
• iconen
• screenshots met tekst
• afbeeldingen met transparante achtergrond
• bestanden die je steeds opnieuw wilt bewerken en opslaan

Elke keer dat je een JPG opnieuw opslaat met compressie, kan er een beetje kwaliteit verloren gaan. Voor een gewone website is JPG nog steeds bruikbaar, maar in veel gevallen zijn WebP of AVIF tegenwoordig betere keuzes voor snelheid en bestandsgrootte.

PNG

PNG is een rasterformaat dat vooral bekend is door de ondersteuning van transparantie. Als je een afbeelding zonder achtergrond nodig hebt, bijvoorbeeld een logo, icoon of grafisch element, kom je vaak bij PNG uit.

PNG gebruikt compressie zonder kwaliteitsverlies. Daardoor blijven scherpe lijnen, tekst en kleurvlakken netjes zichtbaar. Dat maakt PNG beter dan JPG voor screenshots, interfacebeelden en afbeeldingen waarin tekst voorkomt.

PNG is vooral geschikt voor:

• afbeeldingen met transparante achtergrond
• screenshots
• iconen
• eenvoudige grafische elementen
• afbeeldingen met tekst
• logo’s wanneer SVG niet beschikbaar is

PNG is minder geschikt voor grote foto’s. Een foto in PNG kan veel groter zijn dan dezelfde foto in JPG, WebP of AVIF. Voor een website kan dat de laadsnelheid flink vertragen.

GIF

GIF is een oud afbeeldingsformaat dat vooral bekend is door bewegende afbeeldingen. Een GIF kan meerdere beelden achter elkaar tonen, waardoor een simpele animatie ontstaat.

Het formaat ondersteunt maximaal 256 kleuren. Daardoor is GIF niet geschikt voor foto’s met veel kleur en detail. Voor simpele animaties, kleine bewegende elementen of korte visuele uitleg kan het nog werken, maar voor moderne websites zijn WebP, AVIF of APNG vaak betere opties.

GIF is vooral geschikt voor:

• simpele animaties
• korte visuele reacties
• kleine bewegende elementen
• eenvoudige uitleg in beeld

GIF is minder geschikt voor:

• grote animaties
• professionele foto’s
• kleurvolle beelden
• snelle websites met veel beeldmateriaal

Een bewegende GIF kan verrassend zwaar zijn. Soms is een korte video of een moderne geanimeerde WebP veel lichter. Technologie, altijd bezig om oude problemen opnieuw te verpakken.

WebP

WebP is een modern afbeeldingsformaat dat door Google is ontwikkeld. Het is gemaakt om afbeeldingen kleiner te maken dan traditionele JPG en PNG-bestanden, zonder dat de kwaliteit sterk achteruitgaat.

WebP ondersteunt zowel compressie met kwaliteitsverlies als compressie zonder kwaliteitsverlies. Ook ondersteunt het transparantie en animatie. Daardoor kan WebP in veel situaties JPG, PNG en GIF vervangen.

WebP is vooral geschikt voor:

• foto’s op websites
• productafbeeldingen
• blogafbeeldingen
• banners
• afbeeldingen met transparantie
• lichtere alternatieven voor PNG
• eenvoudige animaties

Voor de meeste websites is WebP op dit moment een veilige en praktische keuze. Het wordt breed ondersteund door moderne browsers en helpt vaak om de bestandsgrootte te verlagen. Daardoor kan je website sneller laden, zeker wanneer je veel afbeeldingen gebruikt.

Gebruik je WordPress, dan kun je WebP-afbeeldingen direct uploaden in moderne WordPress-versies. Ook veel optimalisatieplugins kunnen bestaande JPG en PNG-afbeeldingen automatisch omzetten naar WebP.

AVIF

AVIF is een nieuwer en zeer efficiënt afbeeldingsformaat. Het kan afbeeldingen vaak nog kleiner maken dan WebP, terwijl de kwaliteit goed blijft. AVIF ondersteunt ook transparantie, HDR, hoge kleurkwaliteit en animatie.

Voor websites met veel grote foto’s, zoals portfolio’s, webshops, blogs en visuele landingspagina’s, kan AVIF erg interessant zijn. Het helpt de bestandsgrootte te verlagen en kan daardoor bijdragen aan een betere laadsnelheid en betere Core Web Vitals.

AVIF is vooral geschikt voor:

• grote foto’s
• hero-afbeeldingen
• productfoto’s
• visuele websites
• moderne WordPress-sites
• websites waar snelheid belangrijk is

Toch is AVIF niet altijd de makkelijkste keuze. Het converteren kan langer duren dan bij WebP, en niet elke hostingomgeving of afbeeldingstool werkt er even goed mee. In WordPress kun je vanaf versie 6.5 AVIF-afbeeldingen gebruiken, maar je hosting moet dit ook ondersteunen.

Voor veel websites is de beste aanpak: gebruik AVIF waar het goed werkt, maar zorg voor een fallback naar WebP, JPG of PNG als dat nodig is.

SVG

SVG staat voor Scalable Vector Graphics. Dit is een vectorformaat dat veel wordt gebruikt voor logo’s, iconen en eenvoudige illustraties op websites.

Het grote voordeel van SVG is dat het altijd scherp blijft, op elk schermformaat. Een SVG-logo ziet er goed uit op mobiel, tablet, laptop en grote desktopmonitor. Ook is het bestand vaak klein, vooral bij eenvoudige vormen.

SVG is vooral geschikt voor:

• logo’s
• iconen
• simpele illustraties
• grafische vormen
• interface-elementen
• schaalbare webafbeeldingen

SVG is minder geschikt voor echte foto’s. Je kunt geen normale productfoto als SVG opslaan en verwachten dat dit handig is. Daar zijn rasterformaten zoals WebP, AVIF of JPG beter voor. Wil je beter begrijpen hoe HTML en webcode afbeeldingen op een pagina tonen? Lees dan ook: Wat is HTML en waar wordt het voor gebruikt?

Bij WordPress moet je wel voorzichtig zijn met SVG. Standaard is SVG-upload vaak beperkt of niet toegestaan, omdat SVG-code kan bevatten. Gebruik je SVG-bestanden, zorg dan dat ze schoon en veilig zijn voordat je ze op een website plaatst.

APNG

APNG staat voor Animated Portable Network Graphics. Je kunt het zien als een modernere variant voor animaties, vergelijkbaar met GIF, maar met betere kleurondersteuning en vaak betere kwaliteit.

APNG is vooral handig voor korte animaties waarbij kwaliteit belangrijker is dan bij een gewone GIF. Denk aan kleine interface-animaties, geanimeerde iconen of subtiele bewegende elementen.

APNG is vooral geschikt voor:

• korte animaties
• geanimeerde iconen
• interface-effecten
• animaties met betere kleurkwaliteit dan GIF

Voor veel websites zijn WebP of AVIF alsnog praktischer, vooral omdat ze vaak beter scoren op bestandsgrootte. Maar APNG is goed om te kennen, zeker als je werkt met animaties die scherp en kleurvast moeten blijven.

TIFF

TIFF is een rasterformaat dat vooral wordt gebruikt voor drukwerk, fotografie, scans en archiefbestanden. Het formaat kan beelden in hoge kwaliteit opslaan en ondersteunt veel beeldinformatie.

Het nadeel is duidelijk: TIFF-bestanden zijn vaak groot. Heel groot. Zo groot dat je website er spontaan van gaat zuchten.

TIFF is vooral geschikt voor:

• drukwerk
• professionele fotografie
• archiefbestanden
• scans in hoge kwaliteit
• bestanden die later nog bewerkt moeten worden

TIFF is niet geschikt voor gewone webpagina’s. Browsers ondersteunen TIFF niet overal goed, en de bestandsgrootte is meestal veel te hoog. Wil je een TIFF gebruiken op je website, exporteer die dan eerst naar WebP, AVIF, JPG of PNG.

BMP

BMP is een oud rasterformaat dat vooral bekend is van Windows. Het slaat beeldinformatie vaak zonder sterke compressie op, waardoor bestanden erg groot kunnen worden.

Vroeger had BMP meer nut. Tegenwoordig is het voor websites bijna nooit een goede keuze. Er zijn betere, lichtere en modernere alternatieven.

BMP is vooral nog relevant voor:

• oude systemen
• specifieke software
• historische bestanden
• simpele lokale opslag

Voor webgebruik kun je BMP meestal beter vermijden. Gebruik liever JPG, PNG, WebP of AVIF.

HEIF en HEIC

HEIF staat voor High Efficiency Image File Format. HEIC is een bekende variant die veel door Apple-apparaten wordt gebruikt. Als je een foto maakt met een iPhone, kan die foto als HEIC worden opgeslagen.

HEIF en HEIC bieden goede kwaliteit met een kleinere bestandsgrootte dan JPG. Voor opslag op telefoons is dat handig. Voor websites ligt het lastiger, omdat ondersteuning in browsers en systemen niet overal even soepel is.

HEIF en HEIC zijn vooral geschikt voor:

• opslag op smartphones
• foto’s met hoge kwaliteit
• persoonlijke fotobibliotheken
• Apple-apparaten

Voor websites is HEIC meestal niet de beste keuze. Wil je zo’n afbeelding online gebruiken, converteer deze dan naar WebP, AVIF of JPG.

JPEG XL

JPEG XL, vaak afgekort als JXL, is een modern afbeeldingsformaat dat is ontwikkeld als mogelijke opvolger van oudere formaten zoals JPEG, PNG en GIF. Het kan hoge kwaliteit, goede compressie, transparantie en geavanceerde beeldmogelijkheden ondersteunen.

Technisch is JPEG XL interessant. Praktisch is het voor de meeste websites nog geen standaardkeuze, omdat de browserondersteuning nog beperkt is. Vooral voor dagelijks webgebruik is WebP of AVIF op dit moment veiliger.

JPEG XL is interessant voor:

• toekomstige weboptimalisatie
• archivering
• hoogwaardige beeldopslag
• situaties waarin software het goed ondersteunt

Voor normale websites kun je JPEG XL voorlopig beter niet als enige formaat gebruiken. Als je ermee experimenteert, zorg dan altijd voor een fallback naar AVIF, WebP of JPG.

ICO

ICO is een klein afbeeldingsformaat dat vooral wordt gebruikt voor favicons. Een favicon is het kleine icoontje dat je in een browsertabblad ziet naast de titel van een website. Wil je weten wat een favicon precies is en waarom dit kleine icoon belangrijk is voor je website? Lees dan ook: Wat is een favicon en waarom dit kleine icoon zo belangrijk is.

Vroeger was ICO bijna standaard voor favicons. Tegenwoordig kun je ook PNG of SVG gebruiken, afhankelijk van de website en implementatie. Toch komt ICO nog steeds veel voor.

ICO is vooral geschikt voor:

• favicons
• browsericonen
• oudere compatibiliteit

Voor gewone afbeeldingen op pagina’s gebruik je ICO niet. Het is een specifiek formaat voor kleine iconen.

EPS

EPS is een vectorformaat dat veel wordt gebruikt in grafisch ontwerp en drukwerk. Het wordt vaak gebruikt voor logo’s, illustraties en bestanden die in professionele ontwerpsoftware worden bewerkt.

EPS is schaalbaar zonder kwaliteitsverlies. Dat maakt het handig voor drukwerk, bijvoorbeeld wanneer een logo op visitekaarten, posters, banners of verpakkingen moet worden geplaatst. Voor websites is EPS niet geschikt.

EPS is vooral geschikt voor:

• drukwerk
• logo’s in ontwerpbestanden
• professionele grafische bestanden
• samenwerking met drukkers of ontwerpers

Wil je een EPS-bestand online gebruiken, exporteer het dan naar SVG, PNG, WebP of JPG, afhankelijk van het doel.

PDF

PDF is officieel geen puur afbeeldingsformaat, maar het kan wel afbeeldingen, tekst, vectoren en opmaak bevatten. Daarom wordt PDF vaak gebruikt voor documenten, brochures, handleidingen, offertes, presentaties en drukbestanden.

Een PDF is handig wanneer de opmaak exact behouden moet blijven. Ook kan tekst in een PDF vaak worden geselecteerd en doorzocht, afhankelijk van hoe het bestand is gemaakt.

PDF is vooral geschikt voor:

• brochures
• handleidingen
• whitepapers
• rapporten
• drukbestanden
• documenten die downloadbaar moeten zijn

PDF is minder geschikt als gewone afbeelding in een webpagina. Je plaatst een PDF meestal als download of als ingesloten document, niet als standaard afbeelding tussen de tekst.

PSD

PSD is het native bestandsformaat van Adobe Photoshop. Dit formaat bewaart lagen, maskers, effecten, teksten en bewerkingen. Daardoor kun je later verder werken aan het ontwerp zonder alles opnieuw te moeten maken.

PSD is bedoeld als werkbestand, niet als eindbestand voor een website.

PSD is vooral geschikt voor:

• fotobewerking
• grafisch ontwerp
• conceptontwerpen
• bestanden met lagen
• projecten die later aangepast moeten worden

Voor online gebruik moet je een PSD exporteren naar JPG, PNG, WebP of een ander geschikt webformaat.

AI

AI is het native bestandsformaat van Adobe Illustrator. Dit formaat wordt vooral gebruikt voor vectorontwerpen, zoals logo’s, iconen, illustraties en huisstijlelementen.

Omdat AI vectorgebaseerd is, kun je ontwerpen zonder kwaliteitsverlies vergroten of verkleinen. Dat is ideaal voor professionele ontwerpbestanden.

AI is vooral geschikt voor:

• logo-ontwerp
• iconen
• illustraties
• vectorbestanden
• huisstijlbestanden
• drukwerkvoorbereiding

Voor websites gebruik je AI niet direct. Exporteer het bestand naar SVG voor logo’s en iconen, of naar PNG, JPG, WebP of AVIF voor gewone afbeeldingen.

XCF

XCF is het werkbestand van GIMP, een gratis en open-source alternatief voor Photoshop. Net als PSD kan XCF lagen, paden, transparantie en bewerkingen bewaren.

XCF is vooral handig als je in GIMP werkt en later verder wilt gaan met hetzelfde project. Voor websites is het niet geschikt.

XCF is vooral geschikt voor:

• GIMP-projecten
• bewerkbare ontwerpbestanden
• afbeeldingen met lagen
• fotobewerking buiten Photoshop

Voor online gebruik moet je een XCF-bestand exporteren naar een webvriendelijk formaat zoals JPG, PNG, WebP of AVIF.

INDD

INDD is het native bestandsformaat van Adobe InDesign. Dit programma wordt gebruikt voor de opmaak van magazines, brochures, boeken, catalogi en andere documenten met meerdere pagina’s.

Een INDD-bestand bevat tekst, afbeeldingen, stijlen, pagina-indeling en andere ontwerpelementen. Het is dus meer een compleet opmaakbestand dan een gewone afbeelding.

INDD is vooral geschikt voor:

• magazines
• brochures
• boeken
• catalogi
• drukwerkprojecten
• documenten met meerdere pagina’s

Voor webgebruik exporteer je meestal naar PDF of naar afzonderlijke afbeeldingen, afhankelijk van wat je nodig hebt.

RAW-bestanden

RAW is geen enkel vast formaat, maar een verzamelnaam voor ruwe beeldbestanden uit digitale camera’s. Elke camerafabrikant heeft vaak zijn eigen RAW-formaat, zoals CR2, CR3, NEF, ARW, ORF of RW2.

RAW-bestanden bevatten veel meer beeldinformatie dan JPG. Daardoor kun je achteraf beter de belichting, kleuren, witbalans en details aanpassen. Dat maakt RAW populair bij fotografen.

RAW is vooral geschikt voor:

• professionele fotografie
• uitgebreide nabewerking
• maximale beeldkwaliteit
• archief van originele foto’s

RAW is niet geschikt voor direct gebruik op websites. De bestanden zijn veel te groot en worden niet standaard door browsers getoond. Voor webgebruik exporteer je RAW-foto’s naar WebP, AVIF of JPG.

Welke soorten afbeeldingsformaten zijn het beste voor websites?

Voor websites draait het meestal om drie dingen: goede kwaliteit, lage bestandsgrootte en brede ondersteuning. Je wilt dat afbeeldingen er mooi uitzien, maar je wilt niet dat je website traag wordt.

Wil je weten hoe afbeeldingen, scripts en andere onderdelen invloed hebben op de snelheid van je WordPress-website? Lees dan ook: WordPress website sneller maken: 23 bewezen methodes.

Voor moderne websites zijn dit meestal de beste keuzes:

• WebP voor de meeste foto’s, banners en webafbeeldingen
• AVIF voor grote foto’s en situaties waarin maximale compressie belangrijk is
• JPG als veilige fallback of voor eenvoudige fotobestanden
• PNG voor transparantie, screenshots en scherpe grafische elementen
• SVG voor logo’s, iconen en eenvoudige illustraties
• GIF, APNG of WebP voor korte animaties

Voor WordPress-websites is WebP vaak de meest praktische keuze. Het werkt goed, is breed ondersteund en wordt door veel optimalisatieplugins gebruikt. AVIF is technisch sterker in compressie, maar vraagt soms iets meer controle op hosting en ondersteuning.

Gebruik je veel foto’s op je website, bijvoorbeeld in een portfolio, blog of webshop, dan kan het slim zijn om WebP of AVIF te gebruiken in plaats van zware JPG- of PNG-bestanden.

Welk afbeeldingsformaat kies je per situatie?

De juiste keuze hangt af van het type afbeelding. Hieronder zie je per situatie welk formaat meestal het meest logisch is.

Voor gewone foto’s op een website gebruik je meestal WebP, AVIF of JPG. WebP is vaak de veilige moderne keuze. AVIF is handig als je extra kleine bestanden wilt en je systeem dit goed ondersteunt. JPG blijft bruikbaar als fallback.

Voor logo’s gebruik je bij voorkeur SVG. Daarmee blijft het logo scherp op elk scherm. Als SVG niet mogelijk is, kun je PNG gebruiken, vooral wanneer transparantie nodig is.

Voor iconen is SVG meestal de beste keuze. Het bestand blijft klein en schaalbaar. Voor eenvoudige pictogrammen werkt dit beter dan PNG.

Voor screenshots gebruik je vaak PNG of WebP. Als er tekst in het screenshot staat, moet de afbeelding scherp blijven. JPG kan tekst soms wazig maken door compressie.

Voor productfoto’s gebruik je meestal WebP of AVIF. JPG kan ook, maar let dan goed op de compressie. Productfoto’s moeten scherp blijven, maar mogen niet onnodig zwaar zijn.

Voor afbeeldingen met transparante achtergrond gebruik je PNG, WebP, AVIF of SVG. Welke je kiest, hangt af van het soort afbeelding. Voor logo’s en iconen is SVG vaak beter. Voor rasterafbeeldingen met transparantie kan WebP of PNG handig zijn.

Voor drukwerk gebruik je TIFF, PDF, EPS of AI, afhankelijk van het ontwerp en de drukker. Webformaten zoals WebP en AVIF zijn meestal niet bedoeld voor drukwerk.

Voor bewerkbare ontwerpen gebruik je PSD, AI, XCF of INDD. Dit zijn werkbestanden. Voor publicatie exporteer je ze naar een geschikt eindformaat.

Als je soorten afbeeldingsformaten slim kiest, voorkom je dat je website onnodig zwaar wordt. Dat klinkt simpel, en wonder boven wonder is het dat deze keer ook.

Afbeeldingen optimaliseren voor snelheid en SEO

Het juiste formaat kiezen is belangrijk, maar dat is niet het enige. Ook de manier waarop je afbeeldingen opslaat, uploadt en toont, maakt veel verschil.

Verklein afbeeldingen vóór het uploaden

Upload geen afbeelding van 5000 pixels breed als deze op je website maar 900 pixels breed wordt weergegeven. Dat zorgt alleen maar voor extra bestandsgrootte.

Gebruik liever een formaat dat past bij de plek waar de afbeelding wordt getoond. Voor veel blogafbeeldingen is een breedte van 1200 tot 1600 pixels vaak ruim genoeg, afhankelijk van je ontwerp.

Comprimeer afbeeldingen

Gebruik compressie om de bestandsgrootte te verlagen. Dat kan met tools zoals afbeeldingssoftware, online converters of WordPress-plugins voor afbeelding optimalisatie.

Let er wel op dat je niet te ver comprimeert. Een snelle website is mooi, maar als je afbeeldingen eruitzien alsof ze door een broodrooster zijn gehaald, helpt dat ook niemand.

Gebruik moderne formaten

Voor veel websites zijn WebP en AVIF betere keuzes dan zware JPG- of PNG-bestanden. Ze kunnen de laadsnelheid verbeteren en de totale paginagrootte verlagen.

Controleer wel altijd of je website, hosting en plugins het gekozen formaat goed ondersteunen.

Gebruik SVG voor logo’s en iconen

Logo’s en iconen moeten scherp blijven. SVG is daarvoor vaak ideaal. Het bestand is meestal klein en blijft mooi op elk scherm.

Gebruik SVG wel veilig. Upload geen willekeurige SVG-bestanden van onbekende bronnen zonder controle.

Vul alt-teksten goed in

Een alt-tekst helpt zoekmachines en schermlezers begrijpen wat er op een afbeelding staat. Schrijf een korte, duidelijke omschrijving van de afbeelding. Gebruik alleen een zoekwoord als het natuurlijk past.

Een goede alt-tekst helpt bij toegankelijkheid en kan ook bijdragen aan vindbaarheid via Google Afbeeldingen. Wil je precies weten hoe je goede alt-teksten schrijft en waarom ze belangrijk zijn voor SEO? Lees dan ook: Wat is een Alt-tag en hoe helpt het je SEO?

Gebruik lazy loading

Lazy loading betekent dat afbeeldingen pas worden geladen wanneer ze bijna in beeld komen. Stel dat je een lange blogpagina hebt met tien afbeeldingen. De bezoeker ziet bij het openen van de pagina alleen het bovenste deel. Zonder lazy loading kan de browser toch proberen om meerdere afbeeldingen op de hele pagina alvast te laden. Dat maakt de eerste laadtijd zwaarder dan nodig.

Met lazy loading worden afbeeldingen die lager op de pagina staan pas opgehaald wanneer de bezoeker naar beneden scrolt. Daardoor hoeft de browser in het begin minder bestanden te downloaden. De pagina kan sneller zichtbaar worden en vooral op mobiel voelt de website vaak lichter aan.

Voor websites met veel beeldmateriaal is dit belangrijk. Denk aan blogs, portfolio’s, webshops, galerijen en landingspagina’s. Als alle afbeeldingen meteen worden geladen, kan de pagina traag worden. Door lazy loading slim te gebruiken, beperk je het eerste dataverbruik en verbeter je de gebruikservaring.

In WordPress wordt lazy loading standaard toegepast op veel afbeeldingen. Toch is het goed om dit te controleren, omdat je thema, pagebuilder of optimalisatieplugin invloed kan hebben op de werking. Plugins zoals WP Rocket, LiteSpeed Cache, Autoptimize, Smush, ShortPixel of Imagify kunnen lazy loading ook beheren of uitbreiden. Gebruik alleen niet meerdere plugins tegelijk voor exact dezelfde functie, want dan kunnen instellingen elkaar tegenwerken.

Lazy loading kan indirect ook goed zijn voor SEO. Google kijkt namelijk niet alleen naar de inhoud van een pagina, maar ook naar de gebruikservaring. Een pagina die sneller zichtbaar is, werkt prettiger voor bezoekers. Dat kan helpen om afhakers te verminderen, vooral op mobiele apparaten.

Gebruik lazy loading vooral voor afbeeldingen die niet meteen zichtbaar zijn. De belangrijkste afbeelding bovenaan de pagina, bijvoorbeeld een hero-afbeelding of de eerste grote afbeelding in een artikel, moet je meestal niet lui laten laden. Die afbeelding is vaak direct zichtbaar en moet juist snel worden getoond. Als die te laat verschijnt, voelt de pagina alsnog traag aan.

Let op Core Web Vitals

Google PageSpeed Insights is een handige tool om te controleren hoe goed je pagina technisch presteert. Wil je beter begrijpen hoe je PageSpeed Insights gebruikt en welke verbeterpunten echt belangrijk zijn? Lees dan ook: Google PageSpeed Insights en hoe je jouw website sneller maakt.

De tool laat zien welke onderdelen je website vertragen en geeft vaak duidelijke meldingen over afbeeldingen. Denk aan afbeeldingen die te groot zijn, verkeerd worden geschaald, niet goed zijn gecomprimeerd of nog in een ouder formaat zoals JPG of PNG staan terwijl WebP of AVIF beter zou zijn.

Afbeeldingen hebben veel invloed op de snelheid van een website. Vooral de grootste afbeelding bovenaan een pagina kan belangrijk zijn. Dit is vaak een hero-afbeelding, banner of grote afbeelding bij het begin van een artikel. Als deze afbeelding te zwaar is of te laat wordt geladen, kan dat invloed hebben op Largest Contentful Paint, een belangrijk onderdeel van Core Web Vitals.

Core Web Vitals zijn metingen waarmee Google kijkt naar de technische ervaring van een pagina. Bij afbeeldingen gaat het vooral om hoe snel de belangrijkste zichtbare content wordt geladen en of de pagina stabiel blijft tijdens het laden. Als een grote afbeelding bovenaan langzaam verschijnt, krijgt de bezoeker sneller het gevoel dat de website traag is.

PageSpeed Insights kan bijvoorbeeld meldingen geven zoals dat afbeeldingen beter gecomprimeerd moeten worden, dat afbeeldingen in moderne formaten aangeboden kunnen worden of dat afbeeldingen niet groter mogen zijn dan nodig. Als een afbeelding op je website maar 800 pixels breed wordt getoond, heeft het weinig zin om een bestand van 3000 pixels breed te laden. Dat kost onnodig veel data.

Voor grote visuele onderdelen zijn WebP en AVIF vaak betere keuzes dan zware PNG-bestanden. PNG is handig voor transparantie en scherpe grafische elementen, maar voor grote foto’s is het meestal te zwaar. Door afbeeldingen te verkleinen, te comprimeren en in het juiste formaat op te slaan, kun je de laadtijd vaak flink verbeteren.

Bij belangrijke afbeeldingen bovenaan de pagina moet je extra voorzichtig zijn. Die afbeeldingen moeten snel geladen worden en mogen niet onnodig worden vertraagd door verkeerde instellingen. Afbeeldingen lager op de pagina kun je juist wel goed combineren met lazy loading.

Het doel is niet om blind achter een perfecte score aan te rennen. Daar zijn mensen al genoeg zenuwachtig van geworden. Het belangrijkste is dat je begrijpt welke afbeeldingen je website vertragen en dat je de grootste problemen oplost. Een lichtere afbeelding, het juiste bestandsformaat en een betere manier van laden kunnen samen veel verschil maken voor snelheid, gebruikservaring en SEO.

Veelgemaakte fouten bij afbeeldingsformaten

Veel websites worden trager of minder goed weergegeven door kleine fouten met afbeeldingen. Het probleem zit meestal niet in één afbeelding, maar in de manier waarop afbeeldingen worden opgeslagen, geüpload en gebruikt. Een verkeerd bestandsformaat kan zorgen voor een grote bestandsgrootte, onscherpe beelden of zelfs veiligheidsrisico’s.

Een veelgemaakte fout is het uploaden van veel te grote afbeeldingen. Een foto die rechtstreeks van een camera of telefoon komt, kan meerdere megabytes groot zijn. Als zo’n foto zonder verkleining of compressie op een website wordt geplaatst, moet de browser veel meer data laden dan nodig is. Daardoor wordt de pagina trager. Verklein afbeeldingen daarom eerst naar het formaat waarin ze echt worden getoond en comprimeer ze daarna met een goede afbeelding optimalisatie tool of WordPress-plugin.

Een tweede fout is PNG gebruiken voor grote foto’s. PNG is sterk bij transparantie, screenshots, iconen en afbeeldingen met scherpe lijnen, maar voor grote foto’s is het vaak te zwaar. Een normale foto in PNG kan veel groter worden dan dezelfde foto in JPG, WebP of AVIF. Voor foto’s op een website zijn WebP, AVIF of JPG meestal een betere keuze.

Een derde fout is JPG gebruiken voor logo’s, iconen of afbeeldingen met tekst. JPG gebruikt compressie met kwaliteitsverlies. Daardoor kunnen randen, letters en dunne lijnen wazig worden. Voor logo’s en iconen is SVG meestal beter, omdat dit formaat scherp blijft op elk scherm. Als SVG niet mogelijk is, kun je PNG gebruiken, vooral wanneer je een transparante achtergrond nodig hebt.

Een vierde fout is vergeten om afbeeldingen om te zetten naar moderne formaten zoals WebP of AVIF. Veel websites gebruiken nog zware JPG- en PNG-bestanden terwijl dezelfde afbeelding in WebP of AVIF vaak veel kleiner kan zijn. Dat helpt vooral bij blogs, portfolio’s en webshops waar veel afbeeldingen op één pagina staan. Controleer wel altijd of je website, hosting en optimalisatieplugin het gekozen formaat goed ondersteunen.

Een vijfde fout is denken dat één afbeeldingsformaat overal goed voor is. Dat werkt in de praktijk bijna nooit. Een foto, logo, screenshot, animatie en drukbestand hebben allemaal een ander doel. Voor foto’s kies je vaak WebP, AVIF of JPG. Voor logo’s en iconen kies je meestal SVG. Voor screenshots met tekst is PNG of WebP vaak beter. Voor drukwerk gebruik je eerder PDF, TIFF, EPS of AI.

Een zesde fout is oude werkbestanden online zetten, zoals PSD, AI, TIFF, INDD of RAW. Deze bestanden zijn bedoeld voor ontwerp, fotografie, bewerking of drukwerk. Ze zijn meestal veel te groot en worden niet goed weergegeven als normale webafbeelding. Wil je zo’n bestand op je website gebruiken, exporteer het dan eerst naar een webvriendelijk formaat zoals WebP, AVIF, JPG, PNG of SVG.

Een zevende fout is SVG-bestanden gebruiken zonder controle. SVG is handig voor logo’s en iconen, maar het is geen gewone afbeelding zoals JPG of PNG. Een SVG-bestand is opgebouwd uit XML-code. Daardoor kan een SVG naast vormen en kleuren ook ongewenste code, scripts of externe verwijzingen bevatten. Als zo’n bestand niet veilig is, kan het in sommige situaties misbruikt worden voor aanvallen op je website of bezoekers.

Wil je je WordPress-website beter beschermen tegen onveilige bestanden, plugins en andere risico’s? Lees dan ook: WordPress beveiliging: 23 tips om je website te beschermen.

Daarom moet je SVG-bestanden alleen gebruiken als je weet waar ze vandaan komen. Gebruik bij voorkeur SVG’s die je zelf hebt geëxporteerd uit betrouwbare ontwerpsoftware zoals Figma, Adobe Illustrator of een vergelijkbaar programma. Download geen willekeurige SVG-bestanden van onbekende websites. Werk je met WordPress, gebruik dan alleen een betrouwbare oplossing die SVG-bestanden opschoont voordat ze worden geüpload. Beperk ook wie SVG-bestanden mag uploaden. Voor de meeste websites is het verstandig om dit alleen toe te staan voor beheerders of mensen die met het ontwerp werken.

Een achtste fout is vergeten om alt-teksten goed in te vullen. Een afbeelding zonder duidelijke alt-tekst is minder toegankelijk voor bezoekers die een schermlezer gebruiken. Ook begrijpt Google minder goed wat er op de afbeelding staat. Schrijf daarom een korte, duidelijke omschrijving van de afbeelding. Gebruik een zoekwoord alleen als het natuurlijk past bij de afbeelding.

Een negende fout is dezelfde afbeelding meerdere keren in verschillende formaten uploaden zonder overzicht. Daardoor raakt de mediabibliotheek snel rommelig en weet je later niet meer welk bestand de juiste versie is. Geef afbeeldingen daarom duidelijke bestandsnamen, bijvoorbeeld wordpress-website-sneller-maken.webp in plaats van IMG_4829.jpg. Dat werkt net iets minder chaotisch, wat voor een websitebeheerder al bijna luxe is.

Een tiende fout is alleen naar kwaliteit kijken en niet naar bestandsgrootte. Een afbeelding hoeft niet altijd op maximale kwaliteit te staan om er goed uit te zien op een website. Vaak kun je de bestandsgrootte flink verlagen zonder zichtbaar kwaliteitsverlies. Test daarom altijd hoe de afbeelding eruitziet na compressie en controleer daarna de laadsnelheid van de pagina.

Conclusie

Soorten afbeeldingsformaten lijken misschien een technisch detail, maar ze hebben direct invloed op de snelheid, kwaliteit en gebruiksvriendelijkheid van je website. Een verkeerd gekozen afbeelding kan een pagina onnodig zwaar maken. Een goed gekozen formaat zorgt juist voor scherpe beelden, snellere laadtijden en een betere ervaring voor bezoekers.

Voor de meeste moderne websites zijn WebP en AVIF sterke keuzes voor foto’s en grote afbeeldingen. JPG blijft bruikbaar als fallback of eenvoudige foto-oplossing. PNG gebruik je vooral voor transparantie, screenshots en scherpe grafische elementen. SVG is ideaal voor logo’s en iconen. Formaten zoals TIFF, PSD, AI, EPS, INDD en RAW zijn vooral bedoeld voor ontwerp, fotografie of drukwerk, niet voor directe publicatie op een website.

Kies dus niet zomaar een formaat omdat het toevallig uit je programma komt rollen. Kijk naar het doel van de afbeelding, de gewenste kwaliteit, de bestandsgrootte en waar je het bestand wilt gebruiken. Dat scheelt laadtijd, opslagruimte en uiteindelijk ook frustratie. En daar heeft het internet eerlijk gezegd al genoeg van.

Veelgestelde vragen

1. Wat is het beste afbeeldingsformaat voor een website?

Voor de meeste websites is WebP een goede standaardkeuze. Het biedt goede kwaliteit met een lagere bestandsgrootte dan JPG of PNG. Voor grote foto’s kan AVIF nog efficiënter zijn, als je website en hosting dit goed ondersteunen.

2. Wat is het verschil tussen JPG en JPEG?

JPG en JPEG zijn hetzelfde formaat. Het verschil zit alleen in de extensie. JPG werd vroeger veel gebruikt omdat sommige systemen maar drie letters toestonden voor bestandsextensies.

3. Wanneer gebruik je PNG?

PNG gebruik je vooral voor afbeeldingen met transparantie, screenshots, iconen of beelden met tekst en scherpe lijnen. Voor grote foto’s is PNG meestal te zwaar.

4. Is WebP beter dan JPG?

Voor webgebruik is WebP vaak beter dan JPG, omdat het meestal kleinere bestanden oplevert bij vergelijkbare kwaliteit. JPG blijft wel handig als fallback en wordt overal ondersteund.

5. Is AVIF beter dan WebP?

AVIF kan vaak kleinere bestanden maken dan WebP, vooral bij foto’s. Toch is WebP in de praktijk soms makkelijker en sneller te gebruiken. Voor veel websites werkt een combinatie goed: AVIF waar mogelijk, WebP of JPG als fallback.

6. Welk formaat gebruik je voor een logo?

Voor een logo is SVG meestal de beste keuze. Het blijft scherp op elk schermformaat en is vaak klein. Als SVG niet mogelijk is, kun je PNG gebruiken met een transparante achtergrond.

7. Kan ik SVG gebruiken in WordPress?

Ja, maar niet altijd standaard. WordPress blokkeert SVG-upload vaak om veiligheidsredenen. Je kunt SVG gebruiken met een veilige instelling of betrouwbare plugin, maar controleer altijd of het bestand schoon is.

8. Welk afbeeldingsformaat is geschikt voor drukwerk?

Voor drukwerk gebruik je meestal PDF, TIFF, EPS of AI. Deze formaten bewaren kwaliteit beter en zijn geschikt voor professionele productie. WebP en AVIF zijn vooral bedoeld voor websites, niet voor drukwerk.

9. Zijn RAW-bestanden geschikt voor websites?

Nee, RAW-bestanden zijn bedoeld voor professionele fotobewerking. Ze zijn groot en worden niet normaal door browsers weergegeven. Voor websites exporteer je RAW-foto’s naar WebP, AVIF of JPG.

10. Waarom zijn afbeeldingen belangrijk voor SEO?

Afbeeldingen hebben invloed op laadsnelheid, gebruikservaring, toegankelijkheid en vindbaarheid via Google Afbeeldingen. Door afbeeldingen te optimaliseren, alt-teksten goed te schrijven en het juiste bestandsformaat te kiezen, maak je je website sterker.

11. Moet ik bestaande afbeeldingen omzetten naar WebP of AVIF?

Dat kan zeker zinvol zijn, vooral als je website veel zware JPG- of PNG-bestanden gebruikt. Controleer wel of je originele bestanden veilig blijven opgeslagen en test of alle afbeeldingen goed worden weergegeven na conversie.