Image

[wartburggraaf]

We willen graag meer leren over de Image component. In welke vorm, of vormen, wordt deze momenteel ingezet en toegepast binnen jouw organisatie?

Deel hieronder een link naar Figma, Storybook, Github of screenshots. Met deze informatie kunnen we bewijzen dat de component onderdeel moet worden van de NL Design System component library.

Daarnaast wordt het delen van onderzoek gewaardeerd. Dus heb je zelf onderzoek gedaan en zijn er inzichten voor dit component? Dan horen we dit ook graag!

Link naar bericht in Slack

Naam

Image

Doel

Toont een afbeelding.

Gerelateerde componenten

Figure

Onderzoek

Responsive images - MDN docs
Artikel bij MDN docs over het gebruik van responsive afbeeldingen.

Aspect ratio - MDN docs
Documentatie bij MDN docs over het gebruik van de aspect ratio CSS property.

Object fit - MDN docs
Documentatie bij MDN docs over het gebruik van de object fit CSS property.

Alt-texts: The Ultimate Guide
Uitgebreide blogpost over het toepassen en schrijven van alt teksten.

Images - GOV.UK
Documentatie van GOV.UK rondom het gebruik van afbeeldingen. Bijbehordende GitHub discussion.

Notities

HTML richtlijnen

• Gebruik het alt attribuut voor een beschrijvende tekst.
• Gebruik niet het title attribuut voor <img>.
  • De afbeelding moet goed zichtbaar zijn, maar sommige browsers maken een tooltip met voor de tekst in het title attribuut.
  • Een tooltip kan bijvoorbeeld een afbeelding van een QR-code onbruikbaar maken doordat de QR-code niet meer herkend wordt.

Using the HTML title attribute — Steve Faulkner

Relevante WCAG richtlijnen

• WCAG eis 1.1.1: afbeeldingen moeten een tekst als alternatief hebben, bijvoorbeeld via het alt-attribuut
• WCAG eis 1.4.5: gebruik tekst in plaats van afbeeldingen van tekst.
• WCAG eis 1.4.6
• WCAG eis 1.4.9: gebruik afbeeldingen van tekst alleen als er geen alternatief is.
• WCAG eis 1.4.11
• WCAG eis 3.1.2: de taal van de alt tag moet instelbaar zijn

[MariekeBrouwer]

Groningen

Screenshots van toepassing Image component voor Gemeente Groningen.

Afbeelding gebruiken wij ook wel in cards (ander component, maar misschien wel goed om even te noemen :) )

Zowel op de gemeentelijke website als op de MijnOmgeving gebruiken we een header image

Op 'productpagina's'/detailpagina's worden images ook gebruikt voor extra toelichting bij de tekst

[jeffreylauwers]

Amsterdam

• Storybook
• Figma
• Github

---

Screenshots / Varianten

Storybook

Figma

---

Notities

• Documentatie beschikbaar (Storybook).
  • Er wordt gewerkt met srcSet om browsers het optimale formaat uit te laten zoeken.
  • Er is documentatie over het gebruik van lazy loading.
• In Figma wordt verschillende Aspect ratio's aangeboden.
• Figma:
  • Image fill: ja
  • Fill location: center
• Code:
  • block-size: auto
  • max-inline-size: 100%
  • vertical-align: middle
  • Property beschikbaar voor object-fit: cover

[jeffreylauwers]

Den Haag

• Storybook
• Figma (Huidig)
• Github

---

Screenshots / Varianten

Storybook

Default

Image With Caption Text

Image With Download Link

Image Only

Portrait

Figma (Huidig)

---

Notities

• Documentatie beschikbaar.
• Opties om een caption en download mogelijkheid toe te voegen.
• In Figma wordt een extra aspect ratio (3:4) aangeboden.
• In de documentatie wordt ook geschreven over een Header image, uitlijnen en een Image gallery.
• Figma
  • Image fill: ja
  • Fill location: center
• Code
  • display: block
  • height: auto
  • width: 100%

[jeffreylauwers]

DSO

• Documentatie website
• Storybook
• Github

---

Screenshots / Varianten

Storybook

Default

Circle

---

Notities

• Optie om Image responsive te maken.
• Optie om Image als cirkel te tonen.
• Code
  • vertical-align: middle
  • max-inline-size: 100%

[jeffreylauwers]

OpenGemeenten

• Documentatie website
• Patternlab

---

Screenshots / Varianten

Patternlab

Site-PageImage

Media-Gallery component te vinden onder Generic-Content-Elements

Media-Gallery

Media-Gallery Caption

Media-Gallery Columns row

Media-Gallery LinkExternal Caption

---

Notities

• Veel verschillende vormen van Image gebruikt. Bovenstaande screenshots zijn dus ook nog lang niet alles.
• Code
  • display: block
  • width: 100%
  • height: auto

[jeffreylauwers]

Rotterdam

Figma

---

Screenshots / Varianten

Figma

---

Notities

• 3 verschillende aspect ratios.
• Content Image component biedt de mogelijkheid voor een description.
• Figma
  • Image fill: nee

[jeffreylauwers]

RVO

Geen Image component gevonden maar voor de Hero component wordt er wel gebruik gemaakt van een afbeelding.

• Documentatie website
• Storybook

---

Screenshots / Varianten

Storybook

Notities

• Code
  • height: 100%
  • object-fit: cover
  • width: 100%

[jeffreylauwers]

Utrecht

• Storybook
• Figma
• Github

---

Screenshots / Varianten

Stroybook

Default
Styling via the .utrecht-img class name.

Photo
Photo © 2022 Gemeente Utrecht.

Alt in another language

---

Notities

• Meerdere properties beschikbaar in Storybook. Onder andere voor hoogte, breedte, alt-text. en taal van alt-text.
• Figma
  • Image fill: ja
  • Fill location: center
• Code
  • .utrecht-img
    • max-height: auto
    • max-width: auto
  • .utrecht-img--photo
    • max-height: 100%
    • max-width: 100%

[jeffreylauwers]

DUO

Documentatie website

---

Screenshots / Varianten

Documentatie website

---

Notities

• Documentatie beschikbaar waarin wordt beschreven dat men een alt-text moet toevoegen en hoe de component responsive gemaakt kan worden.
• Code
  • display: block
  • height: auto
  • max-width: 100%

[jeffreylauwers]

✨ Dit component is nu Help Wanted ✨

Help je mee hem door de Community stappen te krijgen?
Image op het Community bord

[eslook]

✨ Dit component is nu Community ✨

Help je mee hem door de Candidate stappen te krijgen?
Image op het Candidate bord