Afbeeldingen en media beheren

Afbeeldingen en video's maken je website visueel aantrekkelijk en versterken je boodschap. Webey biedt uitgebreide mogelijkheden voor het uploaden, beheren en optimaliseren van media. In dit artikel leer je hoe je afbeeldingen en video's toevoegt aan je pagina's en hoe je ze optimaliseert voor snelheid, SEO en toegankelijkheid.

Afbeeldingen uploaden

Er zijn verschillende manieren om afbeeldingen toe te voegen aan je Webey-pagina:

• Via het Afbeelding-blok — voeg een Afbeelding-blok toe aan je pagina en klik op Afbeelding uploaden. Selecteer een bestand vanaf je computer en het wordt automatisch geüpload naar de mediabibliotheek.
• Drag-and-drop — sleep een afbeelding direct vanuit je bestandsbeheerder naar het uploadveld in de editor. Dit is de snelste manier om afbeeldingen toe te voegen.
• Mediabibliotheek — klik op Kies uit bibliotheek om een eerder geüploade afbeelding te selecteren. Alle afbeeldingen die je uploadt worden automatisch opgeslagen in de mediabibliotheek van je site.

De mediabibliotheek

De mediabibliotheek is een centraal overzicht van alle geüploade bestanden op je site. Je vindt de mediabibliotheek in het linkermenu onder Media. Hier kun je:

• Alle geüploade afbeeldingen en bestanden bekijken in een raster- of lijstweergave.
• Zoeken naar specifieke bestanden op bestandsnaam.
• Bestanden verwijderen die je niet meer nodig hebt.
• De URL van een bestand kopiëren om het elders te gebruiken.

De mediabibliotheek wordt gedeeld over alle pagina's van je site, dus een afbeelding die je eenmaal uploadt kan op meerdere pagina's worden hergebruikt.

Ondersteunde bestandsformaten

Webey ondersteunt de volgende afbeeldingsformaten:

• JPEG (.jpg, .jpeg) — het meest gebruikte formaat voor foto's. Biedt goede compressie met acceptabel kwaliteitsverlies. Ideaal voor foto's en afbeeldingen met veel kleurvariatie.
• PNG (.png) — ondersteunt transparantie en is verliesvrij. Gebruik dit voor logo's, pictogrammen en afbeeldingen met scherpe randen of tekst.
• WebP (.webp) — een modern formaat dat kleinere bestanden oplevert dan JPEG en PNG met vergelijkbare kwaliteit. Aanbevolen voor de beste prestaties.
• SVG (.svg) — schaalbare vectorafbeeldingen die scherp blijven op elk schermformaat. Perfect voor logo's, iconen en eenvoudige illustraties.
• GIF (.gif) — ondersteunt animaties en transparantie. Gebruik dit voor eenvoudige animaties, maar houd er rekening mee dat GIF-bestanden groot kunnen zijn.

Instellingen van het Afbeelding-blok

Wanneer je een Afbeelding-blok selecteert, heb je toegang tot de volgende instellingen:

Alt-tekst

De alt-tekst (alternatieve tekst) beschrijft de inhoud van de afbeelding. Dit is essentieel voor twee redenen:

• Toegankelijkheid — schermlezers lezen de alt-tekst voor aan bezoekers die de afbeelding niet kunnen zien. Beschrijf wat er op de afbeelding te zien is, bijvoorbeeld "Team vergadert aan een grote houten tafel".
• SEO — zoekmachines gebruiken de alt-tekst om de inhoud van afbeeldingen te begrijpen. Een goede alt-tekst helpt je pagina hoger te scoren in afbeeldingzoekresultaten.

Vul altijd een alt-tekst in voor inhoudelijke afbeeldingen. Voor puur decoratieve afbeeldingen kun je de alt-tekst leeg laten.

Onderschrift (caption)

Het onderschrift verschijnt onder de afbeelding en biedt extra context. Gebruik het voor bronvermelding, een korte beschrijving of aanvullende informatie die relevant is voor de bezoeker.

Afmetingen en formaat

Pas de weergave van je afbeelding aan met de volgende opties:

• Breedte — stel de breedte in als percentage van de container of als vaste waarde in pixels.
• Hoogte — standaard wordt de hoogte automatisch berekend op basis van de beeldverhouding. Je kunt ook een vaste hoogte instellen.
• Object-fit — bepaal hoe de afbeelding binnen het frame past: cover (vult het hele frame, kan bijsnijden), contain (past volledig in het frame) of fill (rekt de afbeelding uit).

Uitlijning

Kies hoe de afbeelding binnen het blok wordt uitgelijnd:

• Links — de afbeelding staat aan de linkerkant, tekst loopt rechts erlangs.
• Gecentreerd — de afbeelding staat in het midden van het blok.
• Rechts — de afbeelding staat aan de rechterkant.

Het Galerij-blok

Voor het tonen van meerdere afbeeldingen naast elkaar gebruik je het Galerij-blok. Dit blok toont afbeeldingen in een aantrekkelijk raster. Je kunt de volgende instellingen aanpassen:

• Aantal kolommen — bepaal hoeveel afbeeldingen er naast elkaar staan (2, 3 of 4 kolommen).
• Tussenruimte — stel de ruimte in tussen de afbeeldingen.
• Beeldverhouding — kies of alle afbeeldingen dezelfde verhouding krijgen of hun eigen verhoudingen behouden.

Upload meerdere afbeeldingen tegelijk door ze samen te slepen naar het uploadveld, of voeg ze een voor een toe vanuit de mediabibliotheek.

Het Video-blok

Met het Video-blok kun je video's embedden van externe platforms. Webey ondersteunt de volgende videobronnen:

• YouTube — plak de URL van een YouTube-video (bijv. https://www.youtube.com/watch?v=...) en de video wordt automatisch ingebed.
• Vimeo — plak de URL van een Vimeo-video en deze wordt netjes ingebed met de Vimeo-speler.

Het video-blok past zich automatisch aan de breedte van de pagina aan en behoudt de juiste beeldverhouding. Je kunt de breedte beperken via de blokinstellingen als je de video kleiner wilt weergeven.

Tips voor afbeeldingsoptimalisatie

Snelle laadtijden zijn cruciaal voor gebruikerservaring en SEO. Volg deze tips om je afbeeldingen te optimaliseren:

Bestandsgrootte beperken

Grote afbeeldingen vertragen je website. Streef naar een maximale bestandsgrootte van 200-500 KB per afbeelding voor de meeste toepassingen. Hero-afbeeldingen op volledige breedte mogen groter zijn (tot 1 MB), maar houd het zo klein mogelijk.

Gebruik WebP

Het WebP-formaat biedt tot 30% kleinere bestanden dan JPEG bij vergelijkbare kwaliteit. Converteer je afbeeldingen naar WebP voordat je ze uploadt. De meeste beeldbewerkingsprogramma's en online tools ondersteunen WebP-export.

Juiste afmetingen gebruiken

Upload afbeeldingen in de afmetingen waarin ze worden weergegeven. Een afbeelding van 4000x3000 pixels uploaden terwijl deze slechts 800 pixels breed wordt getoond, is verspilling van bandbreedte. Richtlijnen:

• Hero-afbeeldingen — 1920x1080 pixels (full HD) is voldoende voor volledige breedte.
• Contentafbeeldingen — 800-1200 pixels breed is genoeg voor de meeste lay-outs.
• Thumbnails en galerij — 400-600 pixels breed volstaat.

Alt-tekst voor SEO

Schrijf beschrijvende alt-teksten die de inhoud van de afbeelding accuraat weergeven. Vermijd het volstoppen met zoekwoorden — schrijf natuurlijke beschrijvingen. Een goede alt-tekst is 5 tot 15 woorden lang en beschrijft wat er op de afbeelding te zien is.

Bestandsnamen

Geef je afbeeldingen beschrijvende bestandsnamen voordat je ze uploadt. Gebruik koppeltekens als scheidingsteken en vermijd spaties en speciale tekens. Bijvoorbeeld: team-vergadering-kantoor.webp in plaats van IMG_20260215_143022.jpg. Beschrijvende bestandsnamen helpen zoekmachines de context van de afbeelding te begrijpen.