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?
1 – Icons
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 let 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.
2 – Emoji’s
Emoji’s zijn net als Font Awesome kleine pictogrammen, maar dan in meerdere kleuren. Daarnaast kunnen ze er per apparaat of browser wat verschillend uitzien qua ontwerp. Emoji’s zijn in mijn ogen ook heel geschikt om voor opsommingen te gebruiken.
Midden in een tekst vind ik persoonlijk dan wat minder professioneel staan (hoewel ik ze soms wel in mijn blogs gebruik om duidelijkheid over de tone of voice van een zin te geven).
3 – 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 Ultimate Addons for Gutenberg hebben allebei zo’n blok. Je hoeft daar alleen een link in te vullen.
4 – CSS
Ook zonder iconen en Lotties kun je een heel eind komen. Je kunt bijvoorbeeld standaard CSS gebruiken om tekstblokken mooi vorm te geven en knoppen van kleur te laten veranderen wanneer je erover hovert met je muis. En wanneer je je er écht in verdiept, kun je zelfs supervette blokanimaties maken met enkel CSS. #goals.
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.