Afbeeldingen op je website, waar let je op?

| Rachel Walraven | Algemeen

Iedereen die zelf zijn website beheert krijgt ermee te maken: Afbeeldingen. Op zich niets spannends natuurlijk, maar als je afbeeldingen op je website gebruikt zijn er wel wat dingen waar je rekening mee moet houden.

Afbeeldingen op je website

Hoe kom je aan je afbeeldingen op je website?

Op alle afbeeldingen zitten rechten. Je mag dus geen afbeeldingen op je website gebruiken, tenzij er expliciet bij de afbeelding wordt aangegeven dat dit wel mag. Hier zou ik ook absoluut rekening mee houden. Tegenwoordig zijn er robot's die het internet afzoeken naar hun afbeeldingen zodat de rechthebbende op de hoogte wordt gebracht als een afbeelding 'illegaal' gebruikt wordt. Zelfs afbeeldingen op je website die in pdf's staan worden op die manier gevonden. Boetes kunnen in de duizenden euro's lopen, helaas heb ik het meerdere keren bij klanten mee gemaakt.

Gelukkig zijn er tal van websites waar je goede, goedkope en soms zelfs gratis afbeeldingen kan vinden die je wel mag gebruiken. Voorbeelden zijn pixabay.com, picjumbo.com (beiden gratis) en shutterstock.com of istockphoto.com voor betaalde afbeeldingen.

Bewerken van afbeeldingen

Een afbeelding heeft een grootte, niet alleen in hoe hoog en hoe breed hij is, maar ook in hoeveel kb, mb of gb hij is. Hoe groter de afbeelding (in kb) hoe langer het duurt om de afbeelding op je website te laden. Zowel je bezoekers als Google houden niet van trage websites. Het is dus belangrijk dat de afbeeldingen op je website niet te groot zijn. 

Bewerk een afbeelding altijd eerst, dus voor je hem upload naar je website, zodat hij de juiste afmetingen (hoogte en breedte) heeft en de juiste resolutie (72dpi). Op die manier wordt er niet meer data gebruikt dan nodig is. Wil je een afbeelding klein laten zien en hem vergroten als je er op klikt? Maak dan 2 versies: één op het kleine formaat en één op het formaat waar hij naar moet vergroten. Zo wordt alleen de grote afbeelding geladen als de bezoeker die ook echt wil zien.

Afbeeldingen ook op mobiel

Tegenwoordig moet je ook rekening houden met mobiele apparaten. Een online afbeelding die op je laptop de volle breedte van het scherm inneemt, wordt op mobiel veel kleiner weer gegegeven, maar hij haalt wel die grote afbeelding op. Als je voor die grote afbeeldingen op je website ook nog de hoogte en de breedte hebt opgegeven zal deze op mobiel ook die hoogte en breedte zijn en dus je hele site uit verband trekken. Gelukkig zijn hier een aantal oplossingen voor.

  • Zorg dat je de hoogte en breedte niet instelt, dan zal (als alles goed is ingericht op je website) de afbeelding automatisch schalen naar de ruimte die hij tot zijn beschikking heeft. 
  • Het is mogelijk om verschillende afbeeldingen voor verschillende schermbreedtes te gebruiken. Je vertelt dus dat als een scherm smaller is dan een bepaald aantal pixels, er een andere afbeelding (kleiner) weergegeven moet worden dan als het scherm groot is.
  • Ook hier is het weer belangrijk om de groote in Kb van de afbeelding in de gaten te houden. Op mobiel is een klein bestand nog belangrijker dan op een pc.

Toegankelijkheid en afbeeldingen

Om er voor te zorgen dat mensen die jouw site met een spraakcomputer bekijken ook wat aan de afbeeldingen hebben is het verstandig altijd de alt-tag in te vullen. Ook Google vindt dit heel fijn, want dan kunnen ze bepalen wat er op het plaatje staat en hoe dit relevant is voor de zoektermen.

Maak altijd een beschijvende alt-tag. Veel spraakcomputers lezen al voor dat het om een plaatje gaat, dat hoef je dus niet meer te vermelden. 

Voorbeeld

De alt-tag: "Uitzicht op de grote vijver in het Horsterpark met strandje op de voorgrond en bomen op de achtergrond".

Bekijk nu eens de afbeelding die bij de alt-tag hoort, had je zo iets voor ogen? Als dat zo is, dan heb je een goed alt-tag gekozen voor.

Natuurlijk kan je ook een alt-tag kiezen die niet verteld wat er op staat, maar wat je met het plaatje wil zeggen en waar je zoektermen in voorkomen. Bijvoorbeeld: "Door afbeeldingen te voorzien van een alt-tag is het voor mensen met een visuele beperking en Google makkelijker om deze te begrijpen". Maar dit zegt niets over het plaatje zelf in dit geval.