Diafragmaat
Schakel donker/licht modus D
logo Diafragmaat

Afbeeldingen optimaliseren voor een website.

Blogartikel 1 week geleden geschreven.
Categorieën:
optimalisatie
seo
fotografie

Waarom foto's plaatsen op je website een absolute must is.

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?
Het bewerken en optimaliseren van foto's voor web gebruik.
Het optimaliseren van afbeeldingen helpt bij een betere online vindbaarheid en een duidelijkere gebruikerservaring. Zorg dat de afbeelding het onderwerp ondersteunt én het juiste gevoel overbrengt.
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!

Onderwerpen die belangrijk zijn voor goed geoptimaliseerde web foto's.

Waar let je op bij het selecteren van je bronafbeelding?

  • Formaat van bronfoto moet minimaal 2000 pixels voor de langste kant zijn voor hero- of in content-afbeeldingen. Voor bronfotos in bijvoorbeeld producttabellen, lijsten of overzichten kan het kleiner.
  • De foto moet passen bij het onderwerp.
  • Voldoende scherp en met name op het onderwerp.
  • Afbeelding moet passen binnen de look en feel van de site: Denk hierbij aan kleurengebruik en uitstraling.

Bewerken van je foto waardoor ze kleinere bestandsformaten krijgen.

  • Als eerste kan je de bronfoto croppen en snij je randen van de originele foto af waar kan.
  • Ten tweede kan je blur effecten toevoegen op onderdelen van de afbeelding die er minder toe doen.

Welke bestandsindeling gebruiken we en op welk formaat slaan we op.

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.

Gebruik van bestandsnamen en alt texten.

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.

Het laden van de Foto in de webpagina

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.

Mijn bevindingen en conclusie

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.

Uit het blog

1 week geleden
optimalisatie
snelheid
fotografie

Foto's optimaliseren voor website gebruik.

4 tips om foto's sneller te laten laden.
Door Guido
eigenaar Diafragmaat
4 maanden geleden
creatief
schrijven

Schrijven vanuit je hart

"Maar misschien nog wel het allerbelangrijkste is het gewoon te doen, niet luisteren naar die innerlijke criticus die je al blokkeert voordat je begint. Pak die pen of dat toetsenbord en..."
logo
Door Noortje Zuidema
schrijver
8 maanden geleden
a.i.
s.e.o.

Bestaat SEO in 2025 nog?

"SERP, ofwel de zoekresultaten pagina's, worden meer en meer door AI gegenereerd. SEO ofwel Search Engine Optimalisatie, gaat daarom een steeds kleinere rol spelen. Wat gaat er veranderen jouw website?"
Door Guido
eigenaar Diafragmaat
1 jaar geleden
socials
s.e.o.

Delen? OG tag toch!

"OG, ofwel Open Graph is een set van afspraken die het delen van inhoud, op sociale media defineerd. Maar is het eigenlijk wel de moeite waard om dit te doen?"
Door Guido
eigenaar Diafragmaat
1 jaar geleden
technisch
a.i.
s.e.o.

Ai ai aii! SEO!

"SEO, het slimme neefje op het internetmarketingfeestje staat tegenwoordig pal naast AI. Samen maken onderdeel uit van de digitale VIP's!"
Door Guido
eigenaar Diafragmaat
1 jaar geleden
technisch
Laravel

Blade componenten - WOO!

"De blade componenten van Laravel zorgen voor overzicht, uniformiteit, en vooral ook snelheid. We gaan er vandaag een maken en gelijk toepassen op de pagina! We hanteren als zodanig de werkwijze WOO (Write Only Once). Of door de makers van Laravel, ook wel DRY (Don't Repeat Yourself) genoemd."
Door Guido
eigenaar Diafragmaat
1 jaar geleden
technisch
Livewire

Het is tijd voor tijd.

"Verre vakanties, vele verhalen, soms vreemde vogels, en vaak verzetten. Bij het verzetten, gaat het dan over de klok. Ik heb eens gekeken hoe we het verschil in tijdzone het beste kunnen uitleggen op een webpagina. Al doende kwam ik op het idee een live wereldklok te maken die ook verschillen in de zomer & wintertijd bijhoudt."
Door Guido
eigenaar Diafragmaat