@dictu/image
v3.0.0
Image CSS component.
0/weekUpdated 2 months agoEUPL-1.2Unpacked: 8.4 KB
Published by Dienst ICT Uitvoering
npm install @dictu/imageImage component
De image component biedt een toegankelijke en responsieve manier om afbeeldingen
weer te geven.
Gebruik deze component
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";
Richtlijnen
- 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 .
Beschrijving
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.
$3
`html
src="/example-image.jpg"
alt="Beschrijving van de afbeelding"
width="640"
height="640"
loading="lazy"
/>
src="/decorative-image.jpg"
alt=""
width="640"
height="480"
loading="lazy"
/>
`
CSS Klassen
- .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)
Functies
- 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
Beeldverhoudingen
De component ondersteunt vier standaard beeldverhoudingen:
$3
`html`
Ideaal voor profielfoto's, iconen en vierkante afbeeldingen.
$3
`html`
src="..."
alt="..."
/>
Geschikt voor landschapsfoto's en horizontale content.
$3
`html`
src="..."
alt="..."
/>
Perfect voor portretfoto's en verticale content.
$3
`html`
Ideaal voor thumbnails van video's en widescreen content.
Toegankelijkheid
$3
Voor afbeeldingen die informatie overbrengen:
`html`
src="chart.jpg"
alt="Verkoopcijfers Q1 2024 tonen 15% stijging"
role="img"
/>
$3
Voor afbeeldingen die alleen visueel zijn:
`html`
$3
Voor klikbare afbeeldingen voeg beschrijvende aria-labels toe:
`html`
aria-label="Lees artikel: Nieuwe ontwikkelingen in web toegankelijkheid"
>
Attributes
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
Performance
- 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
Focus Management
De component heeft ingebouwde focus styling:
- Zichtbare outline bij keyboard navigatie
- Decoratieve afbeeldingen krijgen geen focus
- Configureerbare focus kleuren via CSS custom properties
CSS Custom Properties
- --govnl-focus-outline-color`: Kleur van de focus outline
Browser Ondersteuning
- Moderne aspect-ratio CSS eigenschap
- Fallback voor oudere browsers via padding-top methode
- Progressive enhancement voor lazy loading
Licentie
EUPL-1.2