How to Find and Fix Broken Images on a Website

If you are searching for an answer about How to Find and Fix Broken Images on a Website, then this TheDevGarden guide will help you find out how you can improve your website. Broken images occur when an image on a web page fails to load correctly. Instead of showing the intended photo or graphic, the browser displays a default “missing image” icon or an empty space. This happens when the browser cannot retrieve the image file from its source URL. Common causes include typos in the src attribute, moving or renaming image files without updating links, or server issues that block the file. For example, if an image file is renamed or placed in a different folder without adjusting the HTML code, the image will not appear.

At first glance, a broken image might seem like a minor issue. However, it can confuse visitors or make your site look unprofessional. A missing image can also disrupt page layout or prevent a clickable button from working. Beyond visual impact, broken images have technical consequences: each missing image triggers a failed HTTP request (often a 404 error) that site analytics and search tools register. In other words, broken images harm user experience and can hurt your site’s performance and SEO health.

In this guide, we’ll cover how to find and fix broken images on your website. We’ll explain what broken images are and why they matter for both user experience and SEO. You’ll learn manual techniques (like using your browser’s developer tools) and automated methods (using site crawlers or scripts) to identify broken images. Then, we’ll provide step-by-step instructions for fixing them—whether by correcting file paths, adding fallback images, or enabling lazy loading—and share best practices to prevent broken images in the future. This post is written for everyone from non-technical site owners to experienced developers, so you’ll find useful tips at every level.

Why Broken Images Matter

Broken images affect both your site visitors and your search ranking.

Impact on User Experience

• Unprofessional Appearance: A page full of broken-image icons or blank areas looks incomplete. Visitors may trust or engage with your content less when key visuals are missing.

• Navigation Issues: A broken image might be a link or button. If users can’t see or click it, they may not know where to go. Important information conveyed by the image is lost.

• Higher Bounce Rate: Visitors expecting an image-rich page (like a product gallery or tutorial) might leave if key pictures don’t load, hurting conversions.

• Accessibility Problems: Missing images with no alt text means screen-reader users or those on slow connections may have nothing to see or hear. Including descriptive alt text is important; if an image fails completely, users rely on that fallback text to understand content.

Impact on SEO

• Crawl Efficiency: Search engines allocate a limited crawl budget to each site. A broken image returning a 404 wastes crawl resources on a missing file, which could slow discovery of new or updated content.

• Page Speed: The browser attempts to load the missing image and waits before moving on, which can delay page rendering. Slower pages hurt user satisfaction and can negatively affect search rankings.

• Image Indexing: If you use images to boost SEO (for example, appearing in image search or adding contextual keywords via alt text), a broken image means those opportunities are lost. Google and other engines can’t index an image that never loads.

• Site Quality Signals: A website with many broken resources (images, scripts, or links) can appear neglected. Search algorithms may interpret this as a sign of poor site maintenance, which can indirectly impact SEO.

Each broken image you fix will improve your site’s professionalism and performance. The next sections explain how to find broken images and correct these problems in detail.

How to Find Broken Images

Whether your site has one page or thousands, broken images can appear anywhere. There are manual checks and automated tools to help you find them.

Manual Detection (Beginner-Friendly)

For a quick check on a small site, use your web browser’s tools:

1. Visual Inspection: Scroll through your web pages and look for any broken-image icons or empty areas where images should be. If an image is missing, you might see its alt text (if provided) or nothing at all.

2. View Page Source: In your browser, right-click and select View Page Source. Search for <img> tags and copy their src URLs. Paste each URL into the address bar to see if the image loads. If you get a 404 error or no image appears, that image is broken.

3. Developer Console: Open developer tools (press F12 or right-click and choose Inspect). Go to the Console tab and look for error messages like 404 (Not Found) related to images.

4. Network Tab: In the developer tools, switch to the Network tab. Reload the page and filter by “Img”. Any images that failed to load will appear in red. Click on a failed image request to see its status code (often 404) and the exact URL.

These manual methods are helpful for quick checks, but they can be tedious for larger sites. For a thorough audit, use automated approaches:

Automated Tools and Scripts (Intermediate to Advanced)

Several tools can crawl your site and report broken images:

• Screaming Frog SEO Spider: This desktop tool crawls your site like a search engine. It provides a report of all images and flags those returning errors (like 404).

• SEO Site Auditors (SEMrush, Ahrefs, etc.): Many SEO platforms have site audit features. They crawl your site for technical issues, including broken images, and give you a summary report.

• Broken Link/Image Checkers: Online services (and some CMS plugins) can scan your site for broken media. For example, WordPress plugins like Broken Link Checker can find missing image files as well as broken links.

• Search Console / Bing Webmaster: The coverage or crawl reports may list URLs that returned 404. While often used for pages, you can filter these reports to catch missing image URLs that bots tried to fetch.

• Custom Scripts: Developers can write simple scripts to find broken images. For example, fetch your page HTML, parse all <img> tags, and use an HTTP library to send a request to each image URL. If the response code isn’t 200, mark it as broken. Here’s a basic Python example:

• This script prints any image URL that doesn’t return a 200 OK. You can expand it to crawl multiple pages or handle relative paths.

• Command-line Tools: Tech-savvy users can use tools like wget or curl to check for missing images. For example, wget --spider -r https://example.com crawls the site recursively and reports any 404 errors, including images. Similarly, you could write a curl loop to test each image URL.

• Browser Extensions: Some browser plugins can detect missing images on the fly. These tools highlight broken images directly as you browse, which is useful for quick checks.

• Integrated Testing: Advanced teams add broken-link checks to their build process. For example, a static site generator or CI pipeline might run a tool (like an HTML proofer) that fails if any image URLs 404.

Combining methods ensures thorough coverage. A basic plan is to do a quick manual or plugin check for new content and periodically run a full-site crawl or script to catch any missed broken images.

How to Fix Broken Images

Fixing a broken image depends on why it’s broken. Here are common solutions:

• Correct the Image Path: If the URL is wrong (typo, wrong folder, missing slash), edit your HTML or CSS to use the correct path. Ensure the src attribute exactly matches the file’s location on the server.

• Restore or Re-upload the Image: If the file was deleted or never uploaded, place the image in the expected folder. Use your CMS media library, FTP, or hosting file manager to add the missing file at the path your code expects.

• Match Extension and Case: Make sure the file extension in the URL matches the actual file (.jpg vs .png). Also note that some servers (like Linux hosts) are case-sensitive: Photo.JPG is different from photo.jpg. Update either the file or the URL so they match exactly.

• Use a Fallback Image: If you can’t fix the original image immediately, use a placeholder to avoid the broken icon. For example, add an onerror handler to your <img> tag:

• This tells the browser: if main-photo.jpg fails to load, replace it with placeholder.jpg. A generic placeholder image (like a grey box or logo) is much better looking than a broken icon.

• Check Permissions and Hosting: Make sure the image file is readable by the web server. If file permissions are too restrictive (e.g. owner-only access), change them to something like 644 so the server can serve the file. Also, if you’re using a CDN or hotlink protection, ensure it isn’t blocking your images. For example, some hosting rules or .htaccess settings might deny access — check and adjust those as needed.

• Clear Caches: If you fixed a broken image but it still appears broken, your browser or CDN might be serving a cached version. Clear your browser cache (or do a hard refresh), and purge your CDN or site cache so the updated image loads.

• Verify Responsive Images: If you use <picture> or srcset for multiple resolutions, check that all referenced images exist. A missing file in the srcset array can cause a broken image on certain screen sizes or resolutions.

• Lazy Loading (Performance Tip): Using the loading="lazy" attribute on <img> tags defers image loading until the user scrolls near them, improving performance. It doesn’t fix broken images directly, but it ensures images only load when needed. For example:

• Modern browsers support this attribute. For wider support or advanced features, you can use a JavaScript lazy-loading library.

• Check Protocol (HTTPS): Ensure your site and images use the same protocol. If your site is served over HTTPS, image URLs should also use https://. Loading images via http:// on an HTTPS page will often be blocked by the browser. Update your links to use HTTPS if needed.

• External Host Issues: If an image URL points to a different domain, that server might have moved or blocked it. For example, some sites disable “hotlinking” of images. The safest fix is to download the image and host it on your own domain or a trusted CDN.

After applying a fix, always retest the page to ensure the image now appears and the network log shows 200 OK. If one image was broken, test other pages too in case they used the same image or path.

Best Practices to Prevent Broken Images

Make broken images a rare exception by following these guidelines:

• Organize Your Images: Store images in a logical folder structure on your server (for example, /images, /uploads). Reference them using consistent paths. Avoid using local paths (like file://) or unsynced directories that won’t exist on the live site.

• Use Your CMS Correctly: If you run a CMS (WordPress, Drupal, etc.), upload images through its media manager or library. This ensures the CMS knows about each file. If you move images around manually, be sure to update the references in your content or database.

• Name Files Carefully: Use clear, lowercase file names with hyphens or underscores (e.g. blue-widget.jpg). Avoid spaces and special characters. This reduces the chance of typos or encoding issues and makes files easy to manage.

• Version Images: If you update an image but keep the same filename, add a version query or timestamp (for example, photo.jpg?v=2). This forces browsers and CDNs to fetch the new file rather than a cached copy.

• Regularly Audit Your Site: Schedule routine broken-image scans. For example, run an automated check (via an SEO audit tool or custom script) every month or whenever you add a lot of new content. Fix any issues promptly before they accumulate.

• Backup Your Media: Keep backups of your entire image library. If something gets accidentally deleted or corrupted, you can restore the original file and fix the page faster.

• Avoid Hotlinking: Don’t rely on images hosted by other websites (unless absolutely necessary). That third-party image might disappear or become blocked. Whenever possible, host images on your own domain or a reliable CDN you control.

• Consistent Protocol: Always use https:// in your image URLs on a secure site. Mixing protocols (HTTP vs HTTPS) can cause browsers to block images. Update any hardcoded http:// links to https:// if you’ve switched your site to SSL.

• Use a Reliable CDN: If you use a Content Delivery Network (CDN) for images, verify that your site references the correct CDN URLs. After changing CDN providers or settings, double-check that all image links point to the right addresses. Misconfigured CDN paths can lead to broken images.

• Cross-Browser Testing: Occasionally check your website in different browsers and devices to ensure images load correctly everywhere. Rare quirks or security settings might affect one browser differently. Testing in Chrome, Firefox, Safari, Edge, etc. helps catch any compatibility issues early.

• Include Images in an XML Sitemap: If you maintain an XML sitemap, list your important images there. This helps search engines know which images to crawl. Whenever you move or delete images, update the sitemap so crawlers don’t repeatedly fetch missing files.

• Write Alt Text: Always include meaningful alt attributes for your images. While this doesn’t stop images from breaking, good alt text ensures that if an image fails, users (including screen-reader users) still get context about what the image should show.

• Monitor Server Logs: Check your web server’s error logs for 404 errors related to images. A spike in missing-image errors will show up there. Setting up alerts for unusual 404 patterns can help you fix issues proactively.

Following these practices will keep your site robust. It’s much easier to prevent a broken image than to fix one after it frustrates users. A well-maintained site looks professional and performs better in search engines.

Conclusion

Broken images are a common but avoidable issue on websites. They harm the user experience by leaving gaps in content and can undermine your site’s SEO by introducing 404 errors and slowing page loads. The good news is that finding and fixing them is usually straightforward. Use your browser’s developer tools or an automated crawler to locate missing images, then correct the path, restore the file, or use a fallback image. Remember to clear caches and test in multiple browsers after fixing each issue.

By following the steps and best practices above, you’ll be able to keep your site free of broken images. A well-maintained site looks professional and runs smoothly, which keeps both your visitors and search engines happy. Happy debugging, and may all your images load correctly!