1. De afbeelding
Kies één van de opties hieronder.
- Ik heb een afbeeldingscode of bannercode ⇒ Laat zien
Ga direct naar stap 2.

- Ik heb een online afbeelding (bijvoorbeeld op de geocachepagina) ⇒ Laat zien
De locatie van een afbeelding is te kopiëren door met de rechter muisknop op de afbeelding te klikken. Afhankelijk van de browser kunt u nu kiezen voor:
- Afbeeldings-URL kopiëren
- Afbeeldingslocatie kopiëren
- Eigenschappen en vervolgens de link kopiëren achter Adres (URL)
Het adres dat je zojuist gekopieerd hebt wordt vanaf nu de afbeeldingslocatie genoemd.

- Ik heb een afbeelding op mijn computer ⇒ Laat zien

2. Plaats de html-code
Nu gaan we de afbeelding op het profiel plaatsen. Ga hiervoor naar http://www.geocaching.com/profile/. Klik vervolgens op Edit Your Profile, of ga direct via deze link: https://www.geocaching.com/account/settings/profile.

Onderaan deze pagina zie je een kopje About, dit is de ruimte voor je profielinformatie.

Plaats nu op de plaats in de tekst waar de afbeelding moet komen de code die je al hebt.

Plaats nu op de plaats in de tekst waar de afbeelding moet komen de volgende code:

<img src="Afbeeldingslocatie" alt="Omschrijving" title="Omschrijving">

De Afbeeldingslocatie heb ik hierboven al uitgelegd. Dit is de locatie (link) van de afbeelding.
De Beschrijving (2x) is gewoon de beschrijving van de afbeelding, dit zal zichtbaar worden als je met de muis boven de afbeelding hangt, dus bijvoorbeeld: De geocache.
Een eenvoudige manier om de goede code voor een afbeelding te maken is via de Afbeeldingscode generator

Plaats nu op de plaats in de tekst waar de afbeelding moet komen de volgende code:

<img src="Afbeeldingslocatie" alt="Omschrijving" title="Omschrijving">

De Afbeeldingslocatie heb ik hierboven al uitgelegd. Dit is de locatie (link) van de afbeelding.
De Beschrijving (2x) is gewoon de beschrijving van de afbeelding, dit zal zichtbaar worden als je met de muis boven de afbeelding hangt, dus bijvoorbeeld: De geocache.
Een eenvoudige manier om de goede code voor een afbeelding te maken is via de Afbeeldingscode generator

3. Wijzigingen opslaan
Tot slot moeten we de wijzigingen op de pagina nog opslaan. Klik hiervoor op de Save Changes knop onderaan de pagina.

4. Klaar
Klaar! De afbeelding is nu te zien op de profielpagina.
Hieronder staan nog enkele uitbreidingen die handig kunnen zijn.

5. Hyperlink
Het kan handig zijn om een afbeelding te gebruiken als hyperlink. Dit houdt in dat als er iemand op de afbeelding klikt een webpagina (of een afbeelding) geopend wordt. Gebruik hiervoor de volgende code:

<a href="Hyperlink">Afbeeldingscode</a>

Waarbij hyperlink de link is naar de pagina die geopend moet worden.
De volledige code is dan:

<a href="Hyperlink"><img src="Afbeeldingslocatie" alt="Omschrijving" title="Omschrijving"></a>

6. Afmetingen
Zonder de afbeelding van te voren te vergroten of verkleinen is het mogelijk om de afbeelding te laten zien in een ander formaat dan het origineel. Dit doen we door de attributen width en height toe te voegen, die worden uitgedrukt in pixels. Een afbeelding van 100 pixels breed en 200 pixels hoog wordt dan:

<img src="Afbeeldingslocatie" alt="Omschrijving" title="Omschrijving" width="100" height="200">

Door beide in te vullen kan de afbeelding uit verhouding worden getrokken, daarom is het ook mogelijk om één van de twee te gebruiken. Als alleen de breedte is ingevuld bijvoorbeeld, verandert de hoogte van de afbeelding mee in verhouding met de aangegeven breedte. De code wordt dan:

<img src="Afbeeldingslocatie" alt="Omschrijving" title="Omschrijving" width="100">

7. Centreren
Om een afbeelding op de pagina te centreren hoeven we maar een klein beetje code toe te voegen, namelijk:

<p style="text-align:center;">Afbeeldingscode</p>

De volledige code is dan:

<p style="text-align:center;"><img src="Afbeeldingslocatie" alt="Omschrijving" title="Omschrijving"></p>