Afbeeldingen zijn op de meeste sites goed voor twee derde van het gewicht van een pagina. Wie daar iets aan doet, wint meer dan met welke plugin dan ook. De vraag die dan opduikt is of u avif of webp moet gebruiken, of dat het vertrouwde JPEG het nog prima doet. Het antwoord verschilt per soort afbeelding, en dat is precies waar de meeste adviezen te kort door de bocht gaan.
Hieronder zet ik de vier formaten die ertoe doen naast elkaar, met wat u er in de praktijk mee wint en waar de haken zitten.
De vier formaten in het kort
JPEG bestaat sinds de jaren negentig en werkt overal. Het is gemaakt voor foto’s en gooit informatie weg die het oog toch niet mist. Nadeel: geen doorzichtige achtergrond, en bij sterke compressie ziet u blokjes rond scherpe randen.
PNG gooit niets weg en kan wél doorzichtig zijn. Perfect voor logo’s, schermafdrukken en beeld met tekst. Volstrekt ongeschikt voor foto’s: een foto als PNG is al snel vijf keer zo groot als nodig.
WebP stamt uit 2010 en levert bij gelijke kwaliteit ongeveer een kwart tot een derde minder bestandsgrootte dan JPEG. Het kan doorzichtig zijn en ook animaties bevatten. Elke browser die er nog toe doet, ondersteunt het.
AVIF is de nieuwste van het stel en gaat verder: bij dezelfde beeldkwaliteit haalt het vaak nog eens dertig tot vijftig procent onder WebP. Vooral bij grote, vlakke beelden met kleurverlopen is het verschil opvallend.
AVIF of WebP: wat het in echte cijfers scheelt
Neem een typische sfeerfoto voor boven aan een pagina, 1600 pixels breed. In de praktijk komt zo’n foto uit op ruwweg 300 kilobyte als JPEG, rond de 200 als WebP en tussen de 100 en 140 als AVIF. Bij een startpagina met acht van zulke beelden praat u over anderhalve megabyte verschil tussen het oude en het nieuwe formaat.
Op een glasvezelverbinding merkt u dat nauwelijks. Op 4G in de trein is anderhalve megabyte al gauw twee seconden. Dat is meteen het eerlijke antwoord op de vraag of dit de moeite waard is: het hangt af van uw bezoekers, en die zitten vaker op hun telefoon dan u denkt.
Belangrijker dan het formaat is trouwens de afmeting. Een foto van 4000 pixels breed die in een vak van 600 pixels wordt getoond, is als AVIF nog steeds verspilling. Hoe u dat aanpakt staat in het stappenplan voor afbeeldingsmaten per schermgrootte.
Waar u tegenaan loopt
- Oudere apparaten. AVIF wordt niet begrepen door verouderde telefoons en door sommige zakelijke werkplekken met vastgezette browsers. U heeft dus altijd een terugvaloptie nodig.
- Omzetten kost rekenkracht. AVIF maken duurt merkbaar langer dan WebP maken. Op gedeelde hosting kan een bulkconversie van duizend productfoto’s uren duren of stuklopen op een tijdslimiet.
- Niet alle software toont het. Uw ontwerper stuurt u een AVIF-bestand en uw collega kan het niet openen in een oud fotoprogramma. Bewaar uw origineel dus altijd apart.
- Te ver comprimeren wreekt zich. AVIF houdt bij lage kwaliteit netjes stand, maar smeert fijne details uit. Bij een fotograaf of een sieradenwebshop is dat een probleem, bij een aannemersbedrijf niet.
Een vijfde punt dat pas later opspeelt: uw archief. Zet u alles om en gooit u de originelen weg, dan zit u vast aan de kwaliteitsinstelling van vandaag. Wilt u over twee jaar een foto opnieuw gebruiken voor drukwerk of voor een nieuwe indeling, dan heeft u het origineel nodig. Bewaar dat dus buiten de site, bijvoorbeeld in uw eigen mappenstructuur of in een fotodienst, en beschouw de bestanden op uw server als werkkopieën.
De praktische oplossing is het element waarmee een browser zelf kiest: u biedt AVIF aan, met WebP als tweede en JPEG als laatste. Elke serieuze conversieplugin regelt dat automatisch, u hoeft er niets voor te programmeren.
Een keuzeschema dat werkt
- Foto’s (mensen, producten, sfeerbeeld): AVIF met WebP als terugval. Kwaliteit rond de 55 tot 65 procent is doorgaans niet van het origineel te onderscheiden.
- Logo’s, iconen en illustraties met vlakken: geen van deze vier, maar SVG. Dat schaalt oneindig en weegt vaak minder dan twee kilobyte. Meer daarover in het artikel over iconen als SVG.
- Schermafdrukken en beeld met leesbare tekst: PNG, of WebP zonder verlies. AVIF met verlies maakt letters wazig.
- Beeld met een doorzichtige achtergrond: WebP of AVIF, allebei geschikt. PNG alleen als het echt om scherpe lijnen gaat.
- E-mailnieuwsbrieven: gewoon JPEG of PNG. Mailprogramma’s zijn hier jaren achter en tonen moderne formaten vaak niet.
Hoe u het in WordPress regelt
WordPress kan sinds versie 5.8 overweg met WebP, en nieuwere versies ondersteunen ook AVIF, mits uw server de juiste beeldbibliotheek aan boord heeft. Dat laatste is de horde: op goedkope pakketten ontbreekt die soms. U ziet dat aan een foutmelding bij het uploaden, of doordat het bestand wel wordt geüpload maar geen miniaturen krijgt.
De gebruikelijke werkwijze is een conversieplugin die uw bestaande bibliotheek omzet en nieuwe uploads automatisch meeneemt, met behoud van het origineel. Draai zo’n bulkconversie nooit zonder verse back-up, en start met een map van vijftig afbeeldingen om te zien of alles er nog goed uitziet.
Wanneer u dit gewoon kunt laten
Heeft u een site met twintig pagina’s, weegt uw zwaarste pagina achthonderd kilobyte en laadt alles binnen anderhalve seconde? Dan verandert een overstap naar AVIF weinig aan uw omzet en veel aan uw agenda. Er zijn dan zinniger dingen te doen.
Wordt het wel interessant, dan is de volgorde: eerst afmetingen terugbrengen, dan comprimeren, dan pas van formaat wisselen. In onze werkwijze om paginagewicht stap voor stap terug te brengen staat beeld daarom altijd bovenaan, omdat daar de grootste en makkelijkste winst zit. Bij WebMaintor halveren we op die manier regelmatig het gewicht van een startpagina zonder dat iemand ziet dat er iets is veranderd.
Concrete volgende stap: open uw startpagina, klik met de rechtermuisknop op de grootste foto en bekijk hoe zwaar die is. Zit u boven de 300 kilobyte voor één beeld, dan heeft u uw eerste taak te pakken.
