Optimaliseer afbeeldingen met deze 5 tips om je website groener en sneller te maken
Je kent ze wel, die websites die vol grote foto’s staan die altijd wat langer moeten laden. Misschien heb je zelf wel zo’n trage website die je sneller wil maken?
Gelukkig kan je de beelden op je site eenvoudig optimaliseren voor betere laadtijden. Meer nog, het optimaliseren van je foto’s en illustraties zal je website niet alleen sneller maken. Het zal ook een positieve invloed hebben op je rangschikking op Google én het maakt je site groener, want laadtijd heeft een grote invloed op het energieverbruik van je site. Het loont dus om je afbeeldingen kritisch te bekijken. En dat hoeft niet moeilijk te zijn!
Dit artikel maakt deel uit van een reeks blogberichten over groen webdesign, maar laat dat je niet afschrikken als je hier alleen bent om je website sneller te maken. Iedereen houdt van snelle websites, of ze nu milieubewust voor je moeten zijn of niet.
Is je hosting al groen?
In onze eerste post van de Motionmill green-reeks haalden we al aan dat groene hosting the way to go is. Check! Al onze Motionmill-websites worden gehost op de groene servers van wporters.com.
Staat je website niet gehost bij WPorters en heb je geen idee of jouw hostingprovider duurzaam is? Kijk dan hier en je hebt er direct een antwoord op: The Green Webcheck.
Een eenvoudige stap om jouw website nóg duurzamer te maken is kijken naar de afbeeldingen
Voor de meeste websites leveren afbeeldingen de grootste bijdrage aan het gewicht van je pagina’s. Hoe meer afbeeldingen je gebruikt en hoe groter die afbeeldingsbestanden zijn, hoe meer gegevens worden overgedragen, hoe trager je site wordt en hoe meer energie wordt gebruikt in het proces.
Laten we eerlijk zijn: je hebt geen haarscherpe afbeeldingen van een paar MB nodig. Je afbeeldingen moeten gewoon scherp genoeg zijn. Bovendien zijn zware afbeeldingen de boosdoener van een langzaam ladende pagina, wat een vreselijke ervaring is voor je bezoekers. Langzaam ladende pagina’s zijn ook slecht voor je SEO, waardoor je minder snel gevonden wordt in Google. Laten we dus eens kijken wat je hieraan kunt doen.
Groene tips om de laadtijd van jouw WordPress-website te verbeteren op vlak van beelden
- Moet het wel een beeld zijn?
- Illustraties laden sneller dan foto’s
- Maak slimme keuzes als je toch foto’s gebruikt
- Gebruik een automatische tool om je beelden te optimaliseren
- Optimaliseer de pixelresolutie van je beelden
- Comprimeer je beelden met een geoptimaliseerd bestandstype
Moet het wel een beeld zijn?
Als grafisch ontwerper geloven we sterk in de kracht van goede beelden. Een beeld zegt tenslotte meer dan duizend woorden. Maar is dat wel altijd zo?
Waarom gebruiken we eigenlijk beelden op een website? Om een goed webdesign te ontwerpen, begin je altijd met een goede tekststructuur. Teksten wil je doorbreken en verduidelijken om ze vlot leesbaar te maken. Afbeeldingen zijn hier heel geschikt voor, maar er bestaan ook andere elementen om je webpagina’s mee te structureren: een goed gebruik van titels en subtitels bijvoorbeeld, of grafische elementen zoals kleurvlakken die voor afwisseling zorgen zonder je site te vertragen.
Overweeg altijd wat de meerwaarde van een afbeelding is voor je ze op een pagina plaatst.
Door goed na te denken over de structuur van je site, maak je vanzelf efficiëntere fotokeuzes.
Illustraties laden sneller dan foto’s
Oké, je hebt bepaald waar je alternatieven gebruikt. Maar tenzij je een super minimalistische look kiest, ga je ook beelden op je site gebruiken.
Daarom bespreken we in de volgende tips wat je kan doen met gewone foto’s om ze sneller te doen laden. Maar overweeg eerst of je een ander soort beeld kan gebruiken. Foto’s zijn het zwaarste soort beeld voor je site. Illustraties gebruiken meestal minder kleuren en details, waardoor ze je website al een pak sneller maken. En maak je illustraties in een speciaal vectorformaat (SVG), dan nemen ze maar enkele kilobytes ruimte in beslag en laden ze bliksemsnel.
Ben je op zoek naar iconen? Ben je op zoek naar illustraties die nog meer aansluiten op je merk? Dan mag je ons altijd inschakelen om bestaande illustraties om te zetten naar je huisstijl of om gloednieuwe illustraties te maken.
Maak slimme keuzes als je toch foto’s gebruikt
We willen met dit artikel niemand afraden om krachtige beelden te gebruiken. Foto’s zijn enorm nuttig in een mooi webdesign. Maar hoe gebruik je ze het best? Door een duurzame visuele taal te ontwikkelen voor je merk. Als je goed nadenkt over de visuele taal van je website, merk je dat je slimmere keuzes maakt en overbodige afbeeldingen achterwege laat.
Om van goede branding te spreken, horen alle beelden op je website “dezelfde taal te spreken”. Dat betekent dat ze bij elkaar passen qua kwaliteit, kleuren en beeldtaal. Gebruik dus foto’s die consistent zijn in hun stijl en passen bij je merk.
Bijvoorbeeld: is het imago van je bedrijf informeel en vriendelijk, dan zijn beelden in koele kleuren misschien niet de beste keuze. Warme beelden roepen positieve emoties op die beter passen. Kijk eens of er slecht passende beelden op je website staan die je kunt schrappen.
Begin daarom met een lijst van de belangrijkste kenmerken van je merk, en raadpleeg die wanneer je beelden uitkiest. Maar waar vind je foto’s die wel goed passen?
- (Gratis) stockfoto-sites, zoals Unsplash, Pexels en Freepik. Stockfoto’s zijn goedkoop of zelfs gratis en je hebt veel keuze, vaak al in een voor het web geoptimaliseerd formaat. Het nadeel: iedereen gebruikt stockfoto’s. Heeft een beeld dat mensen al twintig keer gezien hebben nog een meerwaarde op je site? En sluit het wel goed aan bij je merk? Maak dus slimme keuzes.
- Zelf foto’s maken. Dit voelt persoonlijker aan, maar er kruipt meer tijd en geld in. Moeten je foto’s professioneel ogen voor jouw merk, of is het juist leuk dat ze wat “ruiger” zijn? Vergeet ook niet je zelfgemaakte foto’s te optimaliseren.
- Een fotograaf inhuren. Dan ben je zeker van kwalitatieve, unieke beelden die helemaal bij je merk passen. Een fotograaf kan de foto’s op verzoek ook meteen voor het internet optimaliseren. Deze keuze is duurder, maar bespaart tijd in het zoeken naar of zelf maken van goede foto’s. Ben je nog op zoek naar een goede fotograaf? We hebben er zo eentje.
Gebruik een automatische tool om je afbeeldingen te optimaliseren
Je hebt beslist om foto’s te gebruiken. Het slechte nieuws: deze foto’s zullen je website vertragen. Het goede nieuws? Met wat slimme aanpassingen optimaliseer je jouw beelden voor het internet, en blijft je website toch sneller dan vroeger.
Foto’s optimaliseren doe je door ze te exporteren in de juiste grootte, in een geoptimaliseerd bestandstype, en door ze te comprimeren met een tool of plugin om de bestandsgrootte te verminderen.
Gebruik je een WordPress-website? Dan heb je geluk: er bestaan handige plugins die je afbeeldingen automatisch comprimeren en in grootte beperken bij het uploaden, zoals Imagify en EWWW Image Optimizer.
Gebruik je geen WordPress-site? Ook dan bestaan er oplossingen, zoals externe tools of websites die je afbeeldingen optimaliseert vóór je ze uploadt.
Of je nu externe software of een geautomatiseerd systeem gebruikt: het helpt om te weten hoe je beelden kan optimaliseren. Onze laatste tips leggen uit met welke optimalisaties je een website sneller kan maken.
Optimaliseer de pixelresolutie van je afbeeldingen
Een te hoge resolutie is een grote boosdoener
Voor drukwerk heb je afbeeldingen nodig met een heel hoge pixelresolutie. Maar op het internet wil je afbeeldingen gebruiken in een niet al te groot pixelformaat, want dit heeft invloed op de bestandsgrootte van de beelden — en dus ook op de laadtijd.
Wat is “niet al te groot”? Daar bestaat geen universeel antwoord op, maar onderstaande richtlijnen voorkomen dat je afbeeldingen gigantisch zijn — of te klein, want dat ziet er ook niet goed uit.
WordPress maakt automatisch verschillende formaten aan en gebruikt meestal zelf de efficiëntste versie. Doe je dit manueel, dan wordt het ingewikkelder. Op dit moment is een resolutie van 1080p nog altijd het populairst, dus we beschouwen dit als de huidige standaard. Voor een schermgrootte tot 1080p gelden deze richtlijnen:
| Soort beeld | Pixelresolutie | Beeldverhouding |
|---|---|---|
| Achtergrondafbeelding | 1920 x 1080 px | 16:9 |
| Grote banner | 1280 x 720 px | 16:9 |
| Blogpost-afbeelding | 1200 x 630 px | 3:2 |
| Logo (rechthoekig) | 250 x 150 px | 2:3 |
| Logo (vierkant) | 160 x 160 px | 1:1 |
| Favicon | 16 x 16 px / 32 x 32 px / 48 x 48 px | 1:1 |
| Pop-up afbeelding | 1600 x 500 px | 16:9 |
| Thumbnail afbeelding | 150 x 150 px | 1:1 |
Dit zijn alleen richtlijnen. Het komt erop neer dat je de hoeveelheid pixels wilt beperken, maar niet zoveel dat de kwaliteit slecht wordt of je met minifoto’s zit.
Beperk de breedte van je afbeeldingen tot een maximum van 2000 px.
Comprimeer je beelden met een geoptimaliseerd bestandstype
We gebruiken verschillende soorten bestandstypes op websites, maar niet alle bestanden laden even snel. Dit zijn momenteel de meest gebruikte:
| Bestandstype | Wat? | Wanneer? |
|---|---|---|
| JPEG | Een van de meest gebruikte beeldformaten op het internet. Zorgt voor kleinere bestanden die sneller laden, maar de beeldkwaliteit gaat achteruit bij te veel compressie. JPEG’s ondersteunen geen transparante elementen. | Zeer geschikt voor productfoto’s, blogbeelden en achtergrondafbeeldingen. Minder geschikt voor logo’s of beelden waarbij perfecte kwaliteit cruciaal is. |
| PNG | Slaat afbeeldingen op zonder kwaliteitsverlies en ondersteunt transparante achtergronden. | Ideaal wanneer beeldkwaliteit belangrijk is, maar zorgt voor zwaardere, vertragende bestanden. Perfect voor transparante iconen en logo’s. |
| GIF | Wordt het meest gebruikt voor korte bewegende clips op een website. | Geschikt voor korte geanimeerde beelden, maar het zijn zware bestanden die je website trager maken. Overweeg video’s voor langere filmpjes, of voeg beweging toe met webanimaties. |
| WEBP | Een nieuwer, populair formaat dat kleinere bestanden oplevert dan JPEG met behoud van betere kwaliteit. Ook transparante achtergronden en animaties zijn mogelijk. | Combineert de sterktes van JPEG, PNG en GIF — aangeraden voor een moderne, groene website. Oudere toestellen tonen dit formaat echter niet altijd correct. |
| SVG | Een vectorformaat dat haarscherp blijft op alle schermgroottes en erg klein is qua bestandsgrootte. | Ideaal voor logo’s en strakke illustraties, minder geschikt voor foto’s of gedetailleerde tekeningen. Heeft zo goed als geen invloed op de laadsnelheid. |
Ook wij maken op deze site gebruik van gecomprimeerde WEBP’s dankzij WordPress-plugins die voor automatische optimalisatie zorgen. Voor dit blogbericht hebben we bovendien ons best gedaan om maar een beperkt aantal WEBP-afbeeldingen te gebruiken — de tabellen en tussentitels zorgen voor genoeg structuur op de pagina. En dat leverde een mooi resultaat op:
We voorzien optimalisatie-plugins ook voor onze klanten, dus laat het ons weten als je hier interesse in hebt. Ondervind je problemen met een trage website en wil je dat we ze onder de loep nemen? Ook dat kan, dus geef ons gerust een seintje.
Gebruik je toch liever geen WordPress? Ook dan bestaan er tools om je beelden mee te verkleinen en naar het juiste formaat te exporteren, zoals Photoshop of gratis alternatieven. Wil je jouw afbeeldingen nog sneller doen laden met het WEBP-formaat? Ook daar bestaan handige online converters voor.
We hopen dat je met deze tips weet wat je te doen staat als je voor een snellere, groenere website wilt zorgen. Houd ook zeker onze blog in de gaten voor nog meer tips.
Wil je jouw website sneller en groener maken?
We denken graag met je mee over beeldoptimalisatie en duurzaam webdesign.
