Website laadsnelheid verhogen met Afbeeldingscompressie

Lang wachten tot een webpagina volledig geladen is blijft vervelend. Vaak heb je er niet eens het geduld voor en klik je alweer weg, op zoek naar een andere pagina. Wie houdt er nou van een trage website? Een lage laadsnelheid kost je bezoekers!

De laadsnelheid van een website is een belangrijke factor in het bepalen van de zoekresultatenpositie. Als een website een lange laadtijd heeft, beoordelen de zoekmachines dit negatief voor mogelijke bezoekers. De zoekmachines willen natuurlijk websites aanbevelen die snel bereikbaar zijn. Websitebezoekers zijn met een zoektocht bezig en willen zo snel mogelijk antwoord. Zij vinden het erg vervelend als een website niet snel laadt.

Trage laadsnelheid van de website?

Een van de meest voorkomende oorzaken van lange laadtijden ligt aan het gebruik van te grote afbeeldingen. Moderne websites bevatten grote visuals, denk bijvoorbeeld aan de volle breedte afbeeldingen die in sliders staan. De grote bestanden van hoge resolutie afbeeldingen dragen bij aan een langere laadsnelheid. Regelmatig zie je dat er afbeeldingen met een te hoge resolutie op de website om een pagina zoo mooi mogelijk te maken, maar in werkelijkheid worden de zware afbeeldingen vaak in een veel kleiner formaat getoond. De afbeeldingen wordt echter wel in de achtergrond geladen. Het comprimeren van afbeeldingen is daarom van cruciaal belang, want zonder optimalisatie heeft de browser moeite om jouw pagina op te vragen.

Tegenwoordig worden webpagina’s ook veel bezocht via smartphone of tablet. In verband met prestaties van een gemiddelde smartphone tegenover een pc is het verstandig hier rekening mee te houden tijdens het optimaliseren van de website. De rekenkracht van smartphones is namelijk een stuk minder dan de gemiddelde pc en zal dus meer tijd nodig hebben om pagina’s volledig te laden.

Is mijn website te langzaam?

Hoe sneller je website laadt, des te beter. Uit onderzoek van kissmetrics blijkt dat 40% van de mensen een webpagina verlaat die langer dan 3 seconden nodig heeft om te laden. Een hoog percentage, waar je zeker aandacht aan moet besteden. Mensen vinden websites die snel laden namelijk erg belangrijk. Tijd is geld natuurlijk!

Maar hoe weet je of een website langzaam is? Dit kan met handige online tools zoals: PageSpeed Insights. Deze tool geeft (onder het kopje ‘optimize images’, nadat je jouw webiste url hebt ingevoerd) aan op welke pagina en welke afbeeldingen jouw website zo traag maakt. In een overzichtelijk lijstje worden de verbeterpunten opgesomd met een voorgestelde manier om het betreffende probleem op te lossen.

Zorg dat de afbeeldingen de afmetingen hebben die op de pagina getoond moeten worden. Dus geen afbeelding van 2000×2000 px gebruiken, terwijl de uiteindelijke foto op de website maar 500×500 px is. Dit zorgt voor onnodige laadtijd.

Het gebruik van de juiste bestand formaten is een must: jpg voor normale foto’s, png voor een transparante achtergrond, svg of png bestanden voor je bedrijfslogo en gifs voor animaties. Welk formaat je het beste kan gebruiken, hangt helemaal af van wat voor soort foto of afbeelding je wilt laten zien.

• Afbeeldingen met een verloop.

  Dit zijn foto’s waarbij je ziet dat er verschillende kleuren van de afbeelding in elkaar overlopen. Denk aan portretten, productfoto’s waar kleurverschil en overloop voorkomt. Het beste bestandstype is die je voor deze foto’s kan gebruiken is JPG (joint photographic experts group) formaat. JPG bestanden laden in stappen, waardoor de overloop van kleuren behouden wordt. Daarentegen ondersteunt het geen transparantie.

• Afbeeldingen met vlakke kleuren.

  Afbeeldingen met scherp verschil tussen verschillende kleuren sla je het beste op in een gif of in 8-bits-formaat. De afbeelding die je krijgt is een klein bestand van goede kwaliteit met een snelle laadtijd als resultaat. Deze formaten tonen geen overloop en zorgen voor duidelijke kleuren.

• Afbeeldingen met een transparante achtergrond.

PNG (portable network graphics) gebruik je als je een afbeelding hebt met een transparante achtergrond. Als je namelijk een JPG formaat gebruikt voor een afbeelding met een transparante achtergrond dan krijg je een witte achtergrond als resultaat.

• Afbeeldingen met animaties.

  Als een afbeelding uit twee of meerdere afbeeldingen bestaat die van tempo wisselen dan is een GIF (graphic interchange format) de enige optie. Gebruik GIF niet voor normale foto’s met overlooptinten, want dit formaat heeft namelijk een limiet van 256 kleuren.

• Afbeeldingen die schaalbaar zijn.

  SVG (scalable vector graphics) zijn afbeeldingen die je kan vergroten zonder kwaliteit te verliezen. Tekeningen, logo’s en grafieken worden vaak in SVG formaat getoond. Je kan een afbeelding goed weergeven op een mobiel device en dezelfde afbeelding op een tvscherm weergeven zonder kwaliteit verlies. Het tegendeel is dat dit formaat wel vaak groter in opslag is als de andere formaten. Wat dus niet bevorderlijk is voor de laadsnelheid.

Geen Photoshop, wat nu?

Niet iedereen heeft Photoshop om afbeeldingen te verkleinen en te comprimeren. Met de volgende gratis tools kan je dit ook bereiken. Zorg er wel voor dat je de afbeeldingen die je hebt gecomprimeerd controleert, voordat ze worden geüpload. Het kan zijn dat de afbeelding teveel kwaliteit verliest waardoor het niet meer leesbaar wordt.

Met de volgende tools kan je makkelijk online afbeeldingen comprimeren:

Optimizilla
Optimizilla is een handige gratis tool die JPEG en PNG foto’s comprimeert. Het voordeel van Optimizilla is dat je 20 afbeeldingen tegelijk kan uploaden. Met een handige drag en drop systeem sleep je de foto’s in je browser en upload je ze op de website. Je krijgt een vergelijking van je geuploade foto en de gecomprimeerde foto. Je kan zelf de kwaliteit bepalen en bekijken en ziet meteen het verschil tussen de twee afbeeldingen.

kraken.io
Op basis van berekeningen comprimeert kraken.io automatisch afbeeldingen. Met de betaalde versie heb e meer mogelijkheden zoals afbeeldingsgrootte aanpassen en grotere afbeeldingen uploaden, comprimeren en ze direct laten synchroniseren met Dropbox.

Tinypng
De website van tinypng valt al op met de bijzondere panda mascotte die je door de site heen helpt. Je kan maximaal 20 afbeeldingen uploaden en krijgt meteen het aantal % en kb te zien die je hebt bespaart door het gebruiken van de handige tool. Wel moet je de afbeeldingen één voor één downloaden.

Heb je wel Photoshop

Volg de volgende stappen:

1. Open Photoshop
2. Open de afbeelding die je wilt bewerken
3. Kies daarna bestand > opslaan voor web… / file > save as web…
4. Aan de rechterkant kies je het bestandtype. Kies het juiste formaat voor de afbeelding, zoals hierboven beschreven.
5. Kies daarna de kwaliteit en schuif met de regelaar naar de gewenste kwaliteit. Zorg er natuurlijk voor dat de kwaliteit niet te laag wordt, zodat je pixels gaat zien en de afbeelding onduidelijk wordt. Voorkom ook dat je een te hoge kwaliteit instelt, waardoor de grote van het bestand alsnog te groot zal zijn. Houd hiervoor 1 mb als maximale grootte aan.
6. Klik op opslaan als.. en sla het bestand op.

Website Afbeeldingen in het juiste bestand en grootte

Zorg er dus altijd voor dat je het goede bestandsformaat kiest om het beste resultaat te tonen. Dit kan je een hoop tijd besparen en krijg je een hogere laadsnelheid op je website. Via online tools of Photoshop kan je afbeeldingen comprimeren, zodat je afbeeldingen gemakkelijk kunt comprimeren naar het juiste bestand en de juiste grootte.

Heb je hulp nodig bij het comprimeren van jouw afbeeldingen? Wij helpen je graag bij het nakijken van jouw website voor afbeeldingen die niet geoptimaliseerd zijn. Samen kunnen we van jouw website een snelle en geoptimaliseerde website maken. Neem contact met ons op om te kijken of we iets voor je kunnen betekenen.

Door afbeeldingen kleiner te maken, kan jouw website sneller geladen worden. Dat vinden bezoekers fijn, maar ook Google. Neem contact met ons op als je hulp nodig hebt met het optimaliseren van jouw afbeeldingen.