Wanneer gebruik je Webp, JPG, PNG of SVG?

Het optimaliseren van bestanden is ontzettend belangrijk voor je website. Zijn je foto’s te groot dan heeft dit bijvoorbeeld invloed op de snelheid van het laden van je website. Is je foto te klein of misschien wel van een verkeerd formaat, dan kan deze juist met een onscherpe kwaliteit getoond worden. Iets wat niet professioneel oogt en de uitstraling van de website flink naar beneden kan halen.

Hoe kies je de juiste eigenschappen voor een foto op je website? In dit artikel geven we je meer informatie.

We beginnen met een klein stukje toelichting over het opslaan van foto’s. Zo zijn er diverse bestandstypen. Deze zorgen ervoor dat je foto met een bepaalde kwaliteit of eigenschappen wordt opgeslagen en dus bruikbaar is voor op je website.

De meest gebruikte bestandsformaten zijn:

• WebP (Web Picture)
• JPG/JPEG (Joint Photographic Experts Group)
• PNG (Portable Network Graphic)
• SVG (Scalable Vector Graphics)

Onderstaand nemen we je mee door de verschillende bestandsformaten, zodat jij in het vervolg eenvoudig zelf kunt bepalen welk bestandtypen je het beste kan toepassen;

WebP

WebP-afbeeldingen zijn een afkorting voor Web Picture en wordt ook wel uitgesproken als ‘Weppy’. WebP is een type afbeeldingsformaat dat is gemaakt door Google om websites sneller te laten laden. Simpel gezegd is het een manier om foto’s op het internet te zetten die minder ruimte in beslag nemen dan PNG en JPG. Dat betekent dat een website met veel afbeeldingen sneller zal laden, omdat de afbeeldingen minder zwaar zijn. Google doet dit niet standaard bij iedere afbeelding die je online ziet. De webbouwer moet de website zo configureren dat afbeeldingen automatisch worden geconverteerd naar het WebP-formaat. Dit kan op verschillende manieren worden gedaan, afhankelijk van de gebruikte technologie en tools. Je kunt afbeeldingen overigens ook via Photoshop als WebP bestand opslaan.

JPG/JPEG

JPG is waarschijnlijk het meest bekende bestandsformaat dat gebruikt wordt voor afbeeldingen. Het gebruik van JPG als formaat is breed inzetbaar en de bestanden zijn makkelijk te delen. Heb je een JPG bestand gedownload vanaf een stockfoto website zoals Shutterstock of Getty Images? Dan is de kwaliteit over het algemeen zeer goed. Het nadeel is echter dat de bestandsgrootte vaak niet direct geschikt is voor online gebruik. Met een aantal handige tools, zoals fotoverkleinen.nl, kun je de foto eenvoudig bijsnijden en verkleinen naar een gewenst formaat. Uiteraard kan dit ook met betaalde tools zoals Adobe Photoshop. Door de foto’s te verkleinen voorkom je dat je website onnodig traag wordt.

PNG

Een PNG-bestand is zwaarder dan een JPG-bestand en wordt alleen gebruikt als het belangrijk is dat de afbeelding een transparante achtergrond behoudt. Bijvoorbeeld wanneer je een logo over een foto wil plaatsen. Wanneer er geen transparante achtergrond nodig is, kun je beter een JPG of Webp gebruiken. Deze zijn namelijk lichter van bestandsgrootte met nog steeds een hoge kwaliteit.

SVG

Een SVG gebruik je voor een illustratie en niet voor een foto. Het meest bekende kenmerk van een SVG is dat het als vectorisch bestand perfect schaalbaar is zonder kwaliteitsverlies. Zo zie je SVG’s ook veel terug bij animaties of andere grafische toepassingen, die je website weer net dat beetje extra geven. Een SVG bestand is licht van formaat is en heeft dus weinig MB heeft. Prettig, want dat houdt je website snel. Je kan een SVG bijvoorbeeld gebruiken als logo op je website of als beeldelement op de achtergrond van je website.

Welk formaat kies ik dan voor mijn afbeeldingen?

Welk formaat jij het beste kunt gebruiken is dus voor een groot deel afhankelijk van de plek waar je de afbeelding wilt gebruiken en of het een foto of een illustratie betreft. Voor de meeste websites wordt gebruik gemaakt van een combinatie van zowel PNG, SVG, JPG en WebP bestanden. Met verschillende afbeeldingen in verschillende formaten zorg je ervoor dat jouw website er aantrekkelijk uitziet én goed scoort qua laadtijd.

Benieuwd naar hoe je de afbeeldingen op jouw website nog meer SEO waarde kunt geven?
Bekijk dan onze blog over ALT-teksten en afbeeldingsnamen.