Broken Images: Why They Happen and How to Fix Them

You know the feeling. You land on a website, and where a glossy product photo should be, there is a sad little grey box with a torn-picture icon. Maybe it is a hero banner, maybe a logo, maybe a customer's smiling face that has been replaced by nothing at all. In an instant, your impression of that business shifts. It looks unfinished, a little careless, perhaps even untrustworthy. And here is the uncomfortable truth: visitors make exactly that judgement about your site too, the moment one of your images fails to load.

Broken images are one of the most common and most visible faults a website can develop, yet they are also among the easiest to overlook, because they often appear only on certain pages, certain devices, or for certain visitors. In this guide we will walk through why images break in the first place, how to track down every broken one across your site, the practical fixes for each cause, and the habits that stop them coming back. No jargon, no assumptions, just a clear path to pages that look the way you intended.

What a broken image actually is

When a web page wants to show a picture, it does not store the picture inside the page itself. Instead, the page contains a small instruction that says, in effect, "go and fetch the photo from this exact address and display it here." That address is the image's location on a server somewhere. As long as the picture is sitting at that address and the browser can reach it, everything works. A broken image simply means the browser followed the instruction, went looking for the picture, and came back empty-handed.

The browser then shows a placeholder, that familiar broken-picture icon, to signal that something was meant to be there. So a broken image is rarely a problem with the picture itself. It is almost always a problem with the address, the connection, or the file's availability. Once you understand that, the causes start to make a lot more sense, and so do the fixes.

Why images break: the usual suspects

Images break for a surprisingly small number of reasons, and once you can recognise them, diagnosis becomes quick. Let us go through the most common culprits one at a time.

The address changed

This is by far the most frequent cause. Someone renames a file, moves it into a different folder, or reorganises the media library, and suddenly every page that pointed to the old location is left pointing at nothing. The picture still exists, but the instruction now sends the browser to an address where it no longer lives. This is the visual cousin of a broken link, and it happens for the very same reasons.

The file was deleted

Sometimes the picture really is gone. It was tidied away during a cleanup, removed by accident, or lost in a botched migration. The page still asks for it, but there is nothing left to fetch. This one is particularly common after a site move, which is why careful planning around a healthy, well-maintained site pays off so handsomely.

A typo in the address

Web addresses are unforgiving. A single wrong character, a capital letter where there should be a lowercase one, or a missing dot is enough to break the connection entirely. Because these mistakes are so small, they can be maddening to spot by eye, which is exactly why automated tools earn their keep here.

The image lives somewhere else and that place changed

Many sites pull images from another service, such as a content network, a cloud store, or a third party. That is perfectly normal and often improves speed. But it means your images depend on that external service staying available and keeping its addresses stable. If they change something on their end, your pictures vanish through no fault of your own.

A security mismatch

If your site loads securely but an image is requested over an insecure connection, modern browsers may refuse to show it to protect the visitor. The picture is there and reachable, but the browser blocks it on principle. This sits alongside the broader topic of keeping every part of a page secure, and it is well worth understanding how SSL certificates shape what browsers will and will not display.

The causes and fixes side by side

It helps to see each cause paired with its remedy, so you can move straight from "what is wrong" to "what do I do." Here is the quick-reference version.

How to find every broken image

Fixing one broken image you happened to notice is easy. The real challenge is finding all of them, including the ones hiding on pages you rarely visit. Relying on your own eyes is a losing game on any site bigger than a few pages. Here is a more reliable approach.

Let a crawler do the walking

A crawler is a tool that automatically visits every page on your site, follows every image instruction, and notes which ones come back empty. It does in minutes what would take you days, and it does not get bored or distracted. Running one periodically is the single most effective way to catch broken images at scale, and it dovetails neatly with the same approach used to hunt down common website errors across a whole site.

Read what the browser is telling you

Every modern browser has a built-in panel, often called developer tools, that quietly logs every failed request, including images. You do not need to be technical to glance at it. Open it on a suspect page, look for the items marked in red, and you will see exactly which images failed and what address they were trying to reach. It is like having the page itself confess what went wrong.

Check your server's record

Your hosting keeps a log of every request, and failed image requests show up there too. Learning to skim these records is a genuinely useful skill, and our guide to reading website logs makes it approachable even if you have never looked at one before. The logs will show you which images are being asked for and failing, often revealing patterns you would never spot by browsing.

Fixing them the right way

Once you have your list, resist the urge to simply delete the broken image and move on. That leaves a gap where something meaningful was supposed to be. Instead, work through them with a little care.

If the file was moved or renamed, the cleanest fix is to update the instruction so it points at the new, correct address. If the file was deleted, restore it from a backup and put it back where it belongs. If there is a typo, correct it precisely, because being almost right is the same as being wrong when it comes to web addresses. And if an external source changed, you have a choice: either update your pages to the new address, or bring a copy of the image onto your own site so you no longer depend on someone else's stability.

A word on alternative text

Every image should carry a short written description, known as alternative text or alt text. Its first job is accessibility: it lets visitors using screen readers understand what the picture shows. But it has a happy side benefit. When an image does break, the browser displays this text in its place, so instead of a meaningless grey box, your visitor at least sees a few helpful words. Good alt text turns a total failure into a small inconvenience, and it is a cornerstone of thoughtful image optimisation.

Stopping broken images coming back

Fixing today's broken images is satisfying, but the real win is preventing tomorrow's. A few simple habits go a long way. When you rename or move files, update the pages that use them in the same sitting rather than promising to do it later. Keep reliable backups so that a deleted image is a five-minute restore, not a permanent loss. And be cautious about leaning too heavily on external image sources you do not control.

Above all, build a regular check into your routine. Broken images creep in slowly and silently, so a periodic scan, perhaps as part of a wider website health audit, catches them while they are still rare and easy to fix. Folding this into your standing maintenance checklist means it happens reliably rather than only when something looks obviously wrong. There is even a search dimension here, since broken visual content can feed into the broader work of fixing broken links for SEO and keeping search engines happy with your pages.

Why it is worth the effort

It is tempting to treat a broken image as cosmetic, a minor blemish that nobody really minds. But your visitors do not see it that way. They see a business that does not quite have its act together, and they quietly adjust how much they trust you. On a product page, a missing photo can be the difference between a sale and a shrug. On a homepage, a broken banner is the first thing a new visitor meets.

The good news is that this is one of the most fixable problems a website can have. The causes are few, the tools are accessible, and the fixes are usually quick. With a little attention and a sensible routine, you can keep every page looking exactly as polished as you intended, so that visitors see your work, not a wall of grey boxes. If you would rather hand this off to someone who does it every day, our team is always happy to help you get it sorted.

Frequently asked questions

References

1. Nielsen Norman Group. "First Impressions Matter." nngroup.com.
2. Mozilla MDN Web Docs. "Images in HTML." developer.mozilla.org.
3. Google Search Central. "Image best practices." developers.google.com.