Afbeeldingen optimaliseren voor websites

Afbeeldingen op een webpagina is geen ontkomen aan. Ze zorgen er meestal voor dat de webpagina er aantrekkelijk uitziet. Toch zijn ze, meestal in combinatie met de javascripts, vaak de oorzaak van een lange laadtijd van een webpagina. Het optimaliseren van deze afbeeldingen kan hierbij een oplossing bieden.

Afbeeldingsformaat en extensie wijzigen

De meeste afbeeldingen voor webpagina's worden gemaakt om op beeldschermen te bekijken en ze hoeven niet uitgeprint te worden. Een afbeelding van 1000 bij 1000 pixels is dan ook niet nodig als deze op de webpagina als 100 bij 100 pixels weergegeven wordt. Verklein de afbeeldingen dus naar het formaat die daadwerkelijk gebruikt wordt. Hiernaast hoeft de kleurendiepte van een afbeelding op een webpagina lang niet zo groot te zijn als een afbeelding die geprint moet worden. Hiermee is al gauw veel ruimte bespaard.

Een andere manier om ruimte te besparen is te letten op de bestandsextentie, oftewel de manier waarop de afbeelding opgeslagen is. Bitmap-bestanden (.bmp) nemen vaak veel meer ruimte in dan JPEG-bestanden (.jpg). In de meeste tekenprogramma's en zelfs in standaard Paint kan je een afbeelding gemakkelijk opslaan als JPEG. Ditzelfde geldt ook voor Portable Network Graphics, oftewel .png-bestanden. Als foto nemen ze vaak meer ruimte in als een JPEG-bestand. Toch zijn er situaties waarbij een .jpg-bestand of een .gif-bestand een te lage kwaliteit hebben en een .png-bestand de voorkeur heeft. Ter illustratie: een .png geeft goede kwaliteit en heeft de mogelijkheid om bepaalde delen van de afbeelding onzichtbaar te maken. In .jpg is dit niet mogelijk.

Jpeg gebruiken we in grote lijnen voor foto's.
Png is te gebruiken als de afbeelding een doorzichtige achtergrond nodig heeft waardoor deze de achtergrond van de webpagina overneemt. Veel afbeeldingen van logo's maken hier gebruik van.
Gif: een gif-bestand is vaak een klein bestandje maar heeft niet veel mogelijkheden voor echt mooie foto's. Wel kan een achtergrond doorzichtig gemaakt worden, waardoor dit afbeeldingsformaat meestal gebruikt wordt als tool om diverse elementen op de webpagina in elkaar over te laten lopen. Een andere mogelijkheid met .gif is dat relatief gemakkelijk “bewegende” beelden gecreëerd kunnen worden door meerdere afbeeldingen achter elkaar te plakken.

Natuurlijk zijn er nog veel meer bestandsformaten voor afbeeldingen. Toch zijn de bovenste de meest gangbare en het advies is dus deze te gebruiken. De zoekmachines weten dan ook hoe ze hier mee om moeten gaan en datzelfde geldt voor de browser van de gebruiker.

mappen en omschrijvingen

Afbeeldingsmappen

Dan de locatie om de afbeeldingen op te slaan. Zoekmachines houden van simpel. Het meest gemakkelijke is dan ook om alle afbeeldingen van een website op één locatie te bewaren. Dat is precies wat we doen. We maken een map, geven deze een naam zoals "images" of "afbeeldingen", of een andere herkenbare naam, en plaatsen hier alle afbeeldingen in. Voor de gebruiker is dit niet van belang, omdat de browser gewoon de link naar de afbeelding volgt en deze laat zien. De zoekmachine kijkt ook in deze map en gebruikt de inhoud eventueel in de zoekresultaten bij het zoeken op afbeeldingen.

Afbeeldingsomschrijvingen

Een correcte omschrijving van wat er op een afbeelding staat die wordt weergegeven op een webpagina, is voor zoekmachines erg belangrijk. Ook hier zijn er een paar zaken om rekening mee te houden. Als eerste: de bestandsnaam. Gebruik hiervoor een korte omschrijving van één of twee woorden, en vermijd spaties in de bestandsnaam. Dit voorkomt problemen bij het laden van de afbeelding. Dat is het eerste deel. Daarnaast is het gebruik van de alt-tag essentieel. Deze alt-tag is te vergelijken met de title-tag in een HTML-document, maar in dit geval beschrijft de alt-tag de afbeelding in plaats van het document. Bovendien wordt de alt-tag weergegeven als de afbeelding niet gevonden of geladen kan worden. De naam alt-tag komt hier dan ook vandaan: het is een alternatief voor de afbeelding.

<img src="images/afbeeldingsnaam.jpg" alt="Korte omschrijving" title="Titel">

Zorg ervoor dat de omschrijving in de alt-tag kort is. Gebruik bij voorkeur niet meer dan 40 tekens. Vermijd keyword stuffing (het overmatig gebruiken van zoekwoorden), want zoekmachines bestraffen dit gedrag direct.

Naast de alt-tag kan een afbeelding ook een title-tag bevatten. Het verschil is subtiel: de alt-tag wordt weergegeven als de afbeelding niet geladen wordt, terwijl de title-tag meestal verschijnt als men met de muis over de afbeelding beweegt. Beide tags dragen bij aan de gebruiksvriendelijkheid, maar kunnen ook nuttig zijn voor SEO. Een title-tag kan bijvoorbeeld een extra call-to-action bevatten. Gebruik ook hier relevante woorden, maar vermijd overdrijven.

SEO academy