Gebroken afbeeldingen traceren en repareren

Ik heb gemerkt dat er soms gezocht wordt op mijn site naar oplossingen voor gebroken afbeeldingen. Vandaar een kort artikel over hoe je een gebroken afbeelding herkent, wat er fout zou kunnen zijn en hoe je het kunt repareren.

Rode kruisjes
De wijze waarop een ontbrekende afbeelding wordt weergegeven (…) verschilt per browser. In Internet Explorer zie je een rood kruisje. In Firefox helemaal niets, tenzij je de afbeelding een tekst heeft in het alt attribuut – dan zie je de tekst die daar in staat. In Safari een blauw vierkantje met een vraagteken.

In jouw browser ziet een afbeelding die niet bestaat er als volgt uit zonder alt informatie:

En zo met alt informatie:

Ontbrekende afbeeldingen opsporen
Het pad van een ontbrekende afbeelding kun je traceren met bijvoorbeeld de Web Developers Tool voor FireFox. Kies bij een pagina het gebroken image rapport: Images > Find broken images. Je ziet dan een volledig overzicht van afbeeldingen die ontbreken.

Mogelijke oorzaken voor gebroken afbeeldingen

1) De naam van het bestand is fout. Veel voorkomende fouten hierin zijn:
a) Typefouten
b) Een verkeerde extensie (bijv. jpg wordt verward met jpeg of vice versa)
c) Verkeerd gebruik van hoofdletters of kleine letters. Sommige webservers zijn hier gevoelig voor (case sensitive). Wen je daarom aan om afbeeldingen altijd met kleine letters te schrijven.
d) Te lange bestandsnamen. Ook hier geldt dat sommige servers (Mac OSX) te lange namen niet aan kunnen.
e) Gebruik van spaties. Deze kunnen problemen opleveren, aangezien browsers (en programmeertalen) hier verschillend mee om kunnen gaan. Wen je aan om hiervoor een koppelteken te gebruiken ('-').

2) Een verkeerd pad naar de afbeelding toe. Bij afbeeldingen heb te maken met absolute of relatieve paden.
a) Een absoluut pad bevat het volledige adres van een afbeelding (inclusief de domeinnaam).

Binnen je domein kan je het eerste gedeelte vervangen door een slash:

Het gebruik van absolute paden voorkomt veel fouten.
b) Een relatief pad geeft de verhouding ten opzichte van het bestand dat de afbeelding aanroept. Stel dat je op je webserver 2 folders hebt: images en slideshows. Deze staan naast elkaar in je webfolder. Als je dan vanuit je slideshowfolder verwijst naar de images folder levert dat het volgende op:

Met name bij relatieve paden wil het wel eens fout gaan. Een denkfout die je snel maakt is dat je soms vanuit de webroot van de server moet denken, omdat het pakket dat je gebruikt je pagina's hiernaar toe vertaalt. In dat geval moet je afbeelding een ander pad krijgen:

3) De locatie waar een afbeelding naartoe verwijst bestaat niet meer. Hiermee bedoel ik verwijzingen naar afbeeldingen buiten je eigen domein. Het kan natuurlijk voorkomen dat websites worden opgeheven en daarmee ook de afbeeldingen waarnaar je eventueel linkt (ook wel hotlinking genoemd). Als dit gebeurt zit er niets anders op dan de afbeelding te verwijderen.

4) Het bestaat echt niet. Tja, dat kan natuurlijk ook nog…

Tot slot: shift-reload
Als je een correctie aanbrengt in een pad of naam van een afbeelding, kan het voorkomen dat je geen verschil ziet. Dit komt door het caching mechanisme van browsers. Met shift-reload herlaad je een pagina en de afbeeldingen.