De 5 belangrijkste afbeeldingstypen en wanneer gebruik je ze…

18 mei 20213 minuten leestijd

JPG, PNG, GIF, PDF of SVG … je hebt er vast wel eens van gehoord. Maar wat is nu precies het verschil en wanneer kun je welke het beste gebruiken? Want bestanden in deze formaten hebben niet alleen een andere naam, maar ook een andere indeling. Dit wil zeggen dat de afbeeldingen anders zijn bewerkt om de grootte van de afbeelding zo goed mogelijk te maken. En met grootte bedoelen we niet de grootte qua afmetingen, maar qua opslag. In dit artikel leggen we je alles uit over de meest voorkomende afbeeldingsformaten.

JPG-afbeeldingen

We beginnen met een van de meest voorkomende bestandsformaten: JPG-afbeeldingen. Omdat een afbeelding bestaat uit duizenden of soms wel miljoenen gekleurde puntjes (pixels) kan een onbewerkte afbeelding (.RAW) vele MB’s in beslag nemen. Daarom worden deze bestanden voor webpagina’s meestal bewerkt tot JPG-bestanden. Dit is de perfecte indeling voor grotere foto’s die realistisch moeten zijn. Vaak zie je dan .jpg als einde van de bestandsnaam, maar soms zie je ook .jpeg. Dit is echter allebei hetzelfde.

PNG-afbeeldingen

Een andere indeling is PNG. Deze is net als JPG ontworpen voor afbeeldingen, maar het verschil is dat een PNG ook transparante vlakken kan hebben. De afbeelding ziet er dan niet vierkant uit omdat sommige vlakken doorschijnen. Deze indeling is dus perfect voor afbeeldingen waarvan de achtergrond mee moet kleuren met de webpagina, bijvoorbeeld een logo.

TIP: Wil je je PNG-bestand zo klein mogelijk maken? Probeer TinyPNG dan eens. Hier kun je online je bestanden zo klein mogelijk maken zonder kwaliteitsverlies.

GIF-afbeeldingen

Wanneer een afbeelding niet realistisch hoeft te zijn, bijvoorbeeld in het geval van een tekening of animatie, dan is de GIF-indeling een goede optie. Het bestand wordt dan klein gehouden en kan zelfs bewegende beelden bevatten. Een goed voorbeeld zijn de welbekende GIF-filmpjes die regelmatig op social media of op WhatsApp voorkomen. GIF-bestanden bevatten niet veel verschillende kleuren en kunnen dus wat ‘vlekkerig’ worden na bewerking.

SVG-afbeeldingen

Wanneer een afbeelding mee moet kunnen groeien in verschillende afmetingen, zoals bijvoorbeeld in een logo in een nieuwsbrief of als watermerk, kan je het best gebruik maken van de SVG-indeling. Deze indeling is anders ten opzichte van eerdergenoemde formaten, omdat deze niet bestaat uit pixels maar uit lijnen, cirkels en hoeken. Deze indeling kan je dus niet gebruiken voor realistische afbeeldingen of foto’s.

Pdf-bestanden

Om afbeeldingen te delen met anderen en om ervoor te zorgen dat deze er overal hetzelfde uitzien kan je je afbeelding bewerken tot Pdf-bestand. Je voorkomt zo dat je afbeelding er op verschillende apparaten anders uitziet én je kan er ook tekst in verwerken. Zo ziet jouw bijsluiter, instructie of productcatalogus er altijd goed uit.

Conclusie

Wil je een afbeelding veranderen van indeling? Dan is het niet genoeg om alleen de toevoeging aan het einde van de bestandsnaam (extensie) te veranderen, sterker nog; dit zal ervoor zorgen dat je de afbeelding niet meer kan openen. Gebruik in de plaats daarvan je favoriete afbeeldingbewerkingsprogramma zoals Photoshop of Gimp om de indeling te wijzigen. Vergeet vooral niet om de afbeelding kleiner te maken met TinyPNG. Doe je dit op de juiste manier, dan zal je website sneller laden. Iets wat altijd gewaardeerd wordt door bezoekers!

Heb je hulp nodig bij het aanpassen van je afbeeldingen?

Sander Bruggeman

We helpen je graag met het realiseren van jouw online doelstellingen. Neem vandaag contact met ons op voor een kenningsmakingsgesprek!

Neem contact op

Ook interessant:

Maak jouw website slimmer met een API-koppeling
20 september 20223 minuten leestijd

Maak jouw website slimmer met een API-koppeling

Bespaar een hoop tijd én geld door jouw bedrijfsprocessen te automatiseren… Maak jouw website een stuk slimmer door een API-koppeling. Hoe? We helpen je graag!

Lees meer
3 tips voor het ontwerpen van een call-to-action knop
12 september 20222 minuten leestijd

3 tips voor het ontwerpen van een call-to-action knop

Het bedenken van een idee voor je website, dat is niet zo moeilijk. Maar hoe voeg je verschillende elementen samen, zodat je ontwerp optimaal is?

Lees meer
Een must voor elke ontwikkelaar: development tools
6 september 20222 minuten leestijd

Een must voor elke ontwikkelaar: development tools

Hoe werken de development tools van Google Chrome en hoe kan je deze gebruiken om je webapplicatie optimaal te houden? We leggen het je uit in dit artikel!

Lees meer