Maak je site iets minder saai. Een afbeelding toevoegen maakt de gebruikservaring groter. Kies de juiste afbeelding die je teksten ondersteunt, en bezoekers zullen veel langer geïnteresseerd blijven. Maar hoe optimaliseer je nu die afbeelding voor de zoekmachines? Google, Yahoo! en Bing kunnen nu eenmaal niet zien wat er exact op die afbeelding staat. En laadt je site niet trager door al die afbeeldingen?

Update 20 mei 2013: Image sitemap toegevoegd aan de optimalisatietips.

Update 18 november 2015: Bestandsgrootte optimaliseren doe je beter niet meer met Smushit, maar met andere alternatieven.

Tijd om daar iets aan te veranderen.

1. Context

De juiste afbeelding is een afbeelding die de inhoud ondersteunt. Gaat je pagina over interieur, plaats dan een foto van een mooi interieur of zetel. Zorg dat de foto die je plaatst de juiste afmetingen heeft. Je wil niet dat een zelf geschoten foto van 3 megabyte moet laden elke keer een bezoeker langs komt. Met een beeldbewerkingsprogramma neem je het meest interessante deel van de foto (crop functie).

2. Juiste formaat

De foto sla je best op als een .jpg/.jpeg, .png, .gif. Alle andere formaten laat je links liggen. Jpeg is over het algemeen beter voor iets grotere afbeeldingen, png en gif voor kleinere iconen. Png kan meer kleuren aan dan gif.

3. Bestandsgrootte optimaliseren

ImageOptim compressie headerJe afbeelding krijgt bij opslaan een bepaalde compressie mee. Toch zijn er nog altijd ettelijke kilobytes te winnen. Een paar kilobyte lijkt niet veel, maar als je van 60kb naar 40kb gaat, krijgt je pagina een evenredige snelheidswinst. Doe dit met alle afbeeldingen en je spreekt over een aanzienlijke tijdswinst.

Er zijn online tal van aanbieders die bestandsgroottes verkleinen zonder veel kwaliteitsverlies. De headerafbeelding werd, door middel van slim opslaan in Photoshop (PNG met zonder dither, beperking in aantal kleuren) al serieus ingekrompen qua afbeelding grootte (ongeveer 6Kb).

6Kb is al erg klein, maar met programma’s als ImageOptim (voor alle bestandstypes, opensource, mac-only) en JpegMini (jpeg-only, freemium, windows&mac) of PNGGauntlet (png-only, free, windows-only) kan je echt nog een pak extra comprimeren zonder visueel kwaliteitsverlies. In dit geval met ImageOptim maar liefst nog eens 51,4%, waardoor de totale bestandsgrootte net geen 3Kb is. Opmerkelijk, niet?

4. Alt tags

Als je een goeie afbeelding hebt, die geoptimaliseerd is qua grootte en formaat, kan je aan de slag om ze toch zo zoekmachine vriendelijk te maken. Veel werk is het niet. Net zoals bij een goeie titel kiezen moet je eerst even kijken waarover je tekst gaat. Vat deze samen in een paar kernwoorden en maak er een korte slogan mee, die van toepassing is op je afbeelding. In het geval van het interieur en heb je een zetel als foto kan je vb “Nieuwe zetel in modern interieur” nemen. Daar heb je een aantal zoektermen die kunnen gecombineerd worden: Nieuw, zetel, modern en interieur. Deze slogan geef je mee op de volgende manier:

<img src=”link/naar/afbeelding.jpg” alt=”Nieuwe zetel in modern interieur” >

De alt tag bestaat er om een alternatieve tekst weer te geven in het geval dat de afbeelding niet laadt.

5. Bestandsnaam

Wat veel mensen vergeten is de bestandsnaam. Mensen zoeken niet enkel op tekst, maar ook op afbeeldingen (met vb google images). Een aantal mensen proberen te vermijden dat hun afbeeldingen daar opduiken uit schrik veel bandbreedte te verliezen of om copyright schendingen tegen te gaan.

Dit is echter allemaal voorbarig. Als je je afbeeldingen optimaliseert qua grootte valt die bandbreedte allemaal goed mee. En alles wat online staat kan gekopieerd worden.

Door een goeie bestandsnaam te kiezen kan de afbeelding hoger in google images komen. In ons bovenstaand voorbeeld zou dit “zetel-interieur.jpg” zijn. Duidelijk en met 2 kernwoorden. Mensen die een interieur zoeken, komen via die ene goed gekozen afbeeldingen op je site.

6. Image sitemap

Wil je zeker zijn dat Google op tijd al je afbeeldingen goed indexeert? Dan kan je altijd een sitemap maken waar enkel je afbeeldingen in vermeld staan. Meer info over hoe je dat exact doet volgens de richtlijnen van Google vind je hier. Deze sitemap kan je ook via Google Webmaster Tools indienen.