Afbeeldingen optimaliseren voor je website of webshop

"De afmeting is niet van belang"

Dit gaat niet op voor de afmetingen, en bestandsgrootte, van afbeeldingen die worden gebruikt in je website en je webshop. Hierbij is het zeer zeker wel van belang. Het zorgt uiteindelijk ook indirect voor een beter positie in Google, maar belangrijker nog, voor een betere klantervaring. Doordat je afbeeldingen optimaliseert is je pagina sneller geladen en hoeven bezoekers minder lang te wachten tot de pagina volledig zichtbaar is.

Veelvoorkomende fouten bij afbeelding in websites en webwinkel

Met het huidige aanbod aan CMS'en en pakketten om websites mee te bouwen is er een oplossing voor iedere websitebouwer afgestemd op zijn kennisniveau. Een websitebouwer met een laag kennisniveau zal kiezen voor een pakket waarbij veel "automatisch" gaat zonder precies te weten wat de gevolgen zijn. Vaak worden websites gebouwd op een desktopscherm en gaat men op het gevoel af om te bepalen of de keuzes juist zijn. Dit is dus vaak ook het geval met de afbeeldingen die men gebruikt.

Te grote afbeeldingen (aantal pixels voor breedte en hoogte) gebruiken op een website

De meest voorkomende fout is het gebruik van bestanden die veel te groot zijn voor op een website. Het resultaat kan zijn dat webpagina's erg traag laden, zeker op een mobiel. Een flinke 17 inch laptop is vaak qua resolutie niet breder dan 1920 pixels. Het is dan ook vrijwel nooit nuttig om afbeeldingen te uploaden naar je website die groter zijn dan dit. Vaak zelfs 1000 pixels of minder is al voldoende. Zorg er dus voor dat in deze eerste stap dit al wordt geregeld en de afbeeldingen zoveel mogelijk al in afmetingen zijn aangepast. Dus niet meer direct van je camera in de website slepen! Natuurlijk zullen er mensen zijn die zeggen "maar het CMS past dit zelf aan" en daarin hebben ze vaak gelijk. Maar in veel gevallen worden ook de originele bestanden in de website bewaard en zal de totale omvang van de website flink en onnodig toenemen.

Niet ge-optimaliseerd afbeeldingen

Een afbeelding die de juiste afmetingen heeft is nog niet automatisch ge-optimaliseerd voor gebruik op een website. Een foto van een digitale camera heeft vaak een kwaliteit die veel hoger is dan nodig voor een eenvoudige webpagina. Tevens bevat een foto veel meer gegevens dan alleen het beeld wat je ziet. Zo zitten er gegevens in over de camera, belichting, lokatie en nog heel veel meer. Allemaal niet nodig voor op een website. Door je afbeeldingen op te slaan zonder deze extra data zal de bestandsgrootte minder worden en dus sneller laden op je website. Ook is het vaak geen probleem om je afbeelding met iets minder unieke kleuren op te slaan. Dit valt meestal niet op maar verminderd de grootte van de afbeelding flink.

Verkeerd type afbeelding

Afbeeldingen zijn er in verschillende typen met elk hun eigen kwaliteiten en eigenschappen.
Door ze op de juiste plek toe te passen is er al een stap in de goede richting gezet. Hoe je weet wat het juiste type is? Gewoon proberen is een prima methode. Het resultaat moet voldoende zijn voor de toepassing maar niet meer dan dat. En natuurlijk is een goede test van je website met één van de vele testwebsites een goede graadmeter.

De meest voorkomende bestandsextensies (types) voor op een website zijn:

JPG / JPEG (Joint Photographic Experts Group)
JPEG staat voor Joint Photographic Experts Group en is een formaat dat gebruik maakt van een compressie waarbij in meer of mindere mate informatie verloren gaat. Dit hoeft zeker geen probleem te zijn op een website en is in veel gevallen ook vrijwel onzichtbaar als de mate van compressie goed gekozen wordt. De voordelen van het JPG formaat zijn vooral te vinden in het verkleinen van de bestandsgrootte en de voordelen die dat met zich meebrengt.

PNG (Portable Network Graphics)
PNG staat voor Portable Network Graphics en kan als verliesvrije compressiemethode worden gebruikt. De kwaliteit blijft dus gelijk maar de bestandsgrootte wordt minder. Een ander verschil met het JPG formaat is dat het transparantie ondersteunt.

GIF (Graphics Interchange Format)
Een GIF (Graphics Interchange Format) bestand zul je voornamelijk gebruiken voor hele kleine icoontje en bewegende plaatjes. Een GIF ondersteunt ook transparantie.

SVG (Scalable Vector Graphics)
SVG staat voor Scalable Vector Graphics en is een op XML gebaseerde twee-dimensionale afbeelding. Het is schaalbaar, indexeerbaar en kan prima worden gecomprimeerd. Het wordt veel gebruikt voor kleine icoontjes en kan zonder kwaliteitsverlies worden aangepast in grootte.

WebP
WebP is een modern afbeeldingsformaat welke zowel met als zonder verlies van kwaliteit kan opslaan. Volgens google zijn WebP afbeeldingen 26% kleiner dan verliesvrije PNG bestanden en 25% tot 34% kleiner dan vergelijkbare jpg/jpeg afbeeldingen.

AVIF
AVIF is een relatief nieuw formaat en staat voor AV1 Image File Format en komt voort uit het AV1 video formaat. De ondersteuning van het formaat groeit hard en dat is niet zonder reden, de compressie is echt geweldig.

Als test heb ik een vakantiefoto middels Squoosh omgezet van de originele jpg afbeelding naar een voor web ge-optimaliseerde jpeg, een webp en een avif. De resultaten staan in onderstaande tabel.

Zoals je kunt zien zijn de verschillen enorm en zeker de moeite waard om van die voordelen gebruik te maken.

Wat is dan de juiste afbeelding voor mijn website?

Het korte antwoord is: zo klein mogelijk maar het moet er gewoon nog netjes uitzien voor het doel van de afbeelding. Dus een afbeelding die alleen voor de sfeer bedoeld is mag best iets minder van kwaliteit zijn als dat betekent dat de afbeelding veel kleiner is. Het voordeel is namelijk enorm, zeker op mobiele apparaten en bij trage verbindingen.