Afbeeldingen toevoegen en optimaliseren in WordPress

Afbeeldingen maken jouw website niet alleen aantrekkelijker, maar ook duidelijker en persoonlijker. Daar staat tegenover dat ze een website ook flink kunnen vertragen. Daarom is het belangrijk om afbeeldingen te optimaliseren voor je ze aan WordPress toevoegt.

Afbeeldingen toevoegen 

Afbeeldingen aan WordPress toevoegen, doe je normaal met slepen en loslaten. Tenzij je het anders hebt ingesteld, komen de afbeelding daarna altijd op dezelfde plaats terecht: in de Mediabibliotheek van WordPress. 

Afbeeldingsblok gebruiken

De standaard blokeditor van WordPress (Gutenberg) laat je met klikken en slepen afbeeldingen aan berichten toevoegen. Als je meer controle wilt, kun je op het plusje naast of onder een bestaand blok klikken en ‘Afbeelding’ kiezen. Dan krijg je drie opties: een afbeelding uploaden vanaf je computer, een afbeelding selecteren uit de Mediabibliotheek of een externe URL gebruiken.

De eerste twee keuzes spreken voor zich (je haalt het beeld van jouw computer of uit de Mediabibliotheek). Gebruik je een externe URL als bron van een afbeelding? Let dan op: die afbeelding wordt niet in jouw mediabibliotheek bewaard. Haalt de externe site het beeld weg (of wordt de afbeelding aangepast), dan verandert het beeld ook op jouw website. 

Afbeeldingen aanpassen in Gutenberg

Als een afbeelding is toegevoegd, kun je in Gutenberg (via het rechterpaneel) deze via instellingen aanpassen. Een van de opties die je hier vindt, is de afbeeldingsgrootte. Dat leidt nog wel eens tot verwarring. Als je via Gutenberg aangeeft hoe groot een afbeelding moet zijn, pas je alleen de weergave op de site aan, niet de omvang van het bestand. Maak je van een digitale foto een thumbnail, dan blijf je een heel groot bestand houden. Dat heeft gevolgen voor de snelheid van je website. 

Grote afbeeldingen veroorzaken problemen

Teruggebracht naar de essentie, is een webpagina niet veel meer dan een verzameling beeld-, tekst- en configuratiebestanden. WordPress stuurt de bestanden naar jouw browser. De browser voegt ze samen en jij ziet een webpagina. Hoe meer bestanden er zijn, en hoe groter ze zijn, hoe langer het duurt je de webpagina ziet. 

Bezoekers wachten niet (en zoekmachines ook niet)

Als webpagina’s te groot zijn, heeft dat gevolgen. Gemiddeld haakt 40% van de bezoekers na 3 seconden wachten af. Bij wachttijden tussen de 4 en 5 seconden stijgt dat percentage naar 90%. Zoekmachines houden hier rekening mee. Trage sites scoren slecht. 

Vertraging door bestandsgrootte 

Afbeeldingen spelen een belangrijke rol bij de laadtijd van een website. Als je uitgaat van een goede glasvezelverbinding, dan kost het ongeveer 8ms om een afbeelding van 100KB te laden een afbeelding van 3MB heeft 240ms nodig. Heb je vier grote afbeeldingen op één pagina? Dan stijgt de laadtijd bij een perfecte verbinding in theorie al met (bijna) 1 seconde. Maar daar dat is niet het enige probleem. Er is ook meer tijd nodig om grote afbeeldingen te verwerken en te tonen, zeker op oudere apparaten en mobiele telefoons. In de praktijk gaat de laadtijd waarschijnlijk met meer dan 1 seconde omhoog. 

Afbeeldingen optimaliseren

Op de meeste websites zijn de grootste bestanden afbeeldingen. Zeker in WordPress, waar je met klikken en slepen beeld kan toevoegen, worden vaak (onbewust) grote afbeelden gebruikt. Mensen slepen een foto van het mobieltje zo naar de blog. Dat is jammer, want afbeeldingen optimaliseren levert snelheidswinst, betere zoekresultaten én meer bezoekers op. Je kunt de optimalisatie van afbeeldingen in WordPress op verschillende manieren aanpakken. Dat begint met beeldbewerking.

Beeld optimaliseren voor WordPress? Gebruik een beeldbewerker 

Als je een afbeelding in Gutenberg verkleint, verandert alleen de weergave, niet de daadwerkelijke bestandsgrootte. WordPress bevat ook een eigen beeldbewerker. Als je hiermee afbeeldingen schaalt, worden de bestanden wel kleiner. Een toepassing als Adobe Photoshop is handiger. Hier kun je ook andere beeldoptimalisaties mee uitvoeren (het bestandstype aanpassen bijvoorbeeld). Zoek je een alternatief op Photoshop? Probeer dan Affinity Photo 2 eens. Wil je liever een gratis optie? Kijk dan eens naar Photopea. 

Afbeeldingsgrootte doorgronden

Voor afbeeldingsgrootte worden twee maten gebruikt: resolutie en bestandsgrootte. Beiden hebben invloed op de laadtijd. 

Resolutie

De resolutie geeft de omvang in pixels (beeldpunten) in de breedte en in de hoogte aan. Een thumbnail van 150x150 is 150 pixels breed en 150 pixels hoog. Een grote foto op een blog is kan 1200x628 zijn, een gemiddelde foto 600x400. De resolutie van foto’s die een moderne mobiele telefoon neemt, is al snel 4000x3000 pixels. 

Bestandsgrootte

Naast de resolutie heeft een afbeelding ook een bestandsgrootte. Die geven we aan in KB (Kilobytes) of MB (Megabytes). De bestandsgrootte geeft aan hoeveel ruimte de afbeelding inneemt op de opslag (en hoeveel bytes er verzonden moeten worden als iemand de webpagina bezoekt). De resolutie bepaalt de bestandsgrootte voor een groot deel, maar andere factoren (zoals bestandsformaat) spelen ook een rol. 

De juiste resolutie kiezen

De juiste resolutie van een afbeelding hangt af van de functie. Een thumbnail moet klein zijn, maar een productfoto of ‘hero’ foto moet juist groot zijn. Het is handig om in je achterhoofd te houden dat de meeste moderne monitors een resolutie van 1920x1080 (Full HD) hebben. De resolutie van professionele, high-end schermen (4K) is 3840x2160. Smartphones hebben resoluties van 2340x1080 tot aan 3200x1440 pixels, maar tonen webpagina’s op zogenaamde CSS-resoluties. Die zitten tussen 360x800 en 414x896 pixels.

Foto’s en afbeeldingen op websites zijn vaak te groot; een foto van 4000x3000 pixels is groter dan de grootste, professionele monitor. Om ruimte te besparen, ligt het voor de hand om de resolutie te verkleinen. Als je die halveert, wordt het aantal pixels van een afbeelding vier keer zo klein. Dat komt omdat je gelijktijdig de hoogte én de breedte aanpast. 4000x3000 pixels=12.000.000 pixels. Als je dat terugbrengt naar 2000x1500 pixels, hou je 3.000.000 pixels over. Tel uit je winst.

Het juiste bestandsformaat gebruiken

De omvang van een afbeelding in KB (of MB) is niet alleen afhankelijk van de resolutie. Een andere belangrijke factor is het bestandsformaat. Sommige formaten (TIFF) zijn heel goed om afbeeldingen zo zuiver mogelijk te bewaren. Dat is handig voor vormgevers en drukkers, maar niet voor webmasters. Andere formaten gaan juist heel efficiënt met het opslagformaat van afbeeldingen om. Afhankelijk van het type afbeelding kun je het beste één van de volgende formaten gebruiken.

• Foto’s – Gebruik bij voorkeur het efficiënte WebP. Als je dit formaat niet kunt opslaan, is het oudere JPEG een goed alternatief. 
• Logo’s en illustraties – als je een SVG-bestand hebt, is dit het beste. PNG (geoptimaliseerd) is een uitstekend alternatief.

Gebruik geen JPEG voor illustraties en logo’s. De manier waarop dit bestandsformaat ruimte bespaart, maakt tekeningen vlekkerig. PNG is niet praktisch voor foto’s omdat het de grote hoeveelheid kleuren en vormen niet effectief kan verkleinen. 

Hoe groot mag een afbeelding zijn?

Hou de volgende richtlijnen aan als je afbeeldingen aan het verkleinen bent:

• Thumbnails en pictogrammen: 10–50 KB
• Kleine afbeeldingen: 50–150 KB
• Middelgrote afbeeldingen zoals productfoto’s, headers: 150–300 KB
• Grote ‘hero’ afbeeldingen en full-screen achtergronden: 300–800 KB

Andere manieren om afbeeldingen te optimaliseren

Bestanden op maat maken is de effectiefste manier om afbeeldingen te optimaliseren. Maar het is niet de enige manier. Je hebt nog wat middelen ter beschikking.

Lazy loading

Lazy loading zet je aan door loading="lazy" aan een <img>-tag toe te voegen (of gewoon via Gutenberg). Het zorgt dat browsers een afbeelding pas laden als die in beeld komt. Pagina’s die veel afbeeldingen bevatten, komen zo sneller in beeld. Let wel op: als je lazy loading gebruikt voor een afbeelding die direct moet verschijnen (bijvoorbeeld de header van je pagina) werkt het averechts. 

Responsive images

Je kunt in de <img>-tag met srcset= (of via Gutenberg) opdracht geven om een andere afbeelding te sturen op basis van de schermgrootte en resolutie van de bezoeker. Daarmee zorg je dat iemand op een mobiele telefoon automatisch een kleiner bestand ontvangt dan een bezoeker met een 4K-monitor. 

Image CDN

Een image CDN (Content Delivery Network) is een dienst die afbeeldingen optimaliseert en automatisch vanaf servers dicht bij de bezoeker aanlevert. Een CDN zorgt voor snellere laadtijden, kleinere bestanden en betere prestaties. Dit kan via een plugin zoals Cloudflare, Jetpack, ShortPixel AI of Cloudinary, of door een CDN te koppelen aan jouw hostingprovider. 

Inline Base64

Kleine beeldbestanden zoals thumbnails kun je omzetten in tekstcode (Base64). Je kunt ze dan direct in HTML en CSS plaatsen. Omdat er geen apart HTTP-verzoek nodig is om dit beeld te laden, gaat de laadtijd omlaag. Je zet het aan door een afbeelding te converteren naar Base64 (bijvoorbeeld via base64-image.de) en de code te gebruiken.

WordPress plugins voor beeldoptimalisatie

WordPress zou WordPress niet zijn als je geen plugins voor beeldoptimalisatie had. Dit zijn een paar handige opties: 

• ShortPixel Image Optimizer – Optimaliseert beeldbestanden die je upload automatisch en loopt je bestaande bestanden na.  Ondersteunt WebP, AVIF en verschillende compressieniveaus.
• Smush – Deze gebruiksvriendelijke plugin verkleint afbeeldingen automatisch en optimaliseert wat je al hebt. Ondersteunt lazy loading en WebP.
• Imagify – Optimaliseert afbeeldingen automatisch en in bulk. Biedt ondersteuning voor WebP en meerdere compressieniveaus.
• EWWW Image Optimizer – Optimaliseert afbeeldingen zowel lokaal als via hun cloudservice. Ondersteunt WebP, EXIF-verwijdering en automatische compressie.
• Robin Image Optimizer – Lichtgewicht en gratis plugin die je bestaande mediabibliotheek optimaliseert via een externe dienst. 

Maak optimaal gebruik van jouw afbeeldingen in WordPress

Afbeeldingen helpen je om je boodschap over te brengen. Maar dan moet je ze wel goed gebruiken. WordPress laat je eenvoudig beeld aan je website toevoegen. Afbeeldingen optimaliseren vraagt iets meer moeite. Neem daar de tijd voor. Dat maakt jouw bezoekers blij en verbetert de vindbaarheid van jouw website zodat die kan groeien. Heb je vragen over WordPress-optimalisaties? Neem contact met ons op! We denken graag met je mee.