Richtlijnen voor afbeeldingen op je website

Richtlijnen voor afbeeldingen op je website

Er zijn verschillende aspecten aan een website die impact hebben op de performantie, waarvan afbeeldingen een van de grootste zijn, vanwege hun bestandsgrootte. Om de grootte te beperken, maak je een afweging van kwaliteit versus performantie. Hierbij een aantal richtlijnen om niet te veel in te boeten op vlak van performantie:

1. Gebruik van afbeeldingen

Vraag je in eerste instantie af of het nodig is om een afbeelding te gebruiken om de boodschap over te brengen. Een full width banner kan er visueel aantrekkelijk uitzien, maar kan evengoed ervoor zorgen dat relevante content uit het gezichtsveld geduwd wordt.

1.1Bestandsformaat afbeeldingen

Afbeeldingen op het web worden opgeslagen in JPG, PNG of GIF. Omdat GIF erg beperkt is is kleuren die je kan gebruiken, gebruik je over het algemeen JPG of PNG. De keuze tussen de 2 maak je op de volgende wijze:

  • Gebruik PNG wanneer je afbeelding weinig verschillende kleuren heeft of transparantie nodig heeft. Over het algemeen wordt het voor logo’s en iconen gebruikt.
  • Gebruik JPG voor fotomateriaal. JPG is erg geschikt voor het opslaan van beelden met erg veel verschillende kleuren.

Voor meer verdieping raad ik dit artikel aan.

Optimaliseer je afbeeldingen

Gebruik een tool zoals Tiny PNG om je afbeeldingen te optimaliseren.

Totale paginagrootte

Bij het inladen van een pagina moeten verschillende assets gedownload worden om de pagina op te bouwen, waaronder de afbeeldingen. Probeer de totale grootte van een pagina altijd onder 2MB te houden. Ideaal is minder dan 1MB.

Om de grootte te vinden, gebruiken we de ‘developer tools’ van de browser Google Chrome. Navigeer naar de pagina waarvan je de grootte wil weten en klik op de volgende toets(en):

Windows: F12
Mac: Command + Option + i

Het venster opent zicht aan de onderkant van je scherm. Navigeer naar het ‘Network’ tab en zet ‘Disable cache’ aan. Ververs dan de pagina met de volgende toetsen:

Windows: Control + F5
Mac: Command + Shift + R

Je zal nu zien dat er een lijst verschijnt van alle assets die gedownload worden op de pagina. Wanneer de lijst klaar is, zie je vanonder rechts hoeveel data er gedownload is.



    • Related Articles

    • Performantie richtlijnen voor websites

      De performantie van een website is belangrijk voor tal van factoren. Je bezoekers willen zo min mogelijk wachten totdat je site bruikbaar is en Google houdt rekening met de laadtijd van je website om je score in de rankings te bepalen. Maar hoe kan ...
    • Hoe groot moeten afbeeldingen zijn voor mijn website?

      Pixels Om een afbeelding scherp te kunnen tonen op je website, moet hij groot genoeg zijn. Het formaat van een digitale foto wordt uitgedrukt in pixels. Op plaatsen waar je foto's kan uploaden, worden de minimale pixels altijd aangegeven. Voor ...
    • Broken links checken op je website

      Wat zijn broken links?  Broken links zijn links die niet werken. Deze broken links, ook wel dead links, geven een foutmelding in de vorm van  error 404. Het kan hierbij om interne links gaan, maar ook om externe links. Wanneer je op een zogenoemde ...
    • Privacy-disclaimer voor je website

      Om in orde te zijn met de GDPR wetgeving is het belangrijk om een Privacy & disclaimer te integreren in je website. Deze beide links zullen we in de footer (onderaan) plaatsen van je website. Hierbij de link naar een standaard template voor de ...
    • Google maps op je website

      Om Google maps op je website te integreren hebben we een API key nodig. Deze API key kan je opvragen via de website van Google Maps Platform. Ga naar Google Maps Platform Ga naar de Google Maps Platform om je API key aan te vragen. Hier kan je je ...