The case of the missing image
Do pictures on a website show as red X’s?
There are a number of things that affect how pictures show up in your browser. Some you control, but many problems are caused by the websites themselves.
Let’s look at a few things that can happen.
Become a Patron of Ask Leo! and go ad-free!
Images can go missing from websites for a variety of reasons including the bad website design, problems connecting to the website, security settings, and more. You can use the Inspect tool in some browsers to diagnose why a picture might not be showing.
The red X
If you get a red X like this: , or something similar, that’s the browser’s indication it tried to download a picture but was unable to, or was instructed not to.
If you see only red X’s for all pictures on all sites, your browser is probably configured not to display images at all. Most browsers allow you to turn off downloading pictures completely as a way to download only the text of a website faster.
The first step is to check to make sure that’s configured properly. In Google Chrome, for example, there’s a setting specifically for controlling image display.
Access Chrome settings using the vertical ellipsis, and then search for “image”. Other browsers have similar settings.
Red X’s on some sites
If you’re seeing red X’s in place of images on only some sites, it’s more typically either a problem fetching the image, or a website design issue.
Download problems can be caused by adblockers, security software, or even filters at your ISP. You’ll want to check each of those in case they’re getting in the way.
The most common website issue is when images are removed from wherever they are hosted. For example, the image to the right is hosted on a domain different than the primary Ask Leo! domain (askleo.com):
If that file were removed, or that domain inaccessible, a red X would result.
Similarly, if I had mistyped the reference to that image, perhaps getting the domain, path, or filename wrong, then a red X would result.
What was once a common mistake was for a website to reference a picture by a path local to the designer’s machine. It might reference “c:picturesimage.jpg”, rather than a proper URL, such as “https://example.com/image.jpg”. To the designer, it works, because there is a “c:picturesimage.jpg” that their browser picks up when displaying the page for them. To the rest of us, it’s another red X. Fortunately, this seems to be rare these days.
Mixed content now causes red X’s
If a webpage provided over an https connection includes an image that is fetched with only http, this is referred to as “mixed content” and is considered a security hazard. Some aspects of the protection of an https secure connection is lost when items are fetched with http.
Google Chrome is apparently now erring on the side of security.
Unfortunately, that means that older webpages that have been updated to be shown via https might start including red X’s for any images they include that are not yet updated to do the same.
I’m hearing that some pages on Ask Leo! fall into that category.2
Chrome and Firefox web browsers include an advanced tool (intended for website developers) that help diagnose image display issues. In this video, I walk through the steps to use this tool.
This can be useful either as a website developer, or when providing information to a website owner to help diagnose a problem.
Subscribe to Confident Computing! Less frustration and more confidence, solutions, answers, and tips in your inbox every week.
I'll see you there!