7 Reasons Why Images Are Not Loading on Your Website

Broken images adversely affect your site's usability

abstract painted motion background
oxygen / Getty Images

The old saying goes that "a picture is worth a thousand words." This slogan shines on the web, where attention spans are notoriously short — the right image can make or break a site by attracting the right attention and engaging page visitors.

Yet when a graphic fails to load, it makes the design look broken and, in some cases, can degrade the user experience on that site. The "thousand words" that the broken picture sends are certainly not positive ones!

1. Incorrect File Paths

When you add images to a site’s HTML or CSS file, you must create a path to the location in your directory structure where those files reside. This is code that tells the browser where to look for and fetch the image from. In most cases, this would be inside a folder named images. If the path to this folder and the files inside of it are incorrect, the images will not load properly because the browser will not be able to retrieve the correct files. It will follow the path that you told it to, but it will hit a dead end and, instead of display the appropriate image, will come up blank.

2. Files Names Misspelled

As you examine the file paths for your files, verify that you spelled the name of the image correctly. Incorrect names or misspellings are the most common cause of image-loading problems.

3. Wrong File Extension

In some cases, you may have the name of the file correctly spelled, but the file extension may be incorrect. If your image is a .jpg file, but your HTML is looking for a .png, there will be a problem. Use the correct file type for each image and then reference that same extension in your website’s code. 

Also, look for case sensitivity. If your file ends with .JPG, with the letters all in caps, but your code references .jpg, all lowercase, certain web servers see those two as being different, even though they are the same sets of letters. Case sensitivity counts.

It's best practice to always save files with all-lowercase letters. Doing so allows us to always use lowercase in our code, eliminating one possible problem we could have with our image files.

4. Files Are Missing

If the paths to your image files are correct, and the name and file extension are also error-free, check that the files have been uploaded to the web server. Neglecting to upload files to that server when a site is launched is a common mistake that is easy to overlook.

Upload those images, refresh your web page, and it should immediately display the files as expected. You can also try to delete the image on the server and re-upload it. Sometimes files get corrupted during transfers (e.g., by text rather than binary transfer during FTP), so this "delete and replace" method sometimes helps.

5. The Website Hosting the Images Is Down

You'll normally host the images that your site uses on your own server, but in some cases, you may be using images that are hosted elsewhere. If that site hosting the image goes down, your images are not going to load either.

6. Transfer Problem

Whether an image file is loaded from an external domain or from your own, there is always a chance that there may be a transfer problem for that file when it is first requested by the browser. This problem should not be a common occurrence (if it is, you may need to look for a new hosting provider), but it can happen from time to time.

A common reason for this glitch is that the server is overwhelmed and cannot serve all the page assets quickly enough before the request times out. You'll see this problem more commonly with cheaply provisioned virtual web servers that struggle to handle more complicated, script-heavy sites. If this problem occurs frequently, consider upgrading the server's capabilities or find a new host.

7. Database Problems

Modern dynamic web applications, like WordPress, rely on a database to store information about everything on a site, including the images. If your site is failing to load images, there's a chance that the database is experiencing some issue.

There are a bunch of ways database problems can happen. Your application might not even be connected to the database, because it's either down or unreachable on a different server. Something may have gotten corrupted on the database itself, or your database user information changed, logging you out. Even simple settings changes could trigger unintended consequences that either alter the database or make it unreachable. Check server logs to see if the database might be the culprit.

A Few Final Notes

Consider the proper use of ALT tags and your website speed and overall performance.

ALT, or “alternate text,” tags are what is displayed by a browser if an image fails to load. They are also an important component in creating accessible websites that can be used by people with certain disabilities. Every inline image in your site should have an appropriate ALT tag. Images applied with CSS do not offer this attribute.