Duurzaam afbeeldingen gebruiken

Afbeeldingen zijn een belangrijk onderdeel van een website. Ze bepalen de sfeer van je pagina, ze dienen als aanvulling op je teksten en je kunt ermee laten zien wie je bent en wat je doet. Maar naast deze nuttige toepassingen worden afbeeldingen ook vaak puur ter opvulling gebruikt. 

Als je gebruik maakt van (te) veel afbeeldingen op je website, dan kan dit leiden tot een tragere laadtijd. Iets wat ontzettend frustrerend kan zijn voor je bezoekers en daarnaast veel meer CO2 uitstoot met zich meebrengt. De servers waarop je website draait, en je computer moeten hier namelijk harder voor werken. 

Daarom is het belangrijk om de afbeeldingen op je website op de juiste manier te gebruiken. Hieronder lees je hoe je dit toepast op je website.

Afbeeldingen verkleinen

Het allerbelangrijkst bij het gebruik van afbeeldingen is, dat je deze in het juiste formaat én bestandsformaat op je website plaats. Dit heet afbeeldingscompressie.

Het formaat bepalen

Allereerst kijk je hoe groot je de afbeelding op je website wilt tonen. Is dit bijvoorbeeld over de hele breedte van je website, of maar de helft van de pagina? Vervolgens bepaal je de grootte van de afbeelding in pixels. Bij een afbeelding op volledige breedte zal dit uitkomen op +/- 1200 pixels. Om ervoor te zorgen dat je afbeelding ook geschikt is voor 4K en retina schermen, moet je het aantal pixels van je afbeelding keer 1,5 doen. De breedte van een pagina brede afbeelding wordt dan 1200 x 1,5 = 1800 pixels. 

Voor een afbeelding over de helft van het scherm gebruik je dezelfde formule, maar dan met +/- 600 pixels breedte. Voor een kwart van het scherm 300 pixels breedte enzovoorts. Zelf maken wij gebruik van tools als Adobe Photoshop en Affinity Designer om het formaat van de afbeelding te verkleinen. 

De bestandsgrootte verkleinen

Om de bestandsgrootte van de afbeelding vervolgens te verkleinen kun je gebruik maken van Adobe Photoshop / Affinity Designer of een compressie plugin voor WordPress. 

Een goede compressie plugin die wij vaak gebruiken is ReSmush.it. Deze plugin verkleint je afbeelding automatisch tijdens het uploaden. 

Zelf kiezen we het liefst voor Adobe Photoshop of Affinity Designer. Hiermee verklein je handmatig de afbeelding en kun je hem opslaan in een modern bestandsformaat, zoals WEBP.

Lazy loading gebruiken

Een andere manier om op een efficientere manier met afbeeldingen om te gaan is door het gebruik van “lazy loading” voor afbeeldingen in te stellen. Dit betekent dat afbeeldingen pas worden geladen zodra de bezoeker de afbeelding op de website ziet. Een handige truc die ervoor zorgt dat je pagina sneller geladen wordt omdat de pagina niet in 1 keer helemaal geladen hoeft te worden.

Ook als het gaat om duurzaamheid is het goed om lazy loading toe te passen. Mocht de bezoeker al voor het zien van de afbeelding doorklikken naar een andere pagina, dan heeft dit ook een gunstig effect, omdat de afbeelding niet geladen hoeft te worden. 

Iconen in plaats van afbeeldingen

Wie duurzaam webdesign toepast zal regelmatig uitzoeken of het mogelijk is om een icoon te gebruiken in plaats van een afbeelding. Een icoon is een vector bestand waarin vaak 1, of een paar kleuren gebruikt worden. Het grote voordeel van iconen is dat ze een ontzettend klein bestandsformaat hebben. Vaak tussen de 1 en 10 KB. Een afbeelding weegt daarentegen al snel 50 tot 100 KB. 

Meer over duurzaam webdesign?

Naast het optimaliseren van afbeeldingen zijn er nog tal van manieren waarop wij duurzaam webdesign toepassen. Wil je hier meer over weten, neem dan vooral contact met ons op. We vertellen je er graag alles over. Onderaan deze pagina vind je ook een aantal andere interessante blogposts over duurzaam webdesign.