Het oude gezegde luidt: "een foto zegt meer dan duizend woorden." Dit is met name het geval op internet, waar de aandachtsspanne notoir kort is en het juiste beeld dus echt een site kan maken of breken door de juiste aandacht te trekken en boeiende paginabezoekers lang genoeg te laten om te leren wat ze moeten leren of een specifieke taak moeten uitvoeren. actie die een "overwinning" voor de site signaleert. Ja, als het om een website gaat, zijn afbeeldingen misschien wel meer waard dan duizend woorden!
Dus met het belang van online afbeeldingen vastgesteld, laten we vervolgens eens kijken wat uw website zegt als een afbeelding die op de site hoort te laden, niet wordt geladen? Dit kan gebeuren, of u inline-afbeeldingen hebt die deel uitmaken van de HTML- of achtergrondafbeeldingen die met CSS zijn toegepast (en uw site heeft waarschijnlijk beide). De bottom line is dat wanneer een afbeelding niet op een pagina kan worden geladen, het ontwerp er gebroken uitziet en in sommige gevallen de gebruikerservaring op die site volledig kan vernietigen. De "duizend woorden" die de foto verzendt zijn zeker geen positieve!
Laten we een paar van de veelvoorkomende redenen bekijken waarom afbeeldingen niet kunnen worden geladen op een site, en waar u rekening mee moet houden bij het oplossen van dit probleem tijdens het testen van websites.
Onjuiste bestandspaden
Wanneer u afbeeldingen toevoegt aan het HTML- of CSS-bestand van een site, moet u een pad maken naar de locatie in uw directorystructuur waar deze bestanden zich bevinden. Dit is een code die de browser vertelt waar hij de afbeelding moet zoeken en ophalen. In de meeste gevallen bevindt dit zich in een map met de naam 'images'. Als het pad naar deze map en de daarin aanwezige bestanden onjuist zijn, worden de afbeeldingen niet correct geladen omdat de browser de juiste bestanden niet kan ophalen. Het zal het pad volgen dat je het hebt verteld, maar het zal een doodlopende weg raken en in plaats van de juiste afbeelding te tonen, zal het leeg zijn.
Stap 1 bij het oplossen van problemen met het laden van afbeeldingen is ervoor te zorgen dat het bestandspad dat u hebt gecodeerd correct is. Misschien hebt u de verkeerde map opgegeven of hebt u het pad naar die map niet correct vermeld. Als dit niet het geval is, hebt u mogelijk een ander probleem met dat pad. Lees verder!
Bestanden namen verkeerd gespeld
Terwijl u de bestandspaden voor uw bestanden bekijkt, moet u er ook zeker van zijn dat u de naam van de afbeelding correct hebt gespeld. In onze ervaring zijn onjuiste namen of spelfouten de meest voorkomende oorzaak van problemen met het laden van afbeeldingen. Onthoud dat webbrowsers zeer meedogenloos zijn als het gaat om bestandsnamen. Als je per ongeluk een letter vergeet of de verkeerde letter gebruikt, zal de browser niet op zoek naar een vergelijkbaar bestand en zeggen, "oh, je bedoelde waarschijnlijk deze, toch?" Nee - als het bestand verkeerd gespeld is, wordt het niet geladen op de pagina, zelfs als het in de buurt is.
Verkeerde bestandsextensie
In sommige gevallen is de naam van het bestand mogelijk correct gespeld, maar de bestandsextensie is mogelijk onjuist. Als uw afbeelding een .jpg-bestand is, maar uw HTML zoekt naar een .png, is er een probleem. Zorg ervoor dat u het juiste bestandstype gebruikt voor elke afbeelding en zorg dat u dezelfde extensie gebruikt in de code van uw website.
Let ook op hoofdlettergevoeligheid. Als uw bestand eindigt met .JPG, met de letters alles in caps, maar uw code verwijst .jpg, allemaal kleine letters, zijn er bepaalde webservers die deze twee anders zien, ook al zijn het dezelfde sets met letters. Hoofdlettergevoeligheid telt! Dit is de reden waarom we onze bestanden altijd met kleine letters opslaan. Als we dit doen, kunnen we altijd kleine letters in onze code gebruiken, waardoor we een mogelijk probleem met onze afbeeldingsbestanden voorkomen.
Bestanden ontbreken
Als de paden naar uw beeldbestanden correct zijn en de naam en bestandsextensie ook foutvrij zijn, moet u controleren of de bestanden daadwerkelijk naar de webserver zijn geüpload. Het negeren van het uploaden van bestanden naar die server wanneer een website wordt gestart, is een veel voorkomende fout die gemakkelijk over het hoofd wordt gezien.
Hoe los je dit probleem op? Upload die afbeeldingen, vernieuw uw webpagina en deze zou de bestanden onmiddellijk moeten weergeven zoals verwacht. U kunt ook proberen om de afbeelding op de server te verwijderen en deze opnieuw te uploaden. Het lijkt misschien vreemd, maar we hebben dit werk meer dan eens gezien. Soms worden bestanden beschadigd, dus deze "verwijder en vervang" -methode kan uiteindelijk helpen.
De website die de afbeeldingen host, is down
U wilt doorgaans alle afbeeldingen die uw site gebruikt op uw eigen server hosten, maar in sommige gevallen gebruikt u mogelijk afbeeldingen die elders worden gehost. Als die site die als host voor de afbeelding wordt gebruikt, niet wordt geladen, worden uw afbeeldingen ook niet geladen.
Probleem overdragen
Of een afbeeldingsbestand wordt geladen vanuit een extern domein of van uzelf, er is altijd een kans dat er een overdrachtsprobleem voor dat bestand is wanneer dit voor het eerst door de browser wordt aangevraagd. Dit zou niet vaak voorkomen (als dat het geval is, moet u mogelijk op zoek naar een nieuwe hostingprovider), maar dit kan van tijd tot tijd gebeuren.
De ongelukkige kant van dit probleem is dat je er echt niets aan kunt doen omdat het een probleem is waar je geen controle over hebt. Het goede nieuws is dat het een tijdelijk probleem is dat vaak snel wordt opgelost. Wanneer iemand bijvoorbeeld een kapot uitziende pagina ziet en deze vernieuwt, zal alleen dat het probleem vaak verhelpen en de afbeeldingen correct laden. Als u een kapotte afbeelding ziet, vernieuwt u de browser om te zien of het misschien gewoon een transmissieprobleem was uw eerste verzoek.
Een paar laatste opmerkingen
Als u denkt aan afbeeldingen en laadproblemen, zijn twee dingen waar u ook rekening mee moet houden het juiste gebruik van ALT-tags en de snelheid en algehele prestaties van uw website.
ALT of "alternatieve tekst", tags zijn wat wordt weergegeven door een browser als een afbeelding niet kan worden geladen. Ze zijn ook een belangrijk onderdeel bij het maken van toegankelijke websites die kunnen worden gebruikt door mensen met bepaalde handicaps. Elke inline afbeelding op uw site moet een geschikte ALT-tag hebben. Merk op dat afbeeldingen die zijn toegepast met CSS dit kenmerk niet hebben.
Wat betreft de prestaties van de website, het laden van te veel afbeeldingen of zelfs slechts enkele reuzenbeelden die niet goed zijn geoptimaliseerd voor webbezorging, zal een negatieve invloed hebben op de laadsnelheid. Controleer daarom de impact van afbeeldingen die u gebruikt in het ontwerp van uw site en onderneem alle stappen die nodig zijn om de prestaties van die site te verbeteren, terwijl u toch het algemene uiterlijk en gevoel creëert dat geschikt is voor uw websiteproject.
