Versnel je website door afbeeldingen te optimaliseren

Het is ondertussen al vrij bekend dat de snelheid van je website ontzettend belangrijk is om je bezoekers tevreden te houden en het ook een ranking factor is voor Google.

Afbeeldingen zijn een van de grootste boosdoeners die ervoor kunnen zorgen dat een pagina van je website langer moet laden. Een WordPress plugin die een klein bestandje extra moet laden is er niets bij.

Natuurlijk kunnen we niet zonder afbeeldingen en foto’s op een website. Het zorgt ervoor dat je artikel er beter uitziet en het kan bezoekers uitnodigen om verder te lezen.

Waar je bij afbeeldingen wel op moet letten is dat je geen foto’s moet gebruiken op internet met een hele grote bestandsgrootte, dit kan namelijk negatieve gevolgen voor de laadtijd van je website veroorzaken.

Hoe je de bestandsgrootte van foto’s kunt optimaliseren

Wanneer je een foto van je camera direct wilt uploaden naar je website is het bestand rond de 4 MB. Dit is in verhouding met de rest van de pagina erg veel.

De homepage van Webtalis is op moment van schrijven 576.7 KB. Wanneer ik op deze pagina een foto wil plaatsen van 4 MB vertraag ik dus enorm mijn website omdat de foto de pagina ongeveer 8 keer zo groot maakt.

Om dit probleem bij je website te voorkomen moet je de bestandsgrootte van je afbeeldingen verkleinen. Ik zal hieronder meerdere tips geven waarmee je de bestandsgrootte van afbeeldingen drastisch kunt verkleinen. Zo is het mogelijk om van een foto van 4 MB een bestand van ongeveer 50-70 KB te maken.

Verklein je foto in breedte en hoogte

Een foto van je camera is al snel meer dan 3500 pixels breed en deze breedte wordt niet eens volledig op een computerscherm weergegeven. Je website is ook niet zo breed en het content kolom van je website ook niet.

Het eerste wat je dus met een foto kunt doen is de breedte en hoogte aanpassen naar de breedte die je wilt gebruiken. Dit kan de breedte zijn van het content kolom van je website, maar het kan ook nog minder breed zijn als je nog tekst naast de afbeelding wilt plaatsen.

Om de afbeelding te verkleinen kun je een programma gebruiken als Microsoft Paint, Adobe Photoshop of Pixelmator (Mac). Er zal een optie staan genaamd “Formaat wijzigen”, “Afbeeldingsgrootte” of een andere term waar je de breedte kunt aanpassen.

Verminder de kwaliteit van een foto

Bij Photoshop en Pixelmator heb je de mogelijkheid om de kwaliteit van een foto te verminderen naar bijvoorbeeld 60%. Je zult hier zelf weinig tot niets van merken als je de foto bekijkt, maar het scheelt toch weer in de bestandsgrootte.

Bij Photoshop kun je gebruik maken van deze optie door het bestand op te slaan voor web en apparaten en bij Pixelmator kun je dit doen wanneer je de afbeelding exporteert.

Afbeeldingen verder optimaliseren met ImageOptim

Met behulp van ImageOptim (Mac), dat helaas niet voor Windows beschikbaar is, kun je afbeeldingen op een eenvoudige manier nog verder optimaliseren.

ImageOptim zorgt ervoor dat alle overbodige informatie uit de afbeeldingen weggehaald worden en de bestandsgrootte nog kleiner wordt.

Het enige wat je hoeft te doen als je dit programma geïnstalleerd hebt is de afbeeldingen naar ImageOptim slepen en het programma zijn werk laten doen.

Voor Windows heb ik helaas (nog) geen programma gevonden waarmee je hetzelfde kunt doen en waar de kwaliteit van de afbeelding goed blijft.

Maak gebruik van de WordPress plugin WP Smush.it

WP Smush.it

Op je WordPress website kun je gebruik maken van een plugin als WP Smush.it om de afbeeldingen, indien dit mogelijk is, nog kleiner te maken.

Met WP Smush.it kun je afbeeldingen die al op je website staan in de mediabibliotheek comprimeren. Daarnaast worden afbeeldingen automatisch gecomprimeerd na het uploaden vanaf het moment dat je WP Smush.it activeert.

WP Smush.it optimaliseert je afbeeldingen door onder andere alle overbodige gegevens te verwijderen en gebruik te maken van JPG-compressie.

Hebben afbeeldingen echt zoveel invloed op de laadtijd?

Wellicht denk je stiekem nog steeds dat 1 bestand je website niet kan vertragen omdat het internet hedendaags vrij snel is. Het tegendeel is echter waar en er is een eenvoudige methode om dit te testen.

Plaats gerust een onbewerkte foto van je camera op je website en test de snelheid van deze pagina eens via Pingdom. Je zal zien dat de afbeelding veel tijd in beslag neemt om te laden. Tip: Stel bij “Settings” Amsterdam in.

Wanneer je dit gedaan hebt kun je de stappen op de foto uitvoeren die je in dit artikel hebt kunt lezen en kun je de geoptimaliseerde afbeelding op je website plaatsen. Test nu de snelheid van je pagina opnieuw via Pingdom en bekijk nogmaals hoe snel de afbeelding en je website geladen is. Zie je dat het daadwerkelijk uitmaakt?

Verklein jij foto’s die je op je website plaatst?

Het is noodzakelijk om foto’s te verkleinen om ervoor te zorgen dat de laadtijd van je website niet onnodig trager wordt. Wanneer je dit niet doet baalt je bezoeker omdat hij of zij te lang moet wachten voordat alles geladen is en zal Google dit ook zien als een minpunt.

Heb jij er weleens aan gedacht om de afbeeldingen en foto’s te verkleinen voordat je deze op je website plaatst of heb je nog meer tips om afbeeldingen verder te optimaliseren? Laat het weten in de reacties hieronder.

11 reacties Voeg ook een reactie toe

  1. Ha Maikel,

    een oud onderwerp, maar ik heb toch nog een aanvullende vraag. Ik merk dat de kwaliteit van een foto veel beter blijft als je wel het grote bestand upload, maar vervolgens zelf handmatig verkleind met wordpress (schalen tot max 400 kb). Is dit ook een goede methode om de snelheid van de website te verbeteren (maar dan met scherpe foto’s)?

    • Je hebt dan nooit de afbeelding volledig verkleind qua bestandsgrootte. Het ding is namelijk dat compressieprogramma’s bijvoorbeeld ook de exif data uit afbeeldingen haalt, waardoor deze nog wat kleiner wordt.
      Ik snap echter dat je scherpe foto’s wilt en als deze methode voor jou werkt om alles scherp en kleiner te maken, dan is dat zo. Je bent in elk geval al beter bezig dan wanneer je niets doen. 🙂

  2. Hoi Maikel, ik heb een reisblog en gebruik dus best veel afbeeldingen in mijn blogs. Is het ook zo dat als ik een afbeelding verklein met behulp van WP Smush.it, de verhouding van de afbeelding in de blog dan ook daadwerkelijk veranderd? Dus dat de afbeelding dan ook kleiner wordt en niet meer gelijk is aan de tekst boven en onder de afbeelding van de blog?

    • De verhoudingen van de afbeeldingen blijven altijd hetzelfde, tenzij je de afbeelding wilt resizen met behulp van deze plugin. Automatisch zal dit dus niet gaan. De winst met het verkleinen halen ze met name door o.a. metadata uit de afbeelding te halen, wat de bezoeker toch niet ziet.

  3. Bij WP Smush.It zijn de voorwaarden volgens mij tegenwoordig veranderd doordat de afbeeldingen door Yahoo werden geoptimaliseerd. En zij hebben de specificaties aangepast. Hierdoor werkt de plugin niet mee zoals voorheen. Hebben jullie hier ervaring mee?

    • Het lijkt erop dat Yahoo met smush.it stopt inderdaad of dat er momenteel in ieder geval iets gaande is waardoor het op dit moment niet meer werkt.

      Het is dus even afwachten of smush.it echt definitief stopt en indien dit het geval is wordt het even zoeken en uittesten wat een goed alternatief is.

  4. Vergat er bij te vertellen dat de foto’s echt groter worden in KB’s MB’s wanneer ze bewerkt zijn in CS! Had daarbij moeten vertellen dat, omdat het om een auto site gaat en worden bestaande kentekens door een eigen kentekenplaat vervangen, met de naam van de site er uiteraard op 😉

    Site bestaat voornamelijk uit foto’s dus een bulk opdracht bespaard heel veel tijd & werk, en dus zeker de moeite waard!

  5. Het vertraagd niet alleen met het laden, maar het uploaden gaat ook een stuk minder snel, bij meerdere foto’s tegelijk blijft de boel soms ‘hangen’, laatste kan ook door m’n provider komen, die de laatste tijd niet ‘stabiel’ is.

    Verklein foto’s met Irfanview, door middel van een bulkopdracht batchconversion, werkt prima. Ook naamconversie werkt goed met Irfanview, ik kan er niet meer zonder. Door de ‘verkleinaktie’ worden ze een stuk kleiner en niet alleen in formaat, maar ook qua grootte.

    Doe je dit via Photoshop worden foto’s door ‘bewerking’ vaak groter dan het origineel, door middel van een bulkopdracht van Irfanview worden ze gereduceerd.

    • Bedankt voor de toevoeging en tip over Irfanview, ik zal er binnenkort eens naar kijken.

      Het uploaden zal inderdaad ook langer duren. Bewerking via Photoshop worden niet groter dan het origineel wanneer je de stappen uit dit artikel volgt, ik heb hier in ieder geval nooit last van. Je kunt echter geen bulkopdrachten doen wat bij Irfanview dan blijkbaar wel weer kan wat toch weer mooi tijd kan besparen.

Geef een reactie