Tips voor het gebruik van afbeeldingen op je website

12 februari 2020 Website ontwikkeling

Afbeeldingen (foto’s, iconen, illustraties etc.) spelen een grote rol in de uitstraling van de website. Wanneer slecht gekozen, kunnen ze een mooi en functioneel ontwerp volledig breken. Echter aan de “achterkant” van afbeeldingen zijn ook goede keuzes te maken die het nut van afbeeldingen verbeteren. Enkele tips hiervoor zijn op een rijtje gezet.

Bestandsformaat website afbeelding

Maak gebruik van het beste bestandsformaat bij het uploaden naar je website. De meest voorkomende formaten zijn .jpg, .png, .svg en .gif. Voor foto’s is JPG (of JPEG) het gangbare formaat om voor te kiezen. Plaatjes afkomstig van camera’s of telefoon zijn vaak van dit type. Bij het exporteren via fotobewerking tools zoals Photoshop of Canva hoeft dit echter niet altijd het geval te zijn. Maak bij het exporteren dan ook de juiste keuze.

Alleen in het geval van uitgesneden foto’s met daardoor een transparante achtergrond kies je voor het PNG-formaat. Simpelweg omdat JPG transparantie niet ondersteunt.

Bij illustraties moet je weer andere keuzes maken. Ten opzichte van een foto kan je er van uit gaan dat er veel minder verschillende kleuren in zitten. Hierdoor is het bestandstype PNG het meest geschikt. Het geval van simpelere illustraties, over het algemeen iconen, simpele patronen, logo’s et cetera, is het soms echter verstandiger om gebruik te maken van .SVG, ook op websites. Het verschil is dat zo’n bestand werkt op basis van paden in plaats van pixels. De weergave wordt bij .SVG berekent. Grote voordeel: dat deze onbeperkt kan worden vergroot zonder wazig te worden. Let wel op: niet echter elke website beheer systeem kan goed overweg met SVG.

Als laatste dan .gif. Dit bestandstype is één geval de oplossing: bij animatie. Een GIF-bestand ondersteunt namelijk animatie in foto’s of illustraties. Er zijn ook nieuwe bestandsformaten beschikbaar zoals WebP. Dit zorgen voor een drastische verlaging van de bestandsgrootte. Op het moment van schrijven zijn deze bestandstypes echter nog niet breed ondersteunt in bijvoorbeeld alle browsers.

Beschrijvende bestandsnaam

Foto’s hebben wanneer gemaakt vaak een nietszeggende naam, zoals “DSC_01125.jpg”. Website eigenaren uploaden bestanden vaak ook op deze manier naar de website. Voor zoekmachine optimalisatie is het echter slimmer om een beschrijvende bestandsnaam te geven. Wil je bijvoorbeeld een foto toevoegen van een hond die tv kijkt op de bank? Dan kan je beter kiezen voor “hond-kijkt-tv-op-de-bank.jpg”. Hierdoor weten zoekmachines beter wat er op de afbeelding staat.

Afbeelding bestandsgrootte

Wanneer je foto’s upload naar een website is het belangrijk om de allereerst te exporteren voor het gebruik op het web. Website foto’s moeten namelijk aan andere “eisen” voldoen dan bijvoorbeeld drukwerk. Naast het verkleinen van sommige afbeeldingen kan het ook erg nuttig zijn om afbeelding te comprimeren zonder kwaliteit te verliezen. In het geval WordPress maken wij gebruik van de WordPress plugin TinyPNG (werkt ook met JPG’s). In sommige website projecten heeft dit uit ervaring soms zo’n 80%(!) besparing opgeleverd. Tel je uit je winst voor de snelheid van je website.

Bestandsrechten

Het maar voor zich spreken dat je niet zomaar allerlei foto’s en illustraties van het internet kan plukken. Bekijk voordat je een foto gebruikt goed of je de rechten bezit om deze voor je website te gebruiken. Dit is overigens ook van toepassing op andere manier zoals video, lettertypes, muziek et cetera.