Op deze pagina zijn hints en tips beschreven voor het zoeken en selecteren van afbeeldingen voor je website, inclusief het optimaliseren van afbeeldingen

Inleiding

Doel van afbeeldingen

Indeling naar positie op de website:

  • paginabrede afbeeldingen met beperkte hoogte
  • ondersteunende afbeeldingen op een pagina
  • afbeeldingen in een carrousel
  • hoge kwaliteit afbeeldingen om grafisch product aan te prijzen
  • icon, bijvoorbeeld het gebruik van een favicon (het inie-minie afbeeldinkje dat je ziet in het tabblad van je browser

Indeling naar visueel doel:

  • transparante afbeelding, waarbij een deel van de afbeelding ‘doorzichtig’ is. In dergelijke gevallen kun je bijvoorbeeld afbeeldingen over elkaar heen leggen, of een achtergrond kleur geven
  • niet-transparante afbeeldingen

 

Selecteren van afbeeldingen

Welke formaten heb je nodig?

  • afhanklijk van het doel

    • volle breedte afbeeldingen in bijv de header: (B)1920px x (H)900px
    • ondersteunende afbeeldingen op pagina’s: (B)1080px (paginabreed) of (B)510px (½ pagina)
      • let op portrait of landscape. Niet alleen op de desktop, maar denk ook na over hoe je de afbeelding wilt zien op een mobiele telefoon
      • je kunt er soms voor kiezen om een landscape afbeelding te gebruiken voor desktop, en een portrait afbeelding voor mobiel/tablet. Zorg dan wel voor inhoudelijk vergelijkbare afbeeldingen, of een portrait-uitsnede uit een landscape afbeelding
    • afbeeldingen die te ‘zwaar’ zijn, kosten veel laadtijd en dat werkt negatief op de positie in Google Search (dus dan wordt je niet getoond als iemand zoekt op een term). Maar als er een goede afbeelding is die te ‘zwaar’ is, dan is daar wel een oplossing voor
    • voor projecten en dergelijke kun je het best vierkante afbeeldingen nemen. Dan komen ze er op overzichten altijd netjes uit te zien en zijn ze op detailpagina’s ook goed bruikbaar
    • iconen (bijv favicon) bij voorkeur 32×32 pixels
    • als je afbeeldingen van hoge kwaliteit toch wilt gebruiken, dan kan dat wel, maar dan in een tweetraps oplossing. Dan wordt een versie van lagere kwaliteit gebruikt op een ‘overzichtspagina’, met de mogelijkheid om na doorklikken een hoge kwaliteit afbeelding te tonen in een pop-up.
    • afhankelijk van het doel
    • gebruik .PNG bestanden als het beeld deels transparant moet zijn, in alle andere gevallen een .WebP bestand of evt een .JPG/.JPEG. In elk geval geen .GIF bestand, dat is te ‘zwaar’!
    • het gebruik van .SVG bestanden is wel mogelijk, geven een mooi resultaat, maar is iets meer werk om te gebruiken op een website. Heeft wel het voordeel dat een dergelijke afbeelding volledig schaalbaar is
  • kwaliteit van de afbeelding
    Een meestal niet onderkende factor die wel van belang is is de kwaliteit van de afbeelding. Dat is niet alleen afhankelijk van het aantal pixels, maar bijv ook van de kleurdiepte (het aantal kleuren dat kan worden gebruikt in een afbeelding. Wordt uitgedrukt in bits; laagste kwaliteit is 8-bits, en gaat (in elk geval) tot 24-bits. Hoe meer bits, hoe meer kleuronderscheid, maar ook des te meer informatie om te downloaden op een webpagina
  • relatie met omgeving
    • Als je een afbeelding gebruikt op een pagina, is het zinvol om te kijken tegen welke achtergrond(kleur) de afbeelding wordt getoond, zeker als er een afbeelding met transparantie wordt gebruikt
    • als je een afbeelding wilt gebruiken met tekst (of andere afbeelding) eroverheen, zorg dan voor voldoende contrast. Houdt hier dan bij de selectie van de afbeelding al rekening mee, zeker als je al weet welke kleuren je gaat gebruiken op de website

Technisch verbeteren afbeeldingen

Als je een afbeelding hebt gevonden die je op zich prima vindt, dan kan het zijn dat deze afbeelding technisch niet zo geschikt is voor je website. Dan zijn er mogelijkheden om dat aan te pakken.

Hulpmiddelen:

  • als je zo maar eens af en toe een afbeelding wilt omzetten: gebruik een website die een afbeelding kan omzetten naar een ander type afbeelding, bijvoorbeeld van .GIF naar .JPG of .WebP
    • www.sirv.com Type omzetten, afmetingen, scherpte en kwaliteit, 360-graden afbeeldingen maken
    • www.imagify.com Type omzetten
  • als je vaak afbeeldingen wilt omzetten in je website, of als andere personen ook afbeeldingen kunnen uploaden: gebruik dan een plugin, bijvoorbeeld Imagify
  • als je afbeeldingen wilt verkleinen voor diverse doeleinden, dan kun je ook EnterImage gebruiken. Dit programma installeer je op je Windows pc en daarmee kun je afbeeldingen omzetten naar kleiner formaat.
  • uitsnedes maken van afbeeldingen kun je met Photoshop (professionals, kostbaar), Paint (simpel gebruik, gratis en standaard op Windows PC) of GIMP (complex en gratis). Overleg dan vooraf welke maten je nodig gaat hebben.

Het type is een aanduiding van de manier waarop de afbeelding is gecodeerd, van een analoge foto, die je ziet, naar de digitale representatie waarin deze foto is opgeslagen op je computer.