Website

De 5 belangrijkste afbeeldingstypen en wanneer gebruik je ze…

3 min 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.

De 5 belangrijkste afbeeldingstypen en wanneer gebruik je ze…

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!

Ook interessant

Wireframe, een solide basis voor je website
2 min leestijd

Wireframe, een solide basis voor je website

Website: De website ontwikkeling bij Nederdesign gaat via een structureel traject. Bij de website ontwikkeling starten we met een wireframe. Maar wat is dit precies en hoe ‘lees’ je deze?

Lees meer
Visuele hiërarchie
2 min leestijd

Visuele hiërarchie

Website: Hiërarchie is belangrijk in een website. Binnen één oogopslag moet duidelijk zijn wat het meest belangrijk is op de website. Visueel doe je dit met (tekst)grootte, kleuren en meer.

Lees meer
Iconen, musthaves op je website
5 min leestijd

Iconen, musthaves op je website

Website: Iconen zijn onderdeel van je website. Of het nu gaat over een idee op papier, een digitaal prototype of een website die live staat.

Lees meer
Bekijk alle berichten