Diafragmaat
Diafragmaat
Als website ontwikkelaar weet je dat eerste indrukken cruciaal zijn. Vanaf het moment van laden van de pagina, vormt er binnen 2 seconden al een oordeel over je website. Dit oordeel wordt grotendeels op snelheid en visuele professionaliteit gedaan. Foto's zijn daarom geen "leuke toevoeging", maar een essentieel onderdeel van succesvolle online communicatie.
Voor ZZP'ers en MKB-ondernemers betekenen kwaliteitsfoto's het verschil tussen een professionele uitstraling en een amateuristische website die potentiële klanten wegjaagt. Denk aan een restaurant zonder foto's van het interieur en appetijt-opwekkende gerechten, of een kapper zonder voorbeelden van zijn werk - ondenkbaar toch?
Website ontwikkelaars en ontwerpers weten dat foto's de gebruikerservaring maken of breken. Ze verlagen de bounce rate, verhogen de conversie en maken content begrijpelijker. Bovendien speelt visuele content steeds belangrijker mee in zoekresultaten.
Afbeeldingen moeten dus goed geoptimaliseerd zijn voor web... Aan de slag!
Tegenwoordig gebruiken we WEBP als bestandsformaat. Binnen de Webp opslag opties selecteren we "lossy" en gebruiken we een optimalisatie waarde waarbij we niet al te veel kwaliteitsverlies hebben, maar wel een kleiner bestand krijgen. Meestal ligt de waarde tussen de 10 en de 50 (100 is max).
Voor foto's die ik ga gebruiken voor de gehele breedte van het scherm zoals hero- of in content-afbeeldingen, sla ik de foto of afbeelding twee keer op. De eerste foto is met een
lange kant van 900 pixels. De tweede foto met een lange kant van 1400 pixels.
Geef een betekenisvolle bestandsnaam en gebruik een liggende streep - tussen de woorden. Voeg -900 of -1400 toe aan het einde om te differentiëren in de grootte.
De alt text moet, kort, relevant aan de foto en duidelijk zijn, alsof je het uitgelegd aan iemand die de foto niet ziet. Idealiter tussen 5 en 15 woorden. Gebruik maximaal ongeveer 125 tekens – screenreaders lezen vaak niet verder. Gebruik een of twee zoektermen waar je op wil ranken, maar niet te veel of te vaak.
Ik gebruik 2 technieken die voor snelheidswinst kunnen zorgen tijdens het laden van de pagina.
Als eerste gebruiken we de Media Query-optie binnen HTML. We tonen een kleinere afbeelding van 900 pixels breed op kleine schermen, en een grotere afbeelding van 1400 pixels breed op grotere schermen. Dit zorgt ervoor dat elke gebruiker een geoptimaliseerde versie van de afbeelding te zien krijgt, passend bij zijn of haar schermformaat.
Laden van afbeelding met minimale breedte afhankelijkheid.<figure class="mx-auto"> <picture> <source media="(min-width: 640px)" srcset="relevante-naam-van-de-foto-1400.webp"> <img src="relevante-naam-van-de-foto-900.webp" alt="Goede alt-tekst die de foto en bedoeling ervan omschrijft." loading=lazy class="mb-1 rounded-xl shadow aspect-video"> </picture> <figcaption class="mt-1"> Beschrijving met extra informatie nog niet in de alt text. </figcaption> </figure>
Op de tweede plaats zie je in de HTML de eigenschap loading="lazy" staan. Deze zorgt ervoor dat een afbeelding pas wordt geladen wanneer deze in beeld komt of bijna zichtbaar is. We activeren deze optie alleen wanneer de afbeelding onder de vouw staat — dat wil zeggen: wanneer de bezoeker eerst moet scrollen om de afbeelding te zien. Dit verbetert de laadtijd van de pagina en draagt bij aan een betere gebruikerservaring.
Afbeeldingen en de bijbehorende teksten optimaliseren is essentieel voor elke moderne website. Je site wordt er sneller van, bezoekers begrijpen de inhoud beter, en zoekmachines belonen dit met een hogere positie in de zoekresultaten.
De combinatie van het aanpassen van formaat en resolutie levert vaak het snelste en het meeste resultaat op wat betreft laadsnelheid. Komt een bezoeker met een klein scherm, dan krijgt die automatisch een kleinere afbeelding te zien — wat tot wel 50% snelheidswinst kan opleveren.
Het eerder genoemde blurren en croppen zijn niet op elke afbeelding toepasbaar, maar kunnen de bestandsgrootte wel tot 150% verkleinen. Achtergrondvervaging (blur) is tegenwoordig zelfs direct op smartphones in te stellen en voegt bovendien sfeer toe aan een foto.
Kies altijd voor kwalitatief goede afbeeldingen die iets toevoegen aan je verhaal en passen bij de uitstraling van je website. Een goed gekozen én geoptimaliseerde afbeelding versterkt je boodschap, zonder je website te vertragen.
