Det gamla ordspråket säger att "en bild är värt tusen ord." Denna slogan lyser på webben, där uppmärksamheten sträcker sig är notoriskt korta - rätt bild kan skapa eller bryta en webbplats genom att locka rätt uppmärksamhet och engagerande sida besökare.
Men när en grafik inte laddas får den designen att se trasig ut och kan i vissa fall försämra användarupplevelsen på den webbplatsen. De "tusen ord" som den trasiga bilden skickar är verkligen inte positiva!
1. Felaktiga filvägar
När du lägger till bilder på en webbplats HTML eller CSS måste du skapa en sökväg till platsen i din katalogstruktur där filerna finns. Det här är kod som berättar webbläsaren var den ska leta efter och hämta bilden från. I de flesta fall skulle det finnas i en mapp med namnet bilder. Om sökvägen till den här mappen och filerna inuti den är felaktig kommer bilderna inte att laddas ordentligt eftersom webbläsaren inte kan hämta rätt filer. Den kommer att följa den väg som du sa till den, men den kommer i en återvändsgränd och kommer istället för att visa lämplig bild tom.
2. Filnamn felstavade
När du undersöker filvägar för dina filer, kontrollera att du stavade namnet på bilden korrekt. Felaktiga namn eller felstavningar är den vanligaste orsaken till problem med bildläsning.
3. Fel filtillägg
I vissa fall kan namnet på filen vara rätt stavat, men filtillägget kan vara felaktigt. Om din bild är en .jpg-fil, men din HTML letar efter en .png, det kommer att finnas ett problem. Använd rätt filtyp för varje bild och referera sedan till samma tillägg i din webbplats kod.
Titta också efter skiftlägeskänslighet. Om din fil slutar med .JPG, med bokstäverna alla versaler, men dina kodreferenser .jpg, alla små bokstäver, vissa webbservrar ser dessa två vara olika, även om de är samma uppsättningar brev. Fallkänslighet räknas.
Det är bäst att alltid spara filer med små bokstäver. Genom att göra det kan vi alltid använda gemener i vår kod, vilket eliminerar ett möjligt problem vi kan ha med våra bildfiler.
4. Saknade filer
Om sökvägarna till dina bildfiler är korrekta och namnet och filtillägg är också felfria, kontrollera att filerna har laddats upp till webbservern. Att försumma att ladda upp filer till den servern när en webbplats startas är ett vanligt misstag som är lätt att förbise.
Ladda upp dessa bilder, uppdatera din webbsida och den ska omedelbart visa filerna som förväntat. Du kan också försöka ta bort bilden på servern och ladda upp den igen. Ibland skadas filer under överföringar (t.ex. med text snarare än binär överföring under FTP), så den här metoden "ta bort och ersätt" hjälper ibland.
5. Webbplatsen som är värd för bilderna är nere
Du kommer normalt att vara värd för bilderna som din webbplats använder på egen hand server, men i vissa fall kan du använda bilder som är värd någon annanstans. Om den webbplats som är värd för bilden går ner kommer inte dina bilder att laddas.
6. Överföringsproblem
Oavsett om en bildfil laddas från en extern domän eller från din egen, finns det alltid en chans att det kan finnas ett överföringsproblem för den filen när den först begärs av webbläsaren. Det här problemet borde inte vara en vanlig händelse (om det är så kan du behöva leta efter en ny webbhotell), men det kan hända då och då.
En vanlig orsak till detta problem är att servern är överväldigad och inte kan betjäna alla sidtillgångar tillräckligt snabbt innan begäran tar slut. Du kommer att se detta problem oftare med billigt tillhandahållna virtuella webbservrar som kämpar för att hantera mer komplicerade, skript-tunga webbplatser. Om problemet uppstår ofta, överväga att uppgradera serverns funktioner eller hitta en ny värd.
7. Databasproblem
Moderna dynamiska webbapplikationer, som WordPress, förlitar sig på en databas för att lagra information om allt på en webbplats, inklusive bilderna. Om din webbplats misslyckas med att ladda bilder finns det en chans att databasen upplever något problem.
Det finns många sätt att databasproblem kan hända. Din applikation kanske inte ens är ansluten till databasen, eftersom den antingen är nere eller inte kan nås på en annan server. Något kan ha skadats i själva databasen, eller din databasanvändarinformation har ändrats och du loggar ut. Även enkla inställningsändringar kan utlösa oavsiktliga konsekvenser som antingen ändrar databasen eller gör den oåtkomlig. Kontrollera serverloggarna för att se om databasen kan vara den skyldige.
Några sista anteckningar
Överväga korrekt användning av ALT-taggar och din webbplatshastighet och övergripande prestanda.
ALT- eller "alternativ text" -taggar är det som visas i en webbläsare om en bild inte laddas. De är också en viktig komponent för att skapa tillgängliga webbplatser som kan användas av personer med vissa funktionshinder. Varje inbyggd bild på din webbplats bör ha en lämplig ALT-tagg. Bilder som används med CSS erbjuder inte detta attribut.