Samenvatting
Met het afbeelding element plaats je een foto of afbeelding op je pagina. Je kunt de afbeelding een link geven, een beschrijving toevoegen voor toegankelijkheid, de grootte instellen per schermformaat, en een animatie laten afspelen wanneer bezoekers ernaar scrollen.
Hoe werkt het
Een afbeelding kiezen
Klik op het afbeeldingveld in het tabblad Opmaak om het bestandsbeheer te openen. Kies een bestaand bestand of upload een nieuw bestand.
Ondersteunde formaten: BMP, JPEG, JPG, PNG en WEBP
De grootte instellen
Onder het afbeeldingveld stel je de maximale breedte en hoogte in. Je kiest uit vaste waardes (240, 320, 480, 640, 960, 1280 of 1920 pixels breed) of Geen als je de originele afmeting wilt behouden. Je kunt per schermformaat een andere grootte instellen — zo kun je bijvoorbeeld op een telefoon een kleinere versie tonen.
Vulkleur (alleen SVG)
Met de afbeelding vulkleur vervang je de kleuren van een SVG-afbeelding door een kleur die je zelf kiest. Dit werkt alleen bij SVG-bestanden — niet bij gewone foto's zoals JPG of PNG.
Een link toevoegen
In het tabblad Instellingen kun je de afbeelding klikbaar maken. Je kiest wat er moet gebeuren als iemand erop klikt:
| Linktype | Wat gebeurt er? |
|---|---|
| Pagina | Gaat naar een pagina binnen je website |
| Collectie-item | Gaat naar een item uit een collectie |
| URL | Gaat naar een extern webadres |
| Afbeelding | Opent een afbeelding (in een lightbox) |
| Video | Speelt een video af |
| Video-URL | Gaat naar een externe video |
| Document | Opent een PDF of ander document |
| E-mailadres | Opent het e-mailprogramma van de bezoeker |
| Telefoonnummer | Start een telefoonoproep (op mobiel) |
Bij Link doel kies je waar de link opent: in hetzelfde venster, in een nieuw tabblad, in het hoofdvenster, of in een pop-up (popin).
Beschrijving voor toegankelijkheid (alt-tekst)
Vul het veld Aria label in met een korte beschrijving van wat er op de afbeelding te zien is. Dit is belangrijk voor twee redenen:
- Bezoekers die een schermlezer gebruiken (bijvoorbeeld slechtzienden) horen deze beschrijving voorgelezen
- Zoekmachines gebruiken de alt-tekst om te begrijpen wat er op de afbeelding staat
Lazy load (uitgesteld laden)
De optie Lazy load zorgt ervoor dat de afbeelding pas wordt geladen wanneer de bezoeker ernaar toe scrollt. Dit maakt je pagina sneller, omdat niet alle afbeeldingen tegelijk hoeven te laden.
Verbergen op bepaalde schermformaten
Met de instelling Verbergen kies je op welke apparaten de afbeelding niet wordt getoond: Desktop, Laptop, Tablet, Telefoon liggend of Telefoon staand.
Scroll-animatie
In het tabblad Instellingen kun je een animatie instellen die afspeelt wanneer de bezoeker naar de afbeelding scrollt:
| Instelling | Opties |
|---|---|
| Scrollsnelheid | Hoe snel de afbeelding meebeweegt ten opzichte van de rest van de pagina |
| Effect | Geen, Infaden, Inschuiven (links, rechts, boven, onder), Inzoomen, Uitzoomen |
| Effect start | Bij welk percentage van de pagina het effect begint |
| Effect terugkeren | Of het effect opnieuw afspeelt bij omhoog scrollen |
Wanneer gebruik je dit?
- Je wilt een foto of afbeelding toevoegen aan je pagina
- Je wilt een afbeelding klikbaar maken met een link
- Je wilt dat je pagina sneller laadt door lazy loading te gebruiken
- Je wilt een afbeelding alleen op bepaalde schermformaten tonen