Image

Wil je een afbeelding toevoegen op de pagina? Gebruik het 'image' component.
Plaats alleen afbeeldingen die iets toevoegen aan de content. Dus geen afbeelding als 'sfeer'-opvulling op de pagina. 

Hoe gebruik ik images?

Do's

  • Sla de afbeelding zo klein mogelijk op (minimaal aantal KB's). Dit kun je doen door in Photoshop te kiezen voor het bestandstype PNG of JPEG en door het kwaliteitspercentage aan te passen. Let wel op dat de kwaliteit van de afbeelding goed is. 
  • Voeg alleen een afbeelding toe als het beeld een toegevoegde waarde voor de content heeft. 
  • Hoort de afbeelding bij een onderwerp dat vaker terugkomt op de site? Zorg dan voor een consistente beleving door dezelfde afbeelding te gebruiken.
  • Staan er meerdere afbeeldingen naast elkaar? Zorg dan dat deze allemaal dezelfde hoogte hebben. 

Hoe zorg ik voor de juiste afmeting?

  1. Bepaal in welk formaat je de afbeelding wilt gebruiken (bijv. 1/2 = 6 kolommen of 1/3 = 4 kolommen).
  2. Ontwerp de afbeelding volgens de juiste afmetingen (hoogte is nog nader te bepalen). 
  3. Sla de afbeelding zo compact mogelijk op in de juiste bestandsindeling. Als hulpmiddel kan je de afbeelding van hiernaast gebruiken.

Voorbeeld image component op Bootstrap grid

Image - volledige breedte (12 kolommen)
Image - 1/2 (6 kolommen)
Afbeelding 555 breed
Afbeelding 555 breed
Image - 1/3 (4 kolommen) en 2/3 (8 kolommen)
Afbeelding 360 breed
Afbeelding 750 breed
Image - 1/4 (3 kolommen)
Afbeelding 264 breed
Afbeelding 264 breed
Afbeelding 264 breed
Afbeelding 264 breed
X
Wij gebruiken cookies om uw website-ervaring te verbeteren. Als u op akkoord klikt, dan gebruiken wij cookies voor de werking van de website, statistieken, social media en online marketing.
Weigeren
Akkoord