Waarom afbeeldingen verkleinen?
Het belang van het verkleinen van afbeeldingen voor je website kan niet onderschat worden. Dit proces is cruciaal voor het verbeteren van de laadsnelheid van je site en dus mede je positie in Google.
Een goede regel is om ervoor te zorgen dat de totale grootte van een webpagina, inclusief alle elementen zoals CSS, JS, HTML, PNG, JPG, onder de 1MB blijft. En als we eerlijk zijn; liefst nog kleiner.
Voor ons als content makers is dat soms zonde omdat de kwaliteit afneemt, maar daarin moeten we compromissen sluiten.
Het probleem van te grote afbeeldingen
In onze digitale wereld zijn de meeste afbeeldingen die we gebruiken, vooral die van smartphones, vaak groter dan 3MB. Dit is problematisch, omdat websites doorgaans meerdere afbeeldingen gebruiken, wat resulteert in langere laadtijden en meer druk op de hostingserver, zeker bij veel verkeer.
Gebruik je een professionele camera en exporteer je het in de hoogste resolutie? Kan je afbeelding zomaar meer dan 20mb zijn!
Meerdere oplossingen vereist
Eén enkele oplossing bestaat niet; je moet een reeks technieken combineren om tot het optimale resultaat te komen.
Directe verkleining van afbeeldingsgrootte
Een directe aanpak is het fysiek verkleinen van de afbeelding. Veel beeldschermen zijn kleiner dan de oorspronkelijke afmetingen van de meeste foto’s.
Gebruik eenvoudige tools zoals I Love IMG voor dit doel.
Wil je het zelf in de hand houden? Via Photoshop en Lightroom kun je ook een heel eind komen. Gebruik daar de export functies ”exporteer voor web” in Photoshop of pas je exportsettings in Lightroom aan zodat je foto onder de 1000kb (1mb) blijft.
Aanpassen van het bestandsformaat
Na het verkleinen, overweeg dan het aanpassen van het bestandsformaat. JPG is meestal een betere keuze voor de meeste afbeeldingen, met uitzondering van logo’s, die vaak transparant zijn en beter in PNG kunnen zijn.
Verdere compressie van afbeeldingen
Naast formaat en afmetingen, kun je ook afbeeldingen comprimeren door een klein deel van de kwaliteit op te offeren, wat de bestandsgrootte verder reduceert. Ook dit kan via Photoshop makkelijk via de ”exporteer voor web” functie.
Verbeter de laadsnelheid nog meer
Verschillende afbeeldingen voor verschillende apparaten
Overweeg verschillende afbeeldingen voor mobiele apparaten en desktops te gebruiken, omdat telefoons meestal minder krachtige processors en tragere internetverbindingen hebben. Afhankelijk van het programma waarmee je website is gebouwd kun je dit instellen. Zo kan dit met en website thema zoals Divi (in WordPress) erg gemakkelijk.
Kijk naar de toekomst met WebP
WebP is een moderner en efficiënter formaat voor webafbeeldingen. Het wordt steeds meer gebruikt en biedt een kleiner bestandsformaat dan JPEG. Een WebP bestand is vaak zo’n 30% kleiner dan de traditionele JPEG. Meer weten over WebP? Bekijk deze blog dan eens!
Overweeg lazy loading
Een andere techniek is lazy loading, waarbij afbeeldingen alleen geladen worden wanneer ze nodig zijn, wat de algemene laadtijd van de site vermindert en dus verbetert.
Voor lazy loading moet je coderen of een geschikte plugin downloaden.
Samenvatting
Door bovenstaande methodes te gebruiken, kun je de snelheid en efficiëntie van je website aanzienlijk verbeteren. Dit is onder andere belangrijk voor de positie in Google, maar ook voor het gebruiksgemak en ervaring van de websitebezoeker.
Meer weten? Neem gerust contact met ons op!
