Veelvoorkomende fouten

Afbeeldingen laden niet op uw website: oorzaken en oplossing

Afbeeldingen laden niet op uw website: oorzaken en oplossing
Foto: GeorgeDement — CC BY-SA 2.0 · Flickr

Wanneer een afbeelding niet laadt, klopt meestal het pad niet meer

Een kapotte afbeelding — herkenbaar aan het bekende kleine icoontje met een gebroken kader — betekent dat de browser de afbeelding niet kan vinden op de plek waar de code hem verwacht. De meest voorkomende oorzaken zijn een verkeerd of verouderd bestandspad, een verkeerd gespelde bestandsnaam, of een bestand dat simpelweg niet (meer) op de server staat, bijvoorbeeld na een verhuizing naar andere hosting of een gedeeltelijk mislukte migratie. Ook rechtenproblemen op de server kunnen de oorzaak zijn: als een map of bestand de verkeerde toegangsrechten heeft, kan de webserver het bestand niet uitleveren, ook al staat het er wel degelijk.

Vaak over het hoofd gezien: mixed content en hotlink-bescherming

Twee minder voor de hand liggende oorzaken komen regelmatig voor na een SSL-installatie of hostingwijziging:

  • Mixed content. Als uw site via https werkt maar een afbeelding nog via het onbeveiligde http wordt aangeroepen, blokkeren moderne browsers die afbeelding stilzwijgend of tonen ze een waarschuwing. Zie mixed content-waarschuwingen oplossen voor de volledige aanpak.
  • Hotlink-bescherming. Sommige hostingconfiguraties blokkeren het insluiten van afbeeldingen die niet via de eigen domeinnaam worden opgevraagd. Is een afbeelding verplaatst naar een CDN of externe map zonder de instellingen aan te passen, dan kan deze bescherming per ongeluk uw eigen content blokkeren, wat verwarrend is omdat de instelling juist bedoeld is om ú te beschermen tegen misbruik door anderen.

Zo stelt u vast waar het misgaat

  1. Open de pagina in de ontwikkelaarstools van uw browser (rechtermuisknop > Inspecteren, tabblad Netwerk) en herlaad de pagina. Bij elke afbeelding die niet laadt, ziet u de exacte foutcode: 404 (bestand niet gevonden), 403 (geen toegang) of geblokkeerd vanwege mixed content.
  2. Controleer in de mediabibliotheek van uw CMS of het bestand daar nog aanwezig is en of de bestandsnaam overeenkomt met wat de pagina opvraagt.
  3. Test dezelfde pagina in een andere browser of in een incognitovenster om browsercache en -extensies (zoals adblockers) als oorzaak uit te sluiten.
  4. Controleer bij twijfel de bestandsrechten op de server: mappen horen doorgaans 755 te hebben en bestanden 644.

Wanneer het om veel afbeeldingen tegelijk gaat

Zijn er ineens tientallen of honderden afbeeldingen tegelijk kapot, dan gaat het zelden om losse bestanden die stuk zijn, maar om een structurele wijziging: een verhuizing naar een nieuwe server waarbij niet alle bestanden zijn overgekomen, een CDN-configuratie die is losgekoppeld, of een uploadmap die per ongeluk verplaatst of hernoemd is. Controleer in dat geval eerst of de hoofdmap voor uploads (bij WordPress doorgaans `wp-content/uploads`) nog op de verwachte plek staat en dezelfde structuur heeft als vóór de wijziging, voordat u per pagina losse afbeeldingen gaat controleren.

Wat kapotte afbeeldingen kosten aan vertrouwen en zichtbaarheid

Een kapotte afbeelding doet meer dan alleen ontsieren: bezoekers associëren een pagina vol lege icoontjes al snel met een site die niet wordt onderhouden, wat afstraalt op het vertrouwen in de rest van de content of het aanbod. Voor zoekmachines telt bovendien mee dat een pagina met veel ontbrekende afbeeldingen minder compleet oogt, en gaat waardevolle alt-tekst — vaak een van de weinige plekken waar een omschrijving met zoekwoorden natuurlijk past — verloren zodra de bijbehorende afbeelding niet meer laadt. Een kwartaal zonder controle kan zo, bij een site met veel content, oplopen tot tientallen onopgemerkte kapotte afbeeldingen.

Oplossen en herhaling voorkomen

Is het pad simpelweg fout, herupload de afbeelding dan of pas de verwijzing in de pagina aan. Bij een rechtenprobleem herstelt u de bestandsrechten via uw hostingpaneel of FTP-client. Bij mixed content vervangt u de harde http-verwijzing door een relatieve link of door https. Neem het controleren van afbeeldingen op als vaste stap na elke migratie, thema-wissel of SSL-installatie — dit zijn de momenten waarop dit probleem het vaakst ontstaat, en een korte controle achteraf bespaart u vervolgens klachten van bezoekers die zelf de eerste zijn die het opmerken.

Veelgestelde vragen

Waarom zie ik de afbeelding zelf wel, maar bezoekers niet?
Dat wijst vaak op browsercache aan uw kant: uw browser heeft de oude, werkende versie nog opgeslagen. Test in een incognitovenster om te zien wat een nieuwe bezoeker daadwerkelijk ziet.
Kan een adblocker afbeeldingen blokkeren?
Ja. Sommige advertentieblokkers blokkeren afbeeldingen die uit een advertentienetwerk lijken te komen, ook als het gewone contentafbeeldingen zijn. Test daarom altijd ook met extensies uitgeschakeld.
Moet ik alt-tekst opnieuw instellen als ik een afbeelding herupload?
Ja, alt-tekst is gekoppeld aan het specifieke bestand in de mediabibliotheek. Bij een nieuwe upload moet u deze dus opnieuw invullen, ook al staat de afbeelding inhoudelijk op dezelfde plek in de pagina.