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.
Wat houdt het optimaliseren van afbeeldingen precies in?
Grote afbeeldingen vertragen je website, waardoor je bezoekers een minder prettige ervaring hebben. Optimaliseren van afbeeldingen (of: afbeeldingsoptimalisatie) houdt in dat we gaan kijken naar hoe we de grootte van het afbeeldingsbestand kunnen verkleinen, door een plugin of een script, om zodoende de laadtijd van de pagina te versnellen. De meest gebruikte compressiemethodes zijn lossy en lossless.
Bekijk onze videogids voor het optimaliseren van afbeeldingen voor SEO
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 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.
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 plugin 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 WordPress plugin of 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)
Als klant van Kinsta kun je gratis profiteren van afbeeldingsoptimalisatie door met een paar klikken automatische afbeeldingsoptimalisatie in te schakelen. Hieronder gaan we daar meer op in.
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 plugins, 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.
1. 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)
2. Pas op voor compressiekwaliteit versus -grootte
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.
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.
3. Begrijpen van Lossy vs 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.
4. Tools en programma’s voor afbeeldingsoptimalisatie gebruiken
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.
Hier zijn enkele extra hulpmiddelen en programma’s om te overwegen:
- Adobe Photoshop
- Gimp
- Paint.NET
- GIFsicle
- JPEG Mini
- OptiPNG
- pngquant
- FileOptimizer
- ImageOptim
- Trimage
- ImageResize.org
- Kinsta’s Afbeeldingsoptimalisatie feature
Denk eraan dat de manier waarop je afbeeldingen levert net zo belangrijk is als de bestandsgrootte. Veel premium hosts zoals Kinsta gebruiken een CDN om afbeeldingen en andere bestanden snel bij gebruikers af te leveren. Kinsta’s gratis Cloudflare integratie beschermt bovendien alle sites op het platform, waardoor het zowel snel als veilig is.
5. Afbeeldingen op schaal aanpassen
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.
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 plugin gebruiken zoals Imsanity.
Met Imsanity kunt je een limiet instellen op alle geüploade afbeeldingen. Hiermee kan je zorgen dat de afbeeldingsgrootte op je website beperkt blijven, 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.
Je mediabibliotheek opschonen
Als je op zoek bent naar een tool om ruimte te besparen en tegelijkertijd je mediabibliotheek op te schonen, dan kan je Media Cleaner gebruiken om ongebruikte mediabestanden te vinden. De plugin scant al je mediabestanden en geeft in het Media Cleaner Dashboard een lijst van ongebruikte bestanden, waar je doorheen kan bladeren en ze kan verwijderen.
Media Cleaner maakt gebruikt van een slim prullenbaksysteem: wanneer bestanden worden verwijderd, worden ze naar een prullenbak verplaatst. Op die manier kan je je website een tijdje testen en controleren of alles in orde is. Als een bestand of media-item ontbreekt, kan je dit eenvoudig met een klik herstellen of gewoon de prullenbak legen als alles er goed uitziet.
Plugins die je kan gebruiken om afbeeldingen te optimaliseren
Gelukkig hoef je met WordPress niet alle opmaak of compressie met de hand te doen. Je kunt plugins gebruiken om in ieder geval een deel van het werk automatisch voor je te doen.
Er zijn verschillende plugins die je afbeeldingsbestanden automatisch optimaliseren bij het uploaden. Ze optimaliseren zelfs afbeeldingen die je al geüpload hebt. Dit is een handige feature – vooral als je al een website vol afbeeldingen hebt. Hieronder vind je een aantal van de beste plugins om je afbeeldingen te formatteren voor betere prestaties.
Het is echter belangrijk dat je niet alleen vertrouwt op de plugins zelf. Het is bijvoorbeeld niet de bedoeling dat je 2 MB aan afbeeldingen uploadt naar je WordPress mediabibliotheek. Dit kan ertoe leiden dat de schijfruimte van je webhost heel snel wordt opgebruikt.
De beste methode is om het beeld vooraf snel te verkleinen in een fotobewerkingsprogramma, en het dan te uploaden en een van de volgende plugins te gebruiken om het verder te verkleinen.
Voordat je een van deze tools of plugins gebruikt, moet je echter controleren of je webhost provider geen ingebouwde tools aanbiedt om het werk voor je te doen. Klanten van Kinsta hebben bijvoorbeeld toegang tot een gratis afbeeldingsoptimalisatiefeature die automatisch geoptimaliseerde kopieën maakt van alle WordPress afbeeldingen, die gratis worden opgeslagen. De kleinste van de twee afbeeldingsbestanden wordt vervolgens aangeboden met behulp van Kinsta’s bliksemsnelle CDN om de snelheid nog verder op te voeren. Klanten kunnen zelfs kiezen tussen lossless en lossy compressie, afhankelijk van hun behoeften.
1. Imagify Image Optimizer
Imagify is gemaakt door hetzelfde team dat ook WP Rocket heeft ontwikkeld. Het is geschikt voor WooCommerce, NextGen Gallery en WP Retina. De plugin 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 plugin.
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.
2. Optimole
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.
3. Optimus Image Optimizer
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 plugin ondersteunt WooCoomerce en multi-site en heeft een handige bulk-optimalisatiefunctie voor mensen met grote mediabibliotheken. De plugin is ook compatibel met de WP Retina WordPress-plugin. 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 plugin combineert met hun Cache Enabler-plugin, kun je ook eens kijken naar WebP-afbeeldingen, het nieuwe lichtgewicht afbeeldingsformat van Google.
4. WP Smush
WP Smush heeft zowel een gratis als een premium-versie. Sommige afbeeldingsbestanden bevatten verborgen informatie welke door deze plugin worden verkleind – hierdoor gaat de kwaliteit niet achteruit. De plugin 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 plugin verkleint JPEG-, GIF- en PNG-afbeeldingstypen. Bestandsgroottes zijn beperkt tot 1MB.
- De plugin is compatibel met enkele van de populairste media-bibliotheekplugins, 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.
5. TinyPNG (ook gecomprimeerde JPG’s)
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 plugin 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.
6. ImageRecycle
De ImageRecyle-plugin is een volautomatische afbeeldings- en PDF-optimizer. Deze plugin 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.
7. EWWW Image Optimizer
De EWWW Image Optimizer helpt je om je afbeeldingen kleiner en je site sneller te maken met minder gedoe. Zonder limieten aan de grootte en met veel flexibiliteit voor geavanceerde gebruikers, kunt je de standaardwaarden gebruiken of de plugin volledig naar wens aanpassen.
De gratis modus staat onbeperkte JPG compressie en WebP conversie toe en is geweldig voor hobbysites of blogs die net beginnen. Alle EWWW IO gebruikers kunnen de Bulk Optimizer gebruiken om hun bestaande afbeeldingen te comprimeren of de mediabibliotheek-lijstmodus gebruiken om specifieke afbeeldingen te selecteren en te comprimeren. Extra mappen kunnen worden gescand om ervoor te zorgen dat elke afzonderlijke afbeelding op je site correct is geoptimaliseerd.
Met EWWW IO kan je zelfs afbeeldingen converteren naar next-generation afbeeldingsindelingen, zoals WebP, of de beste indeling vinden met hun conversie-opties voor meerdere indelingen.
Met de hoogwaardige Compress API kun je de compressie naar een heel nieuw niveau tillen zonder aan kwaliteit in te boeten en met een gemiddelde besparing van 50%. Het maakt ook PDF compressie mogelijk en bevat een handige feature om 30 dagen backups van afbeeldingen te bewaren. Met de optionele Easy IO CDN worden afbeeldingen automatisch gecomprimeerd, geschaald naar de grootte van de pagina en het apparaat, gelazyload en geconverteerd naar de next-generation WebP indeling.
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. 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.
Gecomprimeerde JPG’s
Vervolgens hebben we de JPG’s gecomprimeerd met de Imagify WordPress-plugin. Hierbij kozen we de ‘agressieve’ optie. 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.
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 plugin. 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-plugin gebeurt, kun je ook de waarschuwing ‘Optimize images’ in de Google PageSpeed Insights verhelpen (zie hieronder).
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.
We hebben onze kennis van effectief websitebeheer bij elkaar verzameld en er een e-book en videocursus van gemaakt. Klik om de gids voor het beheren van 60+ WordPress sites te downloaden!
SVG’s gebruiken: de voordelen die je moet kennen
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)
PNG (geoptimaliseerde grootte: 85,1KB)
SVG (optimized size: 6.1 KB)
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.
Best practices voor het optimaliseren van afbeeldingen voor het web
Hier zijn enkele algemene aanbevelingen voor het optimaliseren van afbeeldingen voor het web:
- Als je een WordPress-plugin 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. De Kinsta CDN heeft een codeminificatiefeature die rechtstreeks in het MyKinsta dashboard is ingebouwd. Hiermee kunnen Kinsta klanten met een simpele klik eenvoudig automatische CSS en JavaScript minificatie inschakelen.
- 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 altijd altijd de bestandsindeling .ico voor je favicon.
- 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.
- De ingebouwde afbeeldingsoptimalisatie van Kinsta gebruiken
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 plugin, of beide? Is er wellicht een andere tool of plugin 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!
Brian heeft een enorme passie voor WordPress, gebruikt het al meer dan tien jaar en heeft zelfs al aantal premium plugins ontwikkeld. Brian houdt van bloggen, films en hikes. Kom in contact met Brian op Twitter.
Laat een reactie achter