Image CSS component.
npm install @dictu/imageDe image component biedt een toegankelijke en responsieve manier om afbeeldingen
weer te geven.
Je kunt de CSS zo in je project installeren:
``console`
npm install --save-dev @dictu/image
Je kunt de CSS uit node_modules/ importeren:
`html`
Als je CSS imports gebruikt vanuit JavaScript:
`javascript`
import "@dictu/image/dist/index.css";
- Gebruik in CSS de .dictu-image class name voor de image component.width
- Specificeer altijd en height attributen voor layout shift preventie.alt=""
- Gebruik beschrijvende alt-tekst voor betekenisvolle afbeeldingen.
- Voor decoratieve afbeeldingen gebruik .
De image component biedt een toegankelijke en responsieve manier om afbeeldingen
weer te geven. De component ondersteunt verschillende beeldverhoudingen, lazy
loading, en heeft ingebouwde toegankelijkheidsfeatures voor zowel betekenisvolle
als decoratieve afbeeldingen.
`html class="dictu-image dictu-image__aspect-ratio:square"
src="/example-image.jpg"
alt="Beschrijving van de afbeelding"
width="640"
height="640"
loading="lazy"
/>
class="dictu-image dictu-image__aspect-ratio:landscape"
src="/decorative-image.jpg"
alt=""
width="640"
height="480"
loading="lazy"
/>
`
- .dictu-image — basis styling voor afbeeldingen.dictu-image__aspect-ratio:square
- — vierkante beeldverhouding (1:1).dictu-image__aspect-ratio:landscape
- — liggende beeldverhouding (4:3).dictu-image__aspect-ratio:portrait
- — staande beeldverhouding (3:4).dictu-image__aspect-ratio:video
- — video beeldverhouding (16:9)
- Responsief ontwerp: Automatische aanpassing aan containergrootte
- Lazy loading: Ondersteuning voor loading="lazy" attribuut
- Toegankelijkheid: Verschillende modi voor betekenisvolle en decoratieve
afbeeldingen
- Focus management: Zichtbare focus indicators voor toegankelijkheid
- Beeldverhoudingen: Verschillende beeldverhoudingen beschikbaar
- Prestaties: Geoptimaliseerd voor snelle laadtijden
De component ondersteunt vier standaard beeldverhoudingen:
`html`
Ideaal voor profielfoto's, iconen en vierkante afbeeldingen.
`html` class="dictu-image dictu-image__aspect-ratio:landscape"
src="..."
alt="..."
/>
Geschikt voor landschapsfoto's en horizontale content.
`html` class="dictu-image dictu-image__aspect-ratio:portrait"
src="..."
alt="..."
/>
Perfect voor portretfoto's en verticale content.
`html`
Ideaal voor thumbnails van video's en widescreen content.
Voor afbeeldingen die informatie overbrengen:
`html` class="dictu-image"
src="chart.jpg"
alt="Verkoopcijfers Q1 2024 tonen 15% stijging"
role="img"
/>
Voor afbeeldingen die alleen visueel zijn:
`html`
Voor klikbare afbeeldingen voeg beschrijvende aria-labels toe:
`html`
href="/artikel"
aria-label="Lees artikel: Nieuwe ontwikkelingen in web toegankelijkheid"
>
![]()
De component ondersteunt alle standaard HTML img attributes:
- src: Pad naar de afbeelding (verplicht)
- alt: Alternatieve tekst (verplicht, kan leeg zijn voor decoratieve
afbeeldingen)
- width/height: Afmetingen voor layout shift preventie
- loading: lazy of eager voor laadstrategieimg
- role:
- aria-describedby: Koppeling met beschrijvende tekst
- Gebruik loading="lazy" voor afbeeldingen buiten de viewportwidth
- Specificeer altijd en height om layout shift te voorkomensrcset
- Gebruik geoptimaliseerde afbeeldingsformaten (WebP, AVIF)
- Overweeg responsive images met voor verschillende schermgroottes
De component heeft ingebouwde focus styling:
- Zichtbare outline bij keyboard navigatie
- Decoratieve afbeeldingen krijgen geen focus
- Configureerbare focus kleuren via CSS custom properties
- --govnl-focus-outline-color`: Kleur van de focus outline
- Moderne aspect-ratio CSS eigenschap
- Fallback voor oudere browsers via padding-top methode
- Progressive enhancement voor lazy loading
EUPL-1.2