Hoe zorg ik dat afbeeldingen snel laden en er scherp uitzien?

Scherpe afbeeldingen die snel laden zijn goed voor je bezoekers én voor je positie in zoekmachines. Op Bloomsite zijn drie factoren bepalend: het bestandsformaat en de afmetingen die je kiest vóór het uploaden, de automatische compressie die daarna inschakelt als de beeldoptimalisatie aanstaat, en de alt-tekst die je per afbeelding invult.

Op de afbeeldingen in dit artikel zijn telkens enkele kerninstellingen oranje gemarkeerd en genummerd; de overige in de tekst vetgedrukte instellingen vind je op dezelfde pagina of in hetzelfde venster.

1. Kies de juiste afmetingen vóór het uploaden

Upload een afbeelding altijd op de afmeting waarop hij op je website wordt getoond. Een uitgelichte afbeelding bij een blog-bericht heeft doorgaans een breedte van 1200 px; een logo of icoon in een blok is veel kleiner. Een te groot bestand laden bezoekers onnodig lang — een te klein bestand ziet er wazig uit op hogere schermresoluties.

• Uitgelichte afbeelding (blog-berichten, dienstenkaarten): 1200 × 630 px is een veilige standaard.
• Blokafbeelding (in een sectie of kolom): pas de breedte aan op de kolombreedte op je pagina — vaak 400–800 px.
• Logo en favicon: gebruik de precieze afmetingen die in de instellingen worden vermeld.

2. Kies het juiste bestandsformaat

• JPG — voor foto's en afbeeldingen met veel kleurnuances. JPG geeft een kleine bestandsgrootte zonder zichtbaar kwaliteitsverlies bij de aanbevolen compressie.
• PNG — voor afbeeldingen met een transparante achtergrond (logo's, iconen). PNG-bestanden zijn groter dan JPG; gebruik PNG alleen als transparantie echt nodig is.
• WebP — het modernste formaat: compacter dan JPG én ondersteunt transparantie. Alle gangbare browsers ondersteunen WebP. Upload WebP als je afbeeldingssoftware dat aanbiedt.

3. Bekijk en beheer je afbeeldingen via de Mediabibliotheek

1. Open de Mediabibliotheek
   Open in het menu links Media om de Mediabibliotheek te openen. Hier zie je alle afbeeldingen, video's en documenten die op je website staan.

   

2. Voeg een alt-tekst toe
   Klik in de Mediabibliotheek op een afbeelding. Het detailvenster opent. Bekijk het veld Alternatieve tekst rechts in het venster en vul een korte, beschrijvende omschrijving in van de afbeelding. De alt-tekst wordt automatisch opgeslagen zodra je het veld verlaat; je hoeft niet apart op een knop te klikken.

   

Een goede alt-tekst beschrijft de afbeelding concreet: "Vrouw geeft massagebehandeling aan klant op een tafel" werkt beter dan "foto" of "afbeelding". Houd het beknopt — één tot twee zinnen is genoeg.

4. Compressie via Bulk optimalisatie

Is de beeldoptimalisatie ingeschakeld op je website? Dan worden nieuw geüploade afbeeldingen automatisch verkleind zodra je ze uploadt. Heb je eerder afbeeldingen geüpload voordat de optimalisatie aanstond, of wil je controleren welk percentage al is verwerkt? Gebruik dan de Bulk optimalisatie-tool.

1. Open Bulk optimalisatie
   Ga in het menu links naar Bulk optimalisatie (onder Media). Bovenaan zie je het Overzicht: het aantal originele afbeeldingen, hoeveel megabytes zijn bespaard en welk percentage al is geoptimaliseerd.

   

Staan er nog niet-geoptimaliseerde afbeeldingen in het overzicht? Klik dan op Bulk optimaliseren om alle resterende afbeeldingen in één keer kleiner te maken. De pagina toont de voortgang tijdens het optimaliseren.

Is de beeldoptimalisatie niet ingeschakeld op je website, dan heeft de Bulk optimalisatie-pagina niets te verwerken. Neem in dat geval contact op met het Bloomsite-team om de optimalisatie in te schakelen.

5. Lazy loading — altijd automatisch actief

Afbeeldingen die buiten het scherm staan, worden pas geladen op het moment dat een bezoeker er naartoe scrolt. Dit verkort de laadtijd van de pagina aanzienlijk. Lazy loading is altijd, automatisch ingeschakeld — ongeacht je instellingen.

Samenvatting: checklist voor scherpe, snelle afbeeldingen

• Upload op de juiste afmeting (niet groter dan nodig).
• Gebruik JPG voor foto's, PNG alleen voor transparantie, WebP als het kan.
• Vul voor elke afbeelding een beschrijvende alt-tekst in.
• Controleer via Bulk optimalisatie of alle afbeeldingen zijn geoptimaliseerd.