Snellere website door de optimalisatie van afbeeldingen

Er zijn veel manieren om de snelheid van je website te verbeteren. Het optimaliseren van je afbeeldingen is één van deze manieren, maar hoe doe je dit precies? Welke optimalisaties aan je afbeeldingen kun je uitvoeren om een snellere website te krijgen?

Afbeeldingen optimaliseren voor een snellere website

Bij het inladen van een pagina zijn afbeeldingen vaak het zwaarste wat een browser moet verwerken. Zo zie je bijvoorbeeld vaak dat alle afbeeldingen tegelijk ingeladen worden wanneer een pagina wordt geopend, maar wist je dat dit helemaal niet nodig is? Hieronder leggen we je uit hoe je dit aan kunt passen én geven we je nog een aantal andere tips voor het optimaliseren van de afbeeldingen op je website.

Tijdens het inladen van de pagina wordt ook een script ingeladen die bijhoudt welke afbeelding-tags, een ‘data-src’ attribuut bevatten. Zodra dit script doorheeft dat er zo’n afbeelding-tag in de viewport voorkomt, neemt hij de waarde van het ‘data-src’ attribuut over en maakt er een ‘src’ attribuut van. Doordat het ‘data-src’ attribuut automatisch omgetoverd wordt naar het src attribuut, zie je de afbeelding pas zodra de afbeelding zich in de viewport bevindt. De viewport is het gedeelte van de website wat je ziet als gebruiker. En zodra je gaat scrollen, dan verplaatst de viewport zich over de website. De viewport verschilt dan ook per device en resolutie.

Bovenstaande klinkt misschien ingewikkeld, maar door deze simpele ingreep worden afbeeldingen pas opgehaald als ze ook daadwerkelijk nodig zijn. Dit betekent dat als jij op het deel van de pagina komt waar de afbeelding zich bevindt, dat deze dan pas wordt opgehaald (en niet eerder). Kortom snelheidswinst bij het inladen.

Bestandsgrootte van een afbeelding

De bestandsgrootte van een afbeelding hangt in principe af van de volgende twee dingen:

• De hoogte en de breedte van de afbeelding
• De manier waarop een afbeelding is samengesteld

De eerste zou een no-brainer moeten zijn. Er moet namelijk geen afbeelding van 4000px hoog en 3500px breed worden neergezet op een plek waar maar ruimte is voor een afbeelding van 400px hoog en 350px breed. De eerste is uiteraard een stuk groter in bestandsgrootte dan de tweede, en dat moet allemaal wel ingeladen worden.

De samenstelling (of formaat) van een afbeelding hangt af van hoe deze is opgeslagen. De meest voorkomende formaten zijn vooral .jpg, .png en .gif afbeeldingen. Als je het bij deze formaten houdt en goed op de hoogte en de breedte let, dan zit je over het algemeen goed.

Maar we zouden de afbeeldingen nog een stap verder kunnen optimaliseren. Er is namelijk een formaat in opkomst dat qua bestandsgrootte nog kleiner is dan de voorgenoemde formaten. Namelijk het formaat ‘WEBP’.

WEBP als snelle afbeelding

Zoals gezegd is het formaat WEBP enorm in opkomst. Dat komt hoofdzakelijk doordat het zorgt voor nog kleinere afbeeldingen dan jpg, png of gif. En kleinere afbeeldingen zorgen natuurlijk weer voor een pagina die nog sneller laadt!

Helaas wordt WEBP nog niet in elke browser ondersteund. Maar om toch altijd een afbeelding te kunnen tonen, is het aan te raden om gebruik te maken van het picture element. Door hier gebruik van te maken zal de browser, indien WEBP niet wordt ondersteund, altijd terugvallen op de alternatieve formaten met de kleinste bestandsgrootte.

Picture > img

Om te werken met afbeeldingen in verschillende groottes/formaten is er het HTML element ‘Picture‘. Hieronder zie je een voorbeeld in HTML.

Een picture element bestaat, zoals in het voorbeeld is te zien, uit twee onderdelen. Een source element en een ouderwets img element. De laatste fungeert als een backup voor de eerste. In het geval dat de afbeelding niet met het source element geladen kan worden, wordt teruggevallen op de standaard img variant. Zo wordt er dus altijd een afbeelding getoond.

Het volgende voordeel van het source element is het tegelijk invoeren van verschillende onderdelen. Bijvoorbeeld meerdere afbeeldingen voor verschillende devices en resoluties. Daarbij komt dat een source element vaker kan terugkomen in een picture element en een img element maar één keer voor mag komen. Wat weer met zich meebrengt dat het picture element veel veelzijdiger is dan de ouderwetse img variant.

Aan de slag!

Start nu ook met de optimalisatie van de afbeeldingen op je website! Want met behulp van bovenstaande tips zal dit jou vast lukken 😉 Wil je nog meer over dit onderwerp lezen? Dan raad ik je aan om “Now You See Me: How To Defer, Lazy-Load And Act With IntersectionObserver” van Denys Mishunov te lezen.