Voor foto's op je website is WebP meestal de beste keuze: het bestand is kleiner dan een JPG bij vergelijkbare kwaliteit, waardoor je site sneller laadt. JPG blijft een prima alternatief, PNG gebruik je alleen als een afbeelding een transparante achtergrond nodig heeft, zoals een logo.
Waarom het bestandsformaat van je foto's ertoe doet
Een foto op je website is meer dan een plaatje: het is ook een bestand dat eerst gedownload moet worden voordat een bezoeker hem ziet. Hoe groter dat bestand, hoe langer dat duurt, zeker op een mobiele verbinding onderweg. Een paar zware foto's op je homepage kunnen je site merkbaar trager maken, en dat merkt zowel je bezoeker als Google. Het bestandsformaat waarin je een foto opslaat (JPG, PNG of WebP) bepaalt voor een groot deel hoe zwaar dat bestand is, bij gelijke kwaliteit.
Snelheid is geen smaak, het is techniek
Je kunt twee foto's met het blote oog even scherp vinden, terwijl het ene bestand drie keer zo groot is als het andere. Dat verschil zit vrijwel nooit in de foto zelf, maar in hoe hij is opgeslagen. Daar kun je dus winst behalen zonder dat je iets aan de foto hoeft te veranderen of aan kwaliteit hoeft in te leveren.
JPG, PNG en WebP: het verschil in gewone taal
JPG
Het bekendste formaat voor foto's. JPG comprimeert een afbeelding slim: het gooit details weg die het oog nauwelijks opvalt, en levert daarmee een redelijk klein bestand. Voor gewone foto's op je website, zoals je pand, je team of je werk, is JPG al jarenlang een prima standaardkeuze.
PNG
PNG bewaart een afbeelding precies zoals hij is, zonder verlies van detail. Dat is fijn voor een logo of een icoontje met een transparante achtergrond, maar voor een gewone foto betekent het vooral een veel groter bestand dan nodig. Gebruik PNG dus gericht, niet als standaard voor al je beeld.
WebP
Een nieuwer formaat, speciaal ontwikkeld voor het web. WebP combineert het beste van beide: bestanden die net zo klein zijn als een sterk gecomprimeerde JPG, bij een vergelijkbare of betere kwaliteit. Vrijwel alle browsers ondersteunen WebP inmiddels, waardoor het voor foto's meestal de beste keuze is.
Een foto van acht megabyte laadt niet mooier, hij laadt alleen trager.
Welk formaat kies je voor wat
Voor de meeste foto's op je website, zoals hero-beelden, sfeerfoto's en foto's van je werk, is WebP de beste standaardkeuze, met JPG als prima alternatief wanneer WebP om wat voor reden niet beschikbaar is. PNG bewaar je voor beeld dat een transparante achtergrond nodig heeft, zoals een logo of een los icoontje. Voor een logo is trouwens vaak een SVG-bestand nog beter, maar dat is een ander verhaal.
Minstens zo belangrijk als het formaat is de afmeting van de foto in pixels. Een foto die je camera aflevert op 4000 pixels breed, terwijl hij op je website maar 800 pixels breed getoond wordt, is altijd te zwaar, ongeacht het formaat. Zorg dat de afmeting past bij de plek waar de foto getoond wordt, niet bij de resolutie van je camera.
Hoe je dit regelt zonder er zelf een technisch project van te maken
Je hoeft dit als ondernemer niet handmatig uit te zoeken. De meeste moderne websitebouwers, joepa inbegrepen, zetten foto's bij het plaatsen automatisch om naar het lichtste passende formaat en serveren WebP aan browsers die dat ondersteunen, met een JPG erachter als vangnet voor de uitzondering die het niet leest. Wat voor jou overblijft is simpel: lever een foto van goede kwaliteit aan, niet onnodig groot, en laat de techniek de rest doen.
Werk je met een platform waar je dit zelf moet regelen, dan zijn er gratis online tools om een foto naar WebP om te zetten voordat je hem uploadt. Voor een handvol foto's op een bedrijfswebsite is dat met wat uitleg prima zelf te doen, zonder dat je er een studie van hoeft te maken.
Samengevat
- WebP is voor de meeste foto's de beste keuze: klein bestand, goede kwaliteit
- JPG is een prima alternatief voor gewone foto's
- PNG gebruik je alleen bij een afbeelding met transparante achtergrond, zoals een logo
- De afmeting van de foto in pixels telt minstens zo zwaar mee als het formaat
- Een goede websitebouwer regelt de omzetting naar het juiste formaat automatisch