Det gamla ordspråket säger att "en bild är värd tusen ord". Detta gäller speciellt på webben där uppmärksamhetstiderna är notoriskt korta och så kan rätt bild verkligen göra eller bryta en webbplats genom att locka den rätta uppmärksamheten och engagerande sidbesök så länge att de kan lära sig vad de behöver för att lära sig eller utföra ett specifikt handling som signalerar en "win" för webbplatsen. Ja, när det gäller en webbplats kan bilder faktiskt vara värda mer än tusen ord!
Så med vikten av online-bilder upprättade, låt oss nu överväga vad din webbplats säger om en bild som ska vara på plats misslyckas med att ladda? Detta kan hända om du har inline-bilder som ingår i HTML- eller bakgrundsbilder som används med CSS (och din webbplats har troligtvis båda). Slutsatsen är att när en grafik inte laddas på en sida, blir designen krossad och kan i vissa fall helt förstöra användarupplevelsen på den här sidan. De "tusen orden" som bilden skickar är definitivt inte positiva!
Låt oss ta en titt på några av de vanligaste anledningarna till att bilder skulle misslyckas med att ladda på en webbplats, liksom vad du bör tänka på när du felsöker problemet vid testning på webbplatsen.
Felaktiga filvägar
När du lägger till bilder på en webbplats HTML eller CSS-fil måste du skapa en sökväg till platsen i din katalogstruktur där de här filerna ligger. Detta är kod som anger webbläsaren var du ska leta efter och hämta bilden från. I de flesta fall skulle detta vara inuti en mapp med namnet "bilder." Om sökvägen till den här mappen och filerna inuti den är inkorrekt laddas bilderna inte korrekt eftersom webbläsaren inte kommer att kunna hämta rätt filer. Det kommer att följa den väg som du berättade för det, men det kommer att slå ett dödsfall och istället för att visa den lämpliga bilden kommer det att bli tomt.
Steg 1 i felsökning av bildhantering är att se till att den filväg du har kodat är korrekt. Kanske har du angett fel katalogen eller inte korrekt angiven sökvägen till den katalogen. Om det inte är fallet kan det hända att du har ett annat problem med den sökvägen. Läs vidare!
Filnamn Felstavade
När du undersöker filvägarna för dina filer måste du också vara säker på att du stavat namnet på bilden korrekt. Enligt vår erfarenhet är felaktiga namn eller stavfel den vanligaste orsaken till problem med att ladda upp bilder. Kom ihåg att webbläsare är mycket oförsonliga när det gäller filnamn. Om du glömt ett brev med misstag eller använder fel bokstav söker inte webbläsaren efter en fil som liknar och säger "Åh, menade du antagligen den här?" Nej - om filen är stavad fel, även om den är nära, laddas den inte på sidan.
Fel filtillägg
I vissa fall kan du ha namnet på filen korrekt stavat, men filtillägget kan vara felaktigt. Om din bild är en .jpg-fil, men din HTML letar efter en .png kommer det att bli ett problem. Se till att du använder rätt filtyp för varje bild och var noga med att du har krävt samma tillägg i din webbplatss kod.
Leta även efter fallkänslighet. Om din fil slutar med .JPG, med bokstäverna alla i kepsar, men dina kodreferenser .jpg, alla små bokstäver, det finns vissa webbservrar som kommer se att de två är olika, även om de är samma uppsättningar bokstäver. Fallkänslighet räknas! Det är därför vi alltid sparar våra filer med alla små bokstäver. Genom att göra det kan vi alltid använda små bokstäver i vår kod, vilket eliminerar ett eventuellt problem vi kan ha med våra bildfiler.
Filer saknas
Om sökvägarna till dina bildfiler är korrekta, och namnet och filtillägget också är fria, är nästa objekt som ska kontrolleras se till att filerna faktiskt har laddats upp till webbservern. Att försumma att ladda upp filer till den servern när en webbplats lanseras är ett vanligt misstag som är lätt att förbise.
Hur fixar du detta problem? Ladda upp dessa bilder, uppdatera din webbsida, och det ska genast visa filerna som förväntat. Du kan också försöka radera bilden på servern och ladda upp den igen. Det kan tyckas konstigt, men vi har sett detta arbete mer än en gång. Ibland blir filer skadade, så det här "ta bort och ersätt" -metoden kan sluta hjälpa.
Webbplatsen där bilderna är nere
Du vill vanligtvis värd för alla bilder som din webbplats använder på din egen server, men i vissa fall kan du använda bilder som finns på andra ställen. Om den webbplatsen som hostar bilden går ner, kommer dina bilder inte att läsas heller.
Ö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 borde inte vara vanligt förekommande (om det är, kan du behöva leta efter en ny webbleverantör), men det kan hända då och då.
Den olyckliga sidan av denna fråga är att det verkligen inte finns något du kan göra åt det eftersom det är ett problem utanför din kontroll. Den goda nyheten är att det är ett tillfälligt problem som ofta löses ganska snabbt. Om någon till exempel ser en bruten sida och uppdaterar den, kommer det ensam ofta att lösa problemet och ladda bilderna ordentligt. Om du ser en trasig bild uppdaterar du webbläsaren för att se om det kanske bara var ett transmissionsproblem på din första förfrågan
Några slutliga anteckningar
När du tänker på bilder och laddar bekymmer, är två saker att också vara uppmärksam på, att du använder ALT-taggar och din webbplatshastighet och övergripande prestanda.
ALT, eller "alternativ text", är taggar som visas av 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 inline-bild på din webbplats ska ha en lämplig ALT-tagg. Observera att bilder som används med CSS inte har detta attribut.
När det gäller webbplatsens prestanda, laddas för många bilder, eller till och med bara några få jättarbilder som inte är optimalt optimerade för webbleverans, kommer att ha en negativ inverkan på lasthastigheten. Av denna anledning, var noga med att testa effekterna av bilder som du använder i din webbplatss design och vidta alla åtgärder som krävs för att förbättra webbplatsens prestanda samtidigt som du skapar det övergripande utseendet som passar ditt webbplatsprojekt.
