Wat is het verschil met JPG en PNG?
WebP combineert wat jpg en png apart doen. Het comprimeert foto’s zoals jpg en ondersteunt doorzichtigheid zoals png, in een bestand dat kleiner is dan allebei.
Je hoeft dus niet meer te kiezen.
Eén formaat volstaat voor bijna al je beeld.
JPG
Voor foto’s. Comprimeert met verlies, kan niet doorzichtig zijn en geeft rafelige randen bij lijnwerk.
Meer daarover lees je bij pixel.
PNG
Voor lijnwerk en doorzichtigheid. Comprimeert zonder verlies en is daardoor bij foto’s veel te zwaar.
Meer daarover lees je bij svg.
WebP
Kan allebei, en is in beide gevallen lichter. Bij foto’s een kwart tot een derde, bij lijnwerk soms de helft.
Meer daarover lees je bij hoeveel WebP scheelt.
Mijn vuistregels
- Website: WebP.
- E-mail: jpg of png.
- Logo’s en pictogrammen: SVG.
- Bewaar je originelen.
Die derde blijft gelden: WebP vervangt geen vectorformaat.
Wanneer je nog jpg gebruikt
Als een bezoeker een foto moet downloaden, of bij bestanden die je in een e-mail verstuurt.
Meer daarover lees je bij pagespeed.
Wanneer nog png
Bij een schermafdruk met tekst, of als je een bestand aan iemand geeft die WebP niet kan openen.
Meer daarover lees je bij retina.
Wat ik in de praktijk zie misgaan
De grootste winst zit zelden in de keuze van het formaat, maar in het formaat van de afbeelding zelf.
Ik kom bijna wekelijks sites tegen waar foto’s rechtstreeks uit de camera zijn geüpload: vierduizend pixels breed, in een vlak van achthonderd. Dat wordt niet scherper. De browser gooit het overschot gewoon weg, nadat je bezoeker erop heeft zitten wachten.
Op een telefoon met matig bereik is dat het verschil tussen een pagina die meteen staat en een pagina die iemand niet afwacht.
Wat ik daarom als eerste doe bij een bestaande site is alle beelden terugbrengen naar het formaat waarin ze getoond worden, en daarna pas het bestandstype omzetten. In die volgorde, want de eerste stap levert doorgaans meer op dan de tweede.
Samen halveert dat het gewicht van een gemiddelde pagina, zonder dat er iets aan het ontwerp verandert.
Meer daarover lees je bij webp.