Wanneer je je website gaat checken op duurzaamheid, is er vaak één element dat met kop en schouders boven de rest uitsteekt als het gaat om de hoeveelheid megabytes die verstuurd moeten worden en daarmee de CO2-uitstoot. Afbeeldingen. We hebben het hier over JPGs, PNGs, en aanverwante bestanden. Tijd dus om de hoeveelheid foto’s wat in te perken. Maar hoe houd je de boel eigenlijk aantrekkelijk en interessant met minder foto’s op je website?
Slim kleurgebruik
Een webpagina met geen of weinig foto’s hóéft niet saai te zijn. Zo kun je een hoop sturen door een goed ontworpen huisstijl met een aansprekend kleurenpalet, en goed gebruik daarvan op je website zelf.
Zelf heb ik na een aantal jaar ondernemen geïnvesteerd in een goede grafisch ontwerper (Anne-Loes van Studio Pinck) voor mijn huisstijl, en dat heeft echt zo geholpen om een coherente branding neer te zetten! Niet alleen de huisstijl zelf, maar ook de hele merkstrategie eromheen. Alles wat ik doe, wat ik uitdraag en hoe dat eruit ziet, kloppen nu met elkaar. Mensen voelen dat toch intuïtief aan, en dat heb ik gemerkt in mijn verkopen, en offerte-aanvragen!
Maar begin je echt nét en heb je nog geen budget voor een professionele huisstijl, dan kun je een heel eind komen met de volgende tools:
CSS
CSS is de taal die gebruikt wordt voor de algehele styling van je website. Denk aan hoe je tekst eruit ziet, achtergrond kleuren en -gradiënts, de vorm en stijl van knoppen, tekstblokken, randstijl, afronding van hoekjes, schaduwen, hover effecten, you name it.
Check bijvoorbeeld het call to action blok onderaan deze blogpost. Geen foto nodig. Ik maak hier slim gebruik van mijn huisstijlkleuren, een SVG icoon en CSS om een mooi blok te stylen. Helemaal zonder foto, maar toch aantrekkelijk (rustig, minimalistisch, passend binnen mijn huisstijl) en duidelijk.
SVG icons
SVG is een vector-afbeeldingsformaat, in tegenstelling tot JPG, PNG en WEBP, wat rasterafbeeldingen zijn. SVG is zeer geschikt voor logo’s en iconen, en vaak ook voor lijnillustraties. Je zegt namelijk niet welke kleur iedere pixel moet hebben, maar geeft aan tussen welke punten er lijnen getrokken moeten worden, en welke vlakken er ingekleurd moeten worden. SVG afbeeldingen zijn onbeperkt schaalbaar zonder aan kwaliteit in te boeten, en doorgaans zeer lichtgewicht.
Er zijn diverse “blokkendozen” met een icon-blok wat je kunt gebruiken. Kadence Blocks heeft bijvoorbeeld Icon voor een los icoon, Icon List voor een opsomming met icoontjes in plaats van saaie bullets, en bij Info Box of Testimonial kun je ook iconen kiezen in plaats van foto’s. Deze iconen zijn gebaseerd op het lettertype Font Awesome, een uitgebreide bibliotheek met logo’s en icoontjes. Superhandig! In de pro versie kun je trouwens ook je eigen custom iconen uploaden.
Let op: Er zijn ook manieren om FontAwesome iconen te gebruiken die de hele FontAwesome library inladen om vervolgens één of twee icoontjes daarvan te gebruiken. Dat is natuurlijk dataverspilling en daarmee energieverspilling. Zorg dat je aan de front-end daadwerkelijk alleen de iconen laadt die je nodig hebt.
Emoji’s
Emoji’s zijn net als Font Awesome kleine pictogrammen, maar dan in meerdere kleuren. Het Emoji-font is doorgaans al op ieder apparaat geïnstalleerd, dus daar hoeft niks voor gedownload te worden. Daarnaast kunnen ze er per apparaat of browser wat verschillend uitzien qua ontwerp. Emoji’s aan het eind van een zin kunnen toon en intentie van wat je zegt beter overbrengen dan tekst alleen.
Haikei
Dit is een leuk gratis tooltje waarmee je mooie SVG patronen kunt genereren voor bijvoorbeeld website- of header achtergronden. Ik heb er al meerdere malen dankbaar gebruik van gemaakt!
Lotties
Lotties zijn een soort superlichtgewicht animaties. Nouja, relatief dan. Ze nemen een stuk minder ruimte in beslag dan GIFjes. Er is een bibliotheek met gratis Lotties, premium Lotties, en natuurlijk kun je ook je eigen privé Lotties uploaden naar je account. Het toffe is dat je de kleuren van iedere animatie kunt aanpassen, zodat ze ook écht binnen je huisstijl passen – ook als het gratis Lotties zijn.
Klik hier om naar de Lottie bibliotheek te gaan.
Lotties kun je toevoegen aan je WordPress site met speciale Lottie blokken. Kadence Blocks en Spectra hebben allebei zo’n blok. Je hoeft daar alleen een link in te vullen.
Kortom: Het is écht niet nodig om je hele website vol met foto’s te gooien om een visueel aantrekkelijk geheel te vormen. Minder foto’s op je website bereik je door strategisch inzetten van icons, emoji’s, CSS en Lotties.
Wil jij zelf de CO2-uitstoot van jouw website doormeten? Wil je weten hoe je de verbeterpunten spot, en hoe je die kunt aanpakken? Schrijf je dan in voor mijn online cursus “Verduurzaam je eigen website”.
Dit artikel is voor het eerst gepubliceerd in maart 2022 en geüpdatet in juli 2024.