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 extentie 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 oftwel 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 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.

Lees verder

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 een locatie te hebben. Dat is dan precies wat we doen. We maken een map, geven het de naam "Images" of "afbeeldingen", of een dergelijke, herkenbare naam en stoppen hier alle afbeeldingen in. Voor de gebruiker is dit niet van belang omdat de browser gewoon de link volgt naar de afbeelding en deze afbeelding laat zien. De zoekmachine kijkt ook in de map en wat er verder nog in staat voor de zoekresultaten als men onder afbeeldingen zoekt.

Afbeeldingsomschrijvingen

Een correcte omschrijving van wat er op de afbeelding staat die wordt weergegeven op een webpagina is voor de zoekmachines erg belangrijk. Uiteraard ook hier een paar dingen om rekening mee te houden. Als eerste de bestandsnaam. Gebruik hiervoor een zeer korte omschrijving van 1 of 2 woorden en gebruik geen spaties in de bestandsnaam. Dit voorkomt dat browsers de afbeelding niet kunnen vinden. Dat is het eerste deel. Hiernaast is het gebruik van de alt-tag onontbeerlijk. Deze alt-tag is te vergelijken met de title-tag in een html document. In dit geval omschrijft de alt-tag de afbeelding i.p.v. het gehele document. Hiernaast wordt de alt-tag weergegeven als de afbeelding in kwestie niet gevonden of weergegeven kan worden. Hier komt alt-tag 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 kort is van de afbeelding in de alt-tag. Gebruik nooit meer dan 40 tekens in deze omschrijving. Hiernaast is het van belang om ook hier niet in te gaan spammen. Zoekmachines hebben een hekel aan spammers en hier zal de pagina direct op afgestraft worden.

Naast de alt-tag kan een afbeelding ook een title-tag meegegeven worden. Het verschil tussen beiden is niet zo groot. Echter, waar de alt-tag een alternatieve tekst kan zijn als de afbeelding niet weergegeven wordt, wordt de title-tag als titel van de afbeelding mee gegeven. Beide tags moeten in de eerste instantie de gebruiksvriendelijkheid bevorderen maar hier is de mogelijkheid om handig gebruik te maken van keywords. Ga niet spammen maar een title-tag kan een extra call-to-action geven aan de afbeelding. In veel gevallen wordt de title tag namelijk weergegeven als men met de muis over de afbeelding beweegt.

SEO