Afbeeldingen op je website, in de fout?

Regelmatig komt er op het forum iemand voorbij die een website heeft gemaakt, wat webruimte heeft gekocht of gekregen, zijn website online zet en dan tot de ontdekking komt dat er alleen maar een rood kruisje te zien is. “WAT NU?” roepen ze in het forum. Hier de oplossing.

Internet Explorer

Het kruisje is alleen te zien in Internet Explorer. Andere browsers plaatsen bijvoorbeeld de alt-tekst van een plaatje. Maar goed, waar komt dat nu door?

Het kan twee oorzaken hebben. Je hebt de plaatjes niet geupload, of je hebt ze verkeerd geupload.

Bestanden uploaden

Bij het uploaden van een webpagina moet je de plaatjes apart uploaden. Veel beginners maken de fout dat ze denken door de webpagina op de server van de host te zetten, dat ze de plaatjes meteen mee uploaden. Dat is dus niet het geval. Vaak komt dit doordat de webpagina in bijvoorbeeld een WYSIWYG-editor of photoshop is gemaakt, waardoor het lijkt dat een afbeelding al direct op de website staat.

Plaatjes apart

Een plaatje is een apart bestand en moet apart geupload worden. Het beste kun je een apart map aanmaken voor afbeeldingen. Deze map heet dan bijvoorbeeld ‘img’ (afkorting van images). Je moet dan deze map helemaal uploaden. Maar let er wel op dat je deze in binary upload. Dat is een instelling in je FTP programma.

Weet je nog niets van FTP, lees dan het artikel uploaden met FireFTP eens.

Natuurlijk moet je dan wel weer ervoor zorgen dat de verwijzingen naar een afbeelding in orde zijn. Een plaatje op de indexpagina die wijst naar ‘plaatje.jpg’ in de map ‘img’ verwijs je als volgt:
<img src="img/plaatje.jpg" alt="plaatje">
Een plaatje die in een map lager staat dan een webpagina, wordt als volgt verwezen:
<img src="/img/plaatje.jpg" alt="plaatje">

Geef de grootte mee

Je doet er goed aan om hoogte en breedte van een plaatje mee te geven. Daardoor gaat een layout er niet helemaal anders uit zien als je per ongeluk een plaatje vergeet, of als iemand helemaal geen afbeeldingen wil zien op sites (wat je kunt instellen). Door height en width toe te voegen weet de browser welk formaat het plaatje heeft en zal deze ruimte wit blijven in geval van.

Succes met je plaatjes.