webdesign

Hoe voeg ik een afbeelding toe aan mijn responsieve website?

Responsive webdesign

Geschreven door
Jordy

Bijgewerkt op
26 februari, 2024

Wat is een responsieve website?

Om je website op ieder apparaat goed zichtbaar te maken voor bezoekers, is het essentieel om een responsieve website te hebben. ‘Responsief’ houdt in dat de website reactief is en zichzelf aanpast aan de grootte van het scherm van de bezoeker.

Of je de website nu op je pc, smartphone of tablet bekijkt, een responsieve website wordt grafisch dusdanig ingedeeld dat iedere bezoeker een optimale gebruikerservaring ondervindt. Bovendien heb je geen kans op een penalty van Google.

Responsive webdesign

Wij maken bij SalesWizard altijd responsieve websites voor onze klanten. Dit levert immers een groot aantal voordelen op. Zo neemt de gebruikerservaring toe, ontstaat er een hogere conversie en levert dit doorgaans hogere posities op in zoekmachines, zoals Google.

Hoe kan ik mijn website responsief houden?

Als je over een responsieve website beschikt zijn er een aantal zaken waar je rekening mee dient te houden als je afbeeldingen wilt toevoegen aan een bericht, pagina etc. De afbeeldingen die je toevoegt kunnen immers geen vaste hoogte en breedte hebben, want dan kan de afbeelding niet mee schalen met de website.

In WordPress en veel andere CMS systemen wordt standaard gewerkt met vaste hoogtes en breedtes als het gaat om afbeeldingen en andere media. Als je de website responsief wilt houden is het daarom belangrijk dat er bij het toevoegen van afbeeldingen met percentages wordt gewerkt en niet met een vaststaande hoogte en breedte.

Hoe plaats ik een afbeelding op responsieve wijze?

Volg de onderstaande 10 eenvoudige stappen om een afbeelding op responsieve wijze toe te voegen op je website. In dit stappenplan wordt verwezen naar de standaard editor in WordPress, maar nagenoeg dezelfde stappen kunnen doorlopen worden in veel andere CMS systemen.

  1. Navigeer naar het onderdeel waar je de afbeelding wilt invoegen.
  2. Klik op de knop Afbeelding invoegen WordPress en selecteer de gewenste afbeelding.
  3. Vul desgewenst de Titel, Onderschrift, Alt-tekst en beschrijving van de afbeelding in, kies voor de gewenste uitlijning in en maak gebruik van de optie ‘Volledige grootte’.
  4. Nadat je alles hebt ingevuld en aangevinkt kun je de afbeelding invoegen.
  5. Klik nu rechtsboven op de tekst / html editor HTML - Editor, zodat je de HTML-code van de afbeelding kunt bekijken en bewerken.
  6. In de code van de afbeelding kun je het volgende vinden: width=”1000″ height=”1000″. De getallen tussen de aanhalingsteken staan voor het aantal pixels en zijn variabel.
  7. Verander nu de getallen tussen de aanhalingstekens voor een percentage. In het geval van een relatief kleine afbeelding kun je kiezen voor 100%, zodat deze op ware grootte zichtbaar is op grote beeldschermen. De code ziet er dan als volgt uit: width=”100%” height=”100%”. Indien je een relatief grote afbeelding hebt toegevoegd, kun je voor een lager percentage kiezen.
  8. Als je de absolute getallen hebt vervangen door percentages kun je het element in zijn geheel opslaan en aan de voorkant bekijken.
  9. Zodra je niet tevreden bent over de grootte van de afbeelding, kun je het percentage naar wens naar beneden of naar boven bijstellen en het element opnieuw opslaan.
  10. Nu je de afbeelding in percentages in de juiste grootte hebt gezet, heb je de afbeelding op een responsieve manier toegevoegd op de website!

Waar moet ik rekening mee houden?

  • Een percentage boven de 100% is mogelijk, maar dan wordt de afbeelding wazig.
  • Als je de hoogte een ander percentage meegeeft dan de breedte, trek je de afbeelding uit verhouding.

Responsive afbeelding invoegen

Heb je nog vragen?

Mocht je naar aanleiding van dit bericht vragen hebben over een responsieve website of het plaatsen van afbeeldingen op een responsieve manier, dan kun je altijd contact met ons opnemen. Vul het contactformulier in op deze pagina of neem direct contact met ons op via onze contactgegevens. Wij helpen je graag op de goede weg!

Gerelateerde artikelen

  • Hoe lang moet een SEO tekst zijn?
    Content Marketing, SEO
    Hoe lang moet een SEO tekst zijn?
  • header blog social media trends 2024
    Content Marketing, Social Media
    De 7 belangrijkste social media trends van 2024
  • De 17 belangrijkste webdesign trends van 2024
    webdesign
    De 17 belangrijkste webdesign trends van 2024
  • De beste ai tools
    Content Marketing, Online Marketing
    De 10 beste AI tools voor marketing [2025]