Geloof ons, het laatste wat je wil is dat Google een hekel krijgt aan je website. Een manier om Google flink pissig te maken is met een langzame website. Gelukkig kan je zelf veel doen om je website sneller te maken, waaronder het verminderen van de bestandsgrootte van je afbeeldingen. Hierbij is het gevaar dat de kwaliteit van de afbeeldingen achteruitgaat – wat er vervolgens voor zorgt dat je bezoekers de website als minder prettig ervaren. Toch hoeft een vermindering van de afbeeldingskwaliteit niet iets slechts te zijn, zolang je maar niet doorschiet. Er zijn een aantal trucs waarmee je de grootte van je afbeeldingen kan reduceren zónder dat dit ten koste gaat van de kwaliteit – zodat je deze zonder problemen op je website kan plaatsen. Laten we dus snel gaan kijken naar hoe we afbeeldingen kunnen formatteren zonder al te veel aan kwaliteit in te leveren. Daarnaast gaan we in dit artikel kijken hoe je afbeeldingen kan optimaliseren voor het web en voor betere prestaties.

De voordelen van het formatteren van je afbeeldingen

Allereerst, waarom moet je je afbeeldingen überhaupt formatteren? Wat zijn de voordelen? Het optimaliseren van afbeeldingen om de prestaties te verbeteren heeft veel voordelen. Volgens HTTP Archive bestaat het ‘gewicht’ van de gemiddelde webpagina voor 54% uit afbeeldingen (meting: december 2017). Dus als het gaat om het optimaliseren van je WordPress-site, zijn afbeeldingen overduidelijk de eerste plaats waar je moet beginnen! Afbeeldingen zijn wat dit betreft belangrijker dan scripts en lettertypen. Het is dan ook ironisch dat veel website-eigenaren afbeeldingsoptimalisatie over het hoofd zien, terwijl dit een van de gemakkelijkste dingen is om te implementeren.

Gemiddelde bytes per pagina

Gemiddelde bytes per pagina

Laten we eens kijken naar de belangrijkste voordelen.

  • Het zal de laadsnelheid van je pagina’s verbeteren (lees onze casestudy over hoeveel het daadwerkelijk kan schelen). Als je bezoekers te lang moeten wachten op je pagina’s, is de kans groot dat ze weggaan en de website van een concurrent bezoeken. Raadpleeg onze gedetailleerde paginasnelheid-optimalisatiegids voor meer informatie over het optimaliseren van de laadtijd van je pagina’s.
  • Gecombineerd met een goede SEO WordPress plug-in verbetert het je SEO. Je site zal hoger scoren in de resultaten van zoekmachines. Grote bestanden vertragen je site en zoekmachines haten trage sites. Google zal je afbeeldingen waarschijnlijk ook sneller crawlen en indexeren voor Google Image Search. Benieuwd welk percentage van je verkeer afkomstig is van Google Image Search? Je kunt een Google Analytics-segment gebruiken om het verkeer van Google Image Search te checken.
  • Het maken van back-ups zal sneller gaan.
  • Kleinere bestandsgroottes gebruiken minder bandbreedte. Netwerken en browsers zullen dit waarderen.
  • Het vereist minder opslagruimte op je server (dit is afhankelijk van het aantal thumbnails dat je optimaliseert)
Afbeeldingen maken gemiddeld 54% uit van het totale gewicht van een webpagina. 😮 Optimaliseer ze! Click to Tweet

Hoe kan je afbeeldingen optimaliseren voor betere prestaties?

Het einddoel bij het formatteren van afbeeldingen is om de juiste balans te vinden tussen de laagste bestandsgrootte en een acceptabele kwaliteit. Er zijn meerdere manieren om deze optimalisaties uit te voeren. Een van de meest populaire manieren om dit te doen is om de afbeeldingen te comprimeren voordat je ze uploadt naar WordPress. Meestal kan dit worden gedaan in een programma zoals Adobe Photoshop of Affinity Photo. Sommige van deze taken kunnen ook worden uitgevoerd met behulp van plug-ins, waar we hieronder verder op ingaan.

De twee belangrijkste zaken die je moet overwegen, zijn het bestandsformaat en het type compressie dat je gebruikt. Met de juiste combinatie van bestandsindeling en compressietype kan je de afbeeldingsgrootte tot wel 5 keer verkleinen. Je zult moeten experimenteren met elke afbeelding of bestandsindeling om te zien wat het beste werkt.

Kies het juiste bestandsformaat

Zorg dat je het beste bestandstype hebt gekozen, voordat je begint met het modificeren van je afbeeldingen. Er zijn een aantal bestandstypes waar je uit kan kiezen:

  • PNG – produceert afbeeldingen van hogere kwaliteit, maar heeft ook een grotere bestandsgrootte. Oorspronkelijk bedoeld als een lossless afbeeldingsformaat (waarbij geen zichtbare afname in kwaliteit is), hoewel er ook bij dit formaat in sommige gevallen kwaliteitsverlies plaatsvindt (een formaat waarbij kwaliteitsverlies optreedt heet lossy).
  • JPEG – maakt gebruik van lossy en lossless optimalisatie. Je kan het kwaliteitsniveau aanpassen voor een goede balans tussen kwaliteit en bestandsgrootte.
  • GIF – gebruikt slechts 256 kleuren. Het is de beste keuze voor bewegende afbeeldingen. Het maakt uitsluitend gebruik van lossless compressie.

Er zijn een aantal andere, zoals JPEG XR en WebP, maar deze worden niet universeel ondersteund door alle browsers. Idealiter zou je JPEG of JPG gebruiken voor afbeeldingen met veel kleur en PNG voor eenvoudige afbeeldingen.

(Voorgestelde lezing: JPG vs JPEG: inzicht in de meest voorkomende beeldbestandsindeling)

Kwaliteit versus grootte bij compressie

Hier is een voorbeeld van wat kan gebeuren als je een afbeelding te veel comprimeert. De eerste is een zeer lage compressieverhouding, wat resulteert in de hoogste kwaliteit (maar grotere bestandsgrootte). De tweede is het gebruik van een zeer hoge compressieverhouding, wat resulteert in een afbeelding van zeer lage kwaliteit (maar een kleinere bestandsgrootte). Opmerking: de oorspronkelijke afbeelding is 2,06MB.

Lage compressie (hoge kwaliteit) JPG - 590KB

Lage compressie (hoge kwaliteit) JPG – 590KB

Hoge compressie (lage kwaliteit) JPG - 68KB

Hoge compressie (lage kwaliteit) JPG – 68KB

Zoals je kan zien is de eerste afbeelding hierboven 590KB. Dat is vrij groot voor één afbeelding! Het is normaal gesproken het beste als je de totale grootte van een pagina kleiner dan 1 of 2MB houdt. Met een afbeelding van 590KB zijn we al over een kwart daarvan. De tweede afbeelding ziet er overduidelijk verschrikkelijk uit, maar is aan de andere ook maar 68KB groot. Het is denk ik nu wel duidelijk dat je de gulden middenweg wil bewandelen, met aan de ene kant de mate van compressie (kwaliteit) en aan de andere kant de bestandsgrootte.

We hebben de afbeelding opnieuw geoptimaliseerd en nu met een gemiddelde compressieverhouding. Zoals je hieronder kunt zien, ziet de kwaliteit er nu goed uit en is de bestandsgrootte 151 KB, wat acceptabel is voor een foto met een hoge resolutie. Dit is bijna 4x kleiner dan de originele foto. Wil je de beste prestaties, dan wil je simpele PNG-afbeeldingen onder de 100KB houden.

Middelgrote compressie (goede kwaliteit) JPG - 151KB

Middelgrote compressie (goede kwaliteit) JPG – 151KB

Lossy versus lossless optimalisatie

Het is belangrijk om te realiseren dat er twee soorten compressie zijn die je kan gebruiken: lossy en lossless.

Lossy – dit is een filter dat sommige data verwijdert. Dit zal de afbeelding zichtbaar beïnvloeden. Je doet er dus goed aan om voorzichtig te zijn als je deze vorm van compressie gebruikt. De bestandsgrootte kan met een grote hoeveelheid worden verminderd. Je kan programma’s zoals Adobe Photoshop, Affinity Photo of andere editors gebruiken om de kwaliteitsinstellingen van een afbeelding aan te passen. Het voorbeeld dat we hierboven hebben gebruikt, gebruikt lossy compressie.

Lossless – dit is een filter dat de gegevens comprimeert. Dit vermindert de kwaliteit niet, maar vereist wel dat de afbeeldingen worden gedecomprimeerd voordat ze kunnen worden geladen. Je kan op je computer een compressie zonder gegevensverlies uitvoeren met behulp van hulpmiddelen zoals Photoshop, FileOptimizer of ImageOptim.

Het is het beste om te experimenteren met de compressiemethodes om te zien wat het beste werkt voor elke afbeelding of elk formaat. Als je programma de optie aanbiedt om de afbeelding op te slaan als webafbeelding, dan raden wij het aan dit te doen. Dit is in veel editors mogelijk en zorgt ervoor dat aanpassingen gemaakt worden voor een optimale compressie. Je verliest een deel van de kwaliteit, dus experimenteer gerust om de juiste balans te vinden.

Programma’s en tools voor afbeeldingsoptimalisatie

Er zijn veel tools en programma’s beschikbaar, zowel premium als gratis, die je kan gebruiken om je afbeeldingen te optimaliseren. Sommige bieden je de mogelijkheid om je eigen optimalisaties uit te voeren en anderen doen alles voor je. We zijn persoonlijk grote fans van Affinity Photo, vooral omdat deze een lage prijs combineert met een arsenaal aan tools vergelijkbaar met die van Adobe Photoshop.

Een afbeelding comprimeren in Affinity Photo

Een afbeelding comprimeren in Affinity Photo

Hier zijn enkele extra hulpmiddelen en programma’s om te overwegen:

Afbeeldingsdimensies wijzigen

In het verleden was het erg belangrijk dat je afbeeldingen in de juiste dimensies uploadde en dit niet (achteraf) door CSS liet doen. Dit is echter niet langer nodig, omdat WordPress sinds versie 4.4 responsieve afbeeldingen ondersteunt (en niet meer CSS gebruikt om ze kleiner te maken). In feite maakt WordPress van elke geüploade afbeelding kopieën in verschillende groottes aan. Door de beschikbare groottes van een afbeelding op te nemen in een srcset,  kunnen browsers de meest geschikte grootte kiezen en de rest negeren. Bekijk hieronder een voorbeeld van hoe je code er uitziet.

Een voorbeeld van hoe srcset er in de code van een responsieve afbeelding uitziet

Een voorbeeld van hoe srcset er in de code van een responsieve afbeelding uitziet

Met de toename in het aantal HiDPI-schermen, doe je er zeker goed aan om de juiste balans tussen kwaliteit en grootte te vinden. Je kan bijvoorbeeld 2x of 3x de kolom- of div-grootte van je website nemen, wat nog steeds minder is dan de oorspronkelijke grootte. De browser geeft dan de juiste afbeelding weer op basis van de resolutie van het apparaat dat de website opvraagt.

De WordPress-mediabibliotheek maakt thumbnails (lees: miniaturen) aan op basis van je instellingen. Het ongewijzigde origineel wordt echter nog steeds bewaard. Als je de grootte van je afbeeldingen wilt wijzigen en schijfruimte wilt besparen door het origineel niet op te slaan, kan je een gratis plug-in gebruiken zoals Imsanity.

WordPress media-instellingen

WordPress media-instellingen

Met Imsanity kunt je een limiet instellen op alle geüploade afbeeldingen. Hiermee kan je zorgen dat de afbeeldingsgrootte op je website beperkt blijft, terwijl deze toch nog groot genoeg zijn om je website te tonen aan je bezoekers. Imsanity doet zijn ding direct na het uploaden van de afbeelding in WordPress, maar voordat de verwerking plaatsvindt. Hierdoor zijn er geen wijzigingen in hoe WordPress de afbeelding verwerkt, omdat het in feite lijkt alsof je de afbeelding al vóór het uploaden naar een lagere grootte hebt gebracht.

Plug-ins die je kan gebruiken om afbeeldingen te optimaliseren

Gelukkig hoef je met WordPress het formatteren en de compressie niet handmatig uit te voeren. Je kan plug-ins gebruiken om (een deel van) het werk automatisch voor je te doen. Er zijn verschillende plug-ins die afbeeldingsbestanden tijdens het uploaden automatisch optimaliseren. Ze optimaliseren zelfs afbeeldingen die je al hebt geüpload! Dit is een handige functie – vooral als je al een website met afbeeldingen hebt. Hier zijn enkele van de beste plug-ins om je afbeeldingen te formatteren en de prestaties van je website te verhogen.

Het is echter belangrijk dat je deze plug-ins niet blind vertrouwd. Upload bijvoorbeeld geen afbeeldingen van 2MB naar je WordPress-mediabibliotheek. Als je dit doet, ben je in no-time door de schijfruimte van je webhost heen. De beste methode is om het formaat van de afbeelding aan te passen met een tool en deze vervolgens te uploaden. Hierna gebruik je een van de onderstaande plug-ins om het bestand verder te verkleinen.

Imagify Image Optimizer

Imagify Image Optimizer plug-in

Imagify Image Optimizer plug-in

Imagify is gemaakt door hetzelfde team dat ook WP Rocket heeft ontwikkeld. Het is geschikt voor WooCommerce, NextGen Gallery en WP Retina. De plug-in heeft de mogelijkheid om in bulk te optimaliseren en je kan kiezen tussen drie verschillende compressieniveaus: normaal, agressief en ultra. Het heeft ook een herstelfunctie, dus als je niet tevreden bent met de kwaliteit, kun je met één klik de afbeelding herstellen en vervolgens opnieuw comprimeren naar een niveau dat beter aansluit op je behoeften. Er is een gratis en een premium-versie en je bent beperkt tot een limiet van 25MB aan afbeeldingen per maand met een gratis account.

Het verwijderen van de originele afbeelding en het vergroten of verkleinen van je grotere afbeeldingen kan ook met deze plug-in.

Wijzigen van afbeeldingsgrootte in Imagify

Wijzigen van afbeeldingsgrootte in Imagify

Imagify comprimeert de afbeeldingen op hun eigen servers en niet die van jou, wat de prestaties van je website ten goede komt. Imagify zal je WordPress-site dus niet vertragen.

ShortPixel Image Optimizer

ShortPixel plug-in

ShortPixel plug-in

ShortPixel Image Optimizer is een gratis plug-in die 100 afbeeldingen per maand comprimeert en meerdere soorten bestanden aankan, waaronder PNG, JPG, GIF, WebP en zelfs PDF-bestanden. De plug-in doet zowel lossy als lossless compressie en converteert ook CMYK naar RGB. De plug-in transporteert je afbeeldingen en thumbnails naar de cloud om ze te verwerken. Vervolgens brengt hij ze terug naar je website om het originele bestand te vervangen. Hij maakt een back-up van de originele bestanden zodat je ze handmatig kan herstellen als dat nodig blijkt. Hij kan galerijbestanden in bulk converteren en er is geen limiet aan de bestandsgrootte.

Optimole

Optimole plug-in

Optimole plug-in

Optimole is een afbeelding optimalisatie WordPress plugin die automatisch de grootte van jouw afbeeldingen verkleind, zonder dat jij enig werk hoeft te doen. Dit is een groot voordeel als het aankomt op de laadt snelheid van jouw website, doordat het compleet cloud-based is en nooit afbeeldingen groter dan nodig serveert. De plugin geeft de perfecte afbeelding voor de gebruikers viewport en browser weer.

Bovendien biedt de plugin lazy-loading en efficiënte afbeelding vervanging – de plugin verlaagd de kwaliteit wanneer de bezoeker een langzame internetverbinding heeft – dit is een opmerkelijke kwaliteit van deze plugin. De plugin detecteert welke browser de bezoeker gebruikt en serveert WebP indien dit formaat ondersteund wordt.

Alle afbeeldingen die door Optimole gecomprimeerd worden, serveert de plugin via een snelle CDN. Je kunt Optimole gratis uitproberen of upgraden naar een premium pakket als je extra bandbreedte en verwerkingsruimte nodig hebt.

EWWW Image Optimizer Cloud

EWWW Image Optimizer Cloud plugin

EWWW Image Optimizer Cloud plugin

EWWW Image Optimizer Cloud helpt jou om je afbeeldingen kleiner te maken en jouw website sneller te krijgen zonder problemen. Dankzij geen limiet op afmetingen, veel flexibiliteit, standaard instellingen of aangepaste instellingen kun je de plugin helemaal aanpassen naar jouw wensen. Alle EWWW IO gebruikers kunnen de Bulk Optimizer gebruiken om de bestaande afbeeldingen te comprimeren of kunnen gebruik maken van de mediabibliotheek om een selectie te maken van afbeeldingen die zij willen comprimeren.

Extra mappen kunnen worden gescand om ervoor te zorgen dat elke afbeelding op jouw website op een correcte manier is geoptimaliseerd. EWWW IO maakt het zelfs mogelijk afbeeldingen naar een next-generation formaat te converteren zoals WebP of te laten zoeken naar het ideale formaat via een multi-format conversie. Afbeelding compressie begint bij $0.003/afbeelding.

De premium compressie API opent de deur naar een heel nieuw niveau in compressie, zonder in te leveren op kwaliteit. Hiermee kun je PDFs comprimeren en bevat een gemakkelijke 30-dagen afbeeldings backup. De ExactDN feature, welke begint bij $9/maand, wordt geleverd met automatische compressie (geen server-side compressie nodig), automatische verkleining en alle voordelen van een CDN voor een sneller resultaat en meer performance gezien over elk device.

Optimus Image Optimizer

Optimus Image Optimizer plug-in

Optimus Image Optimizer plug-in

De Optimus WordPress Image Optimizer maakt gebruik van lossless compressie om je afbeeldingen te optimaliseren. Om te herhalen: lossless betekent dat je geen kwaliteitsverlies ziet. De plug-in ondersteunt WooCoomerce en multi-site en heeft een handige bulk-optimalisatiefunctie voor mensen met grote mediabibliotheken. De plug-in is ook compatibel met de WP Retina WordPress-plug-in. Er is een gratis en premium-versie. In de premiumversie betaal je per jaar en kan je een onbeperkt aantal afbeeldingen comprimeren. Als je de plug-in combineert met hun Cache Enabler-plug-in, kun je ook eens kijken naar WebP-afbeeldingen, het nieuwe lichtgewicht afbeeldingsformat van Google.

WP Smush

WP Smush plug-in

WP Smush plug-in

WP Smush heeft zowel een gratis als een premium-versie. Sommige afbeeldingsbestanden bevatten verborgen informatie welke door deze plug-in worden verkleind – hierdoor gaat de kwaliteit niet achteruit. De plug-in scant afbeeldingen en verkleint deze terwijl je deze naar de website uploadt. Hij kan ook reeds geüploade afbeeldingen scannen deze verkleinen. Hij kan tot 50 bestanden in bulk verkleinen. Je kan ook handmatig de afbeeldingen verkleinen. De plug-in verkleint JPEG-, GIF- en PNG-afbeeldingstypen. Bestandsgroottes zijn beperkt tot 1MB.

  • De plug-in is compatibel met enkele van de populairste media-bibliotheekplug-ins, zoals WP All Import en WPML.
  • Alle afbeeldoptimalisatie gebeurt met lossless compressietechnieken, waardoor de afbeeldingskwaliteit hoog blijft.
  • Het maakt niet uit in welke map je je afbeeldingen opslaat. Smush vindt ze en comprimeert ze.
  • Smush biedt de mogelijkheid om automatisch de breedte en hoogte in te stellen voor alle afbeeldingen, zodat alle afbeeldingen in dezelfde grootte worden weergegeven.

TinyPNG (ook gecomprimeerde JPG’s)

TinyPNG plug-in

TinyPNG plug-in

TinyPNG maakt gebruik van de diensten van TinyJPG- en TinyPNG (met het gratis account kan je ongeveer 100 afbeeldingen per maand comprimeren) om je JPG- en PNG-afbeeldingen te optimaliseren. Hij comprimeert automatisch nieuwe afbeeldingen en comprimeert ook bestaande afbeeldingen in bulk. De plug-in converteert CMYK naar RBG om ruimte te besparen. Hij comprimeert JPEG-afbeeldingen tot 60% en PNG-afbeeldingen tot 80% zonder zichtbaar verlies van beeldkwaliteit. Er zit geen limiet op de grootte van het bestand.

ImageRecycle

ImageRecycle - Imagine & PDF optimalisatieplug-in

ImageRecycle – Imagine & PDF optimalisatieplug-in

De ImageRecyle-plug-in is een volautomatische afbeeldings- en PDF-optimizer. Deze plug-in richt zich niet alleen op afbeeldingscompressie, maar ook op PDF’s. Een handige functie is de mogelijkheid om de minimale bestandsgrootte voor compressie in te stellen. Als je bijvoorbeeld afbeeldingen 80KB hebt, kan je deze automatisch uitsluiten zodat ze niet gecomprimeerd worden. Dit zorgt ervoor dat afbeeldingen en bestanden niet te vaak worden gecomprimeerd. Er is ook de mogelijkheid tot bulkoptimalisatie en het automatisch aanpassen van de dimensies van de afbeelding. Opmerking: ze hebben een gratis proefperiode van 15 dagen. Daarna zul je moeten betalen, omdat je afbeeldingen worden geüpload en gecomprimeerd met behulp van hun servers. Ze berekenen de kosten niet per maand, maar je betaalt per compressie, beginnend bij $10 voor 10.000 afbeeldingen.

Afbeeldingsoptimalisatie: een casestudy

We hebben besloten om onze eigen kleine casestudy uit te voeren om je te laten zien wat een verschil optimalisatie kan maken op de snelheid van je WordPress-website.

Niet-gecomprimeerde JPG’s

Om te beginnen hebben we 6 ongecomprimeerde JPG’s geüpload naar onze testsite. Stuk voor stuk waren ze groter dan 1MB. (Bekijk de originele niet-gecomprimeerde JPG’s). Vervolgens hebben we 5 tests uitgevoerd via Pingdom en hiervan het gemiddelde genomen. Zoals je kan zien aan de snelheidstest hieronder, bedroeg de totale laadtijd 1.55 seconden en de totale pagina-grootte 14.7MB.

Snelheidstest met niet-gecomprimeerde JPG's

Snelheidstest met niet-gecomprimeerde JPG’s

Gecomprimeerde JPG’s

Vervolgens hebben we de JPG’s gecomprimeerd met de Imagify WordPress-plug-in. Hierbij kozen we de ‘agressieve’ optie. (Bekijk de nieuwe gecomprimeerde JPG’s, die er nog steeds net zo mooi uitzien). Vervolgens hebben we 5 tests uitgevoerd via Pingdom en hiervan het gemiddelde genomen. Zoals je in de onderstaande snelheidstest kunt zien, is onze totale laadtijd teruggebracht tot 476ms en is de pagina nu nog maar 2.9MB groot. Onze totale laadtijd is afgenomen met 54.88% en de paginagrootte is met 80.27% gedaald.

Snelheidstest met gecomprimeerde JPG's

Snelheidstest met gecomprimeerde JPG’s

Er is bijna geen andere optimalisatie te bedenken die je meer dan 50% kortere laadtijden oplevert. Dat is ook de reden waarom afbeeldingsoptimalisatie zo belangrijk is. Daarbij werd het bovenstaande proces allemaal geautomatiseerd door de plug-in. Het is een van de makkelijkste manieren om je WordPress-website enorm te versnellen. De enige andere optimalisatie met een vergelijkbaar groot effect die wij kunnen bedenken, is overstappen naar een andere WordPress-host. Veel klanten die naar Kinsta verhuizen, zien een snelheidsverhoging van meer dan 45%. Stel je eens voor dat je naar Kinsta verhuist en tegelijkertijd je afbeeldingen optimaliseert!

Door je afbeeldingen te optimaliseren, of dat nou met een programma of een WordPress-plug-in gebeurt, kun je ook de waarschuwing ‘Optimize images’ in de Google PageSpeed Insights verhelpen (zie hieronder).

PageSpeed Insights optimize images waarschuwing

PageSpeed Insights optimize images waarschuwing

Mocht je naast bovenstaande waarschuwing nog andere errors tegenkomen wanneer je je website tegen het licht houdt, lees dan ons artikel over Google PageSpeed Insights en onze gedetailleerde Pingdom-handleiding.

SVG’s gebruiken

Een andere aanbeveling is om naast je normale afbeeldingen SVG’s te gebruiken. SVG is een schaalbaar vectorformaat dat uitermate geschikt is voor logo’s, pictogrammen, tekst en eenvoudige afbeeldingen. Hier zijn een paar redenen voor:

  • SVG’s zijn automatisch schaalbaar in zowel browsers als fotobewerkingstools. Dit is een droom voor web- en grafischontwerpers!
  • Google indexeert SVG’s op dezelfde manier als PNG’s en JPG’s, dus je hoeft je geen zorgen hoeft te maken over SEO.
  • SVG’s zijn van oudsher (niet altijd) kleiner in bestandsgrootte dan PNG’s of JPG’s. Dit kan resulteren in snellere laadtijden.

Genki heeft een interessant artikel geschreven waarin hij de grootte van SVG versus PNG versus JPEG vergelijkt. Hieronder staan enkele conclusies uit zijn tests waarin hij de drie verschillende afbeeldingstypen met elkaar vergeleek.

JPG (geoptimaliseerde grootte: 81,4KB)

JPG-afbeelding

JPG-afbeelding

PNG (geoptimaliseerde grootte: 85,1KB)

PNG-afbeelding

PNG-afbeelding

SVG (optimized size: 6.1 KB)

SVG (geoptimaliseerde grootte: 6.1KB)

SVG (geoptimaliseerde grootte: 6.1KB)

Zoals je hierboven kan zien, biedt SVG ten opzichte van JPG een afname in bestandsgrootte van 92.51%. En in vergelijking met PNG zelfs 92.83%. Bekijk onze tutorial over hoe je SVG’s op jouw WordPress-site kan gebruiken.

Aanbevelingen

Hier zijn enkele algemene aanbevelingen voor het optimaliseren van afbeeldingen voor het web:

  • Als je een WordPress-plug-in gebruikt, gebruik dan een die de afbeeldingen comprimeert en optimaliseert op hun servers. Dit vermindert de belasting op je eigen site
  • Gebruik vectorafbeeldingen waar mogelijk, naast PNG’s en JPG’s
  • Gebruik een CDN om afbeeldingen om snel afbeeldingen aan bezoekers over de hele wereld te tonen
  • Verwijder onnodige afbeeldingsgegevens
  • Snijd de witte ruimte bij en gebruik CSS om de lege ruimte op te vullen
  • Gebruik zoveel mogelijk CSS3-effecten
  • Sla uw afbeeldingen op in de juiste afmetingen. Onthoud dat WordPress responsieve afbeeldingen ondersteunen en niet langer CSS gebruikt om het formaat te wijzigen
  • Gebruik webfonts om tekst in afbeeldingen te plaatsen – het ziet er beter uit en het neemt minder ruimte in
  • Gebruik rasterafbeeldingen alleen als je veel vormen en details wilt laten zien
  • Verklein de bit-diepte naar een kleiner kleurenpalet
  • Gebruik waar mogelijk lossy-compressie
  • Experimenteer om de beste instellingen voor elk formaat te vinden
  • Gebruik GIF als je animatie nodig hebt (maar comprimeer je geanimeerde GIF’s)
  • Gebruik PNG als je veel details en hoge resoluties nodig hebt
  • Gebruik JPG voor normale afbeeldingen en screenshots
  • Verwijder onnodige metagegevens
  • Automatiseer het proces zo veel mogelijk
  • In sommige gevallen kan lazy-load een uitkomst bieden, omdat de pagina sneller geladen wordt
  • Sla afbeeldingen op als “geoptimaliseerd voor het web” in tools zoals Photoshop
Vergeet niet om uw afbeeldingen te optimaliseren, anders kan uw WordPress-site aanvoelen als in slow-mo. En je weet hoe frustrerend 'langzaam' is! 🐌 Click to Tweet

Zodra je de afbeeldingen hebt geformatteerd voor betere prestaties en je onze aanbevelingen hebt opgevolgd, zal je zien dat zoekmachines, browsers en netwerken dit waarderen. Ook je bezoekers zullen blij zijn, omdat de website sneller laadt. Oh, en zorg ervoor dat je onze tutorial over hotlinking bekijkt, om te voorkomen dat mensen je afbeeldingen en daarmee bandbreedte stelen.

Formatteer jij je afbeeldingen om betere prestaties te krijgen? Doe je dat handmatig, door middel van een plug-in, of beide? Is er wellicht een andere tool of plug-in die je lezers van dit artikel aan kan raden? Heb je nog iets anders toe te voegen? In de comments hieronder kan je andere ontwikkelaars helpen met jouw tips en aanbevelingen!

484
keer gedeeld