Een bezoeker op een telefoon met een scherm van 390 pixels breed haalt bij veel sites nog steeds een foto van 2000 pixels binnen. Die wordt vervolgens verkleind weergegeven, dus hij ziet er prima uit, maar er is vijf keer zoveel data over de lijn gegaan als nodig. Responsive afbeeldingen wordpress-breed goed instellen is daarom een van de weinige ingrepen waar niemand iets van merkt, behalve de laadtijd.

Het goede nieuws: WordPress doet dit standaard al voor u. Het minder goede nieuws: op de meeste sites is die functie ergens onderweg stukgegaan. Hieronder leest u hoe het hoort te werken, hoe u controleert of dat bij u ook zo is, en wat u doet als het niet klopt.

Responsive afbeeldingen: WordPress regelt het zelf al

Uploadt u een foto, dan maakt WordPress daar automatisch meerdere versies van: een miniatuur, een middelgrote en een grote variant, plus eventueel maten die uw thema toevoegt. In de HTML zet WordPress vervolgens een lijstje van al die versies met hun breedtes, zodat de browser zelf de meest geschikte kiest.

Die keuze maakt de browser op basis van twee dingen: de breedte van het scherm en de schermdichtheid van het apparaat. Een moderne telefoon met een scherp scherm vraagt bijvoorbeeld om ongeveer het dubbele van zijn opgegeven breedte, omdat er twee of drie fysieke beeldpunten op één rekenpunt zitten. Vandaar dat u op mobiel niet met een plaatje van 390 pixels wegkomt: 800 is realistischer.

Het onderdeel dat hier het vaakst ontbreekt heet sizes. Dat is de aanwijzing waarin staat hoe breed de afbeelding op de pagina daadwerkelijk wordt getoond. Klopt die aanwijzing niet, dan gokt de browser verkeerd en kiest hij structureel te groot.

Vijf redenen waarom het bij u misgaat

  • De afbeelding is via een paginabouwer als achtergrond geplaatst. Achtergrondafbeeldingen in CSS kennen geen maatlijst; er wordt altijd één versie geladen, meestal de grootste.
  • Iemand heeft de tussenmaten uitgezet om schijfruimte te besparen. Dan blijft er niets te kiezen over.
  • Het thema heeft de standaardfunctie uitgeschakeld, iets wat oudere gekochte thema’s regelmatig doen.
  • De afbeelding is geüpload toen het thema nog anders was. De nieuwe maten zijn dan nooit gegenereerd voor oude uploads.
  • Er staat een verkeerde sizes-waarde in, bijvoorbeeld altijd honderd procent van de schermbreedte terwijl uw foto in een kolom van een derde staat.

Vooral het eerste punt is hardnekkig. Een grote sfeerafbeelding boven aan de pagina is in Elementor of Divi vaak een sectieachtergrond, en dat is meteen het zwaarste bestand van de hele pagina. Meer over dat soort valkuilen in paginabouwers staat in de vergelijking tussen blokkeneditor en paginabouwer.

Controleren in vier minuten

  1. Open uw startpagina in Chrome, klik met de rechtermuisknop op de grootste afbeelding en kies Inspecteren.
  2. Kijk of er srcset bij het img-element staat, met meerdere breedtes erin. Staat er alleen een enkel adres, dan werkt het niet en heeft u uw antwoord.
  3. Zet in het tabblad Netwerk de weergave op afbeeldingen, kies een mobiel apparaat in de apparaatsimulatie en laad de pagina opnieuw. In de kolom met bestandsgroottes ziet u precies wat er over de lijn ging.
  4. Vergelijk de geladen breedte met de getoonde breedte. Beweeg de muis over de afbeelding in het inspectievenster; Chrome toont dan zowel de natuurlijke als de weergegeven afmeting. Zit daar meer dan een factor twee tussen, dan valt er winst te halen.

Een snellere route is een meettool die de melding “Dien afbeeldingen op de juiste grootte” geeft, met daarachter de mogelijke besparing in kilobytes. Dat lijstje is direct uw werkvoorraad.

Repareren: van makkelijk naar bewerkelijk

Begin met de eenvoudigste ingrepen. In veel gevallen bent u met de eerste twee al klaar.

  1. Genereer ontbrekende maten opnieuw. Er zijn plugins die alle miniaturen van uw bibliotheek opnieuw aanmaken. Draai dat na een themawissel altijd even.
  2. Vervang achtergrondafbeeldingen door echte afbeeldingselementen waar dat kan. In de meeste bouwers is dat een kwestie van een ander blok kiezen.
  3. Beperk de maximale uploadgrootte. Een foto van 6000 pixels breed heeft geen enkel doel; 2000 is voor vrijwel elke site ruim voldoende. Hoe u dat bij collega’s afdwingt, staat in het artikel over uploads met een limiet.
  4. Voeg maten toe die bij uw indeling passen. Heeft u een blogoverzicht met kaarten van 400 pixels breed, dan hoort daar een bijpassende maat bij in plaats van de grote versie.
  5. Corrigeer de sizes-waarde als uw thema die verkeerd invult. Dit is de enige stap waar u echt iemand met kennis van het thema voor nodig heeft.

Let op één ding: elke extra maat betekent extra bestanden op uw server. Bij een webshop met vijfduizend producten en zeven maten per foto praat u over tienduizenden bestanden. Dat is geen ramp, maar het maakt uw back-ups zwaarder en uw migraties langzamer. Kies dus drie of vier maten die u echt gebruikt, in plaats van tien voor de zekerheid.

Wat het oplevert

Op een gemiddelde bedrijfssite met veel beeld zien we het mobiele paginagewicht met veertig tot zestig procent dalen als dit goed staat, zonder dat er ook maar één afbeelding is vervangen. Dat vertaalt zich meestal in een halve tot een hele seconde eerder een bruikbare pagina, en dat is precies het venster waarin bezoekers besluiten of ze blijven.

Bij WebMaintor is dit een van de eerste dingen die we nakijken tijdens een controleronde op het gewicht van uw pagina's, juist omdat het niets aan het ontwerp verandert. Het is onzichtbaar werk met een zichtbaar resultaat.

Concrete volgende stap: open uw startpagina op uw eigen telefoon via een meettool met mobiel profiel en kijk hoeveel megabyte er binnenkomt. Zit u boven de twee megabyte, dan zijn uw afbeeldingen bijna zeker de oorzaak.