Menu

How to find and fix broken images on a website
📰

How to find and fix broken images on a website

DEV Community: html·linkbruno.com·2 days ago
#hiN5bjwJ
#devto2#devto#dev#broken#article
Reading 0:00
15s threshold

A broken image is easy to miss. On some pages it shows as a small icon with alt text, on others it leaves a blank gap, and if it's a CSS background you might see nothing at all. Visitors notice, though, and so do search engines when your product photos or diagrams return 404.

Here's why images break, how to find every broken one on a page or a site, and how to fix them so they stay fixed.

Why images break

Almost every broken image comes from one of these:

Case-sensitive paths. Photo.JPG and photo.jpg are the same file on macOS and Windows, but different files on a Linux server. An image that works locally can 404 in production.

Relative paths that moved. img/logo.png on /about means /about/img/logo.png , not /img/logo.png . Moving a page to a deeper URL silently breaks it.

Deleted uploads. Someone cleans up the media library or a CDN bucket, and old posts still reference the files.

Hotlinked images. You embedded an image from another site.…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.