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.

Bestandsformaat 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

iLoveIMG kan je gebruiken afbeeldingen te optimaliseren maar heeft ook extra tools (croppen, resizen,...)

Tiny PNG is handig 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):

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:

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.