Troubleshooting Guide: How to Fix Broken Images on Your Website

Broken links and images on your website are more than an annoyance — they can seriously disrupt your potential audience’s experience. And if they see enough error messages, they leave.

That’s why it’s critical to find broken links on the website and fix them. But how? This article will give you a no-nonsense, all-purpose, and beginner-friendly troubleshooting guide.

What Are Broken Images: Causes and Impact on User Experience

Broken images fail to load or display correctly on your website. They manifest as empty placeholders or error symbols instead of the intended visual content, disrupting the user experience.

Regarding e-commerce websites, user experience (UX) is everything. HubSpot has popularly said that 88% of customers will only return to a site with good UX. This is true whether your e-commerce website focuses on the Philippines or Europe.

The causes of broken images can vary, and understanding these issues is crucial for maintaining a positive user experience.

Possible causes include the following:

• Incorrect file paths: If the image file is moved or deleted, the browser can’t locate it.
• Server issues: Unavailable or slow servers may hinder image loading.
• File format problems: Incompatibility between the image file format and the browser often leads to display issues.
• Improper coding: Errors in your site’s HTML or CSS coding might prevent the browser from correctly rendering images.

You have to find broken links and fix them as quickly as possible. Because if you don’t, it doesn’t just negatively impact user experience. Broken links also affect crawling by search engines, lowering your rankings in Google search results.

Not fixing broken links can destroy months of SEO efforts and hard work. On the other hand, knowing the basics will take you far in ensuring a functioning e-commerce website.

Broken Image Troubleshooting Masterclass: 16 Best Tips

So you need to find and fix broken links, but how can you do it?

Many of the tutorials online are too technical, but this guide will teach you how to fix broken images on a website from the perspective of an e-commerce website owner.

Let’s dive right in.

Identifying Broken Images: Manual Inspection and Automated Tools

Broken images detract from your website’s overall aesthetic and functionality, negatively impacting your user engagement and, ultimately, sales.

But it’s tricky to identify broken links, especially if you have complex or numerous websites. Two main ways to solve this problem are manual or automated approaches.

The manual approach

You can visually scan your entire website’s pages and pinpoint missing or incorrectly linked images. This method has the advantage of being straightforward and accessible to anyone, even those without technical expertise.

You can easily do the following steps:

• Go through every page on your website.
• Identify every broken image.
• Right-click on the image in question on your website.
• Select “Inspect” from the dropdown menu.
• After selecting “Inspect,” you will see the source code for the image.
• Look for the <IMG SRC= > tag to examine the image URL.
• Conduct preliminary inspections, such as noting the URL and verifying the image filename and location.
• Ensure that the image file exists in the specified location.

However, the manual approach quickly becomes impractical as the website grows. It may not catch every broken image, especially when dealing with complex sites or large image portfolios.

The automated approach

On the other hand, automation offers a more efficient solution. Automated tools can scan a website, detect broken images, and provide a comprehensive report. Automation can handle large-scale operations quickly and accurately, saving time and resources and ensuring a thorough examination of every image across the website.

Here are five popular automated link-checking services you can check out:

• Deadlinkchecker.com: This broken link checker will automatically look for broken links and provide a report of every error code like 404s, 500s, etc.
• Ahrefs.com: Ahrefs is a popular SEO tool that can also go through all your links and tag broken internal and external links. 
• Brokenlinkcheck.com: This free tool checks for broken links and has a paid version with more features.
• Drlinkcheck.com: Dr. Link Check is a modern broken link checker with the most pleasant interface and output, so you can see exactly what it is doing.
• Screaming Frog: Screaming Frog is a website crawler that can check for broken links, among other things. It offers the option of exporting your link-checking results for further viewing.

However, the automated approach may lack the nuanced understanding that a human eye can provide, especially in complex programming. Their most functional versions are also often behind a paywall.

Checking Image File Paths: Ensuring Correct File Locations

Broken images often occur when file locations are incorrect. When the browser can’t find the specified image path, it fails to load the image, resulting in a broken display on the website. To prevent this, you must check image file paths.

You can verify and rectify image file paths through a simple step-by-step process:

1. Access the HTML code: Open the webpage’s source code to locate the image tag associated with the broken image.
2. Examine the image source attribute: Look for the “src” attribute within the image tag, which specifies the file path.

Also, verify the file path. Ensure that the file path is accurate and corresponds to the actual location of the image file on your server.

Validating Image File Extensions: Supported Formats and Compatibility

Broken images result from incorrect file extensions, causing a mismatch between the specified format and the file type.

To ensure the correct file extensions and maintain compatibility, follow these steps:

• Look at the HTML code: Navigate to the source code of your web page containing the broken image.

• Inspect the image source attribute: Look for the “src” attribute within the image tag to identify the file name and extension.

• Verify the file extension: Ensure that the extension aligns with the actual format of the image file. Standard image formats include JPEG (.jpg), PNG (.png), and GIF (.gif).

When browsers encounter incompatible file extensions, they struggle to interpret and display the image correctly, leading to a broken visual experience on your website.

Verifying Image File Names: Correct Naming Conventions and Special Characters

Your website can also display a broken image because your file names might deviate from the correct conventions or contain special characters. There are specific file names that browsers can’t interpret correctly, resulting in a broken image.

Also, when the specified file name in your HTML code doesn’t match the actual name of the image file on the server, the browser fails to locate and display the image correctly, resulting in a broken image.

Access the HTML code and inspect your image source attribute. Once there, ensure that the file name matches the actual name of the image file on the server. Make sure that it adheres to proper naming conventions and avoids special characters.

Image File Permissions: Adjusting Access Permissions for Proper Display

Broken images can also come from incorrect image file permissions.

To check and correct image file permissions, follow these steps:

• Access the server: Log in to your server or hosting platform where the image files are stored.

• Navigate to the image directory: Locate the folder containing the images in question.

• Check file permissions: Right-click on the image file, go to ‘Properties’ or ‘Permissions,’ and ensure that the server and web applications have the necessary read and execute permissions.

When the permissions are set to restrict the browser’s access to your site’s image file, it leads to a failure in loading and displaying the image — then a broken presentation.

Handling Image File Sizes: Optimizing for Web and Fast Loading Times

They could be broken if the images are too big or heavy. Large files strain bandwidth, especially on slower internet connections, impacting the site’s performance and user experience.

It will display eventually, but it will take time that your audience doesn’t have. According to Forbes, 47% of website visitors have a limit of 2 seconds for loading time, and then they’re out.

Optimizing image file sizes is crucial for ensuring quick loading times and reducing the risk of broken images.

Here are some tips:

• Select the correct file format: Choose the proper image formats, like JPEG for photographs and PNG for transparent graphics.

• Resize images: Adjust dimensions to fit the intended display size on the webpage, reducing unnecessary data.

Last but not least, use compression tools. Employ image compression tools or image compression plugins on your site to maintain quality while reducing file sizes.

Checking Image URLs: Resolving Incorrect or Broken URLs

Your site might also display broken images because of an incorrect URL (Uniform Resource Locator). The URL serves as the address guiding the browser to the image file’s location. The browser can’t locate and retrieve the image if there’s anything wrong with it.

Access your HTML code and inspect the image source attribute to check for incorrect or broken image URLs. Then, look at the broken image and ensure the URL is accurate, complete, and properly formatted. Check for typos, missing slashes, or other errors hindering the browser’s ability to fetch the image.

Server Issues and Troubleshooting: Addressing Server Configuration Problems

Your servers might encounter issues in delivering the requested images to the browser.

This might be because of misconfigurations affecting your server’s ability to process image requests or limitations on bandwidth, leading to failed image retrievals and broken displays on the website.

To check for image configuration issues on the server, here are some tips:

• Server log inspection: Examine the server logs for any error messages related to image requests. Look for clues indicating server-side issues such as misconfigurations or resource limitations.

• Bandwidth assessment: Check if the server’s bandwidth can handle image requests without exceeding capacity.

Don’t forget to look at the server’s configuration files, focusing on settings related to image serving. Verify that the configurations align with the requirements of your website.

Content Delivery Network (CDN) Configuration: Ensuring Proper Image Delivery

CDNs are critical in efficiently delivering content (including images) to users by distributing it across various servers. Configuration problems disrupt this process and might be causing your site’s failed image retrieval and display issues.

Here are some tips to check for CDN configuration issues:

• CDN dashboard review: Log in to your CDN provider’s dashboard and check for any alerts, error messages, or notifications related to image delivery.

• Configuration settings: Examine the configuration settings within the CDN dashboard, focusing on parameters related to image caching, compression, and delivery.

Testing image URLs is another way to detect CDN configuration problems. Test specific image URLs through the CDN to ensure that the content is accessible and being delivered correctly to users.

Browser Compatibility Issues: Resolving Image Rendering Problems

Some browsers might struggle to render images correctly because of variations in rendering engines, supported formats, or processing capabilities. The differences between browsers lead to images not displaying as intended, damaging UX.

You can also conduct the following checks:

• Inspect browser developer tools: Use browser developer tools to inspect elements and view any error messages or warnings related to image rendering. This can provide insights into compatibility issues.

• Validate image formats: Ensure that major browsers widely support the image formats. To minimize compatibility concerns, stick to commonly accepted formats like JPEG, PNG, and GIF.

The best solution for browser compatibility issues is regular cross-browser website testing.

Look at how your images are displayed across various browsers, including popular ones like Chrome, Firefox, Safari, and Edge. You can also automate this process with tools like LambdaTest.

Image Linking and Embedding: Correcting Broken Image Links or Embed Codes

The broken images on your website can also be from linking and embedding issues. This can happen when the image has a broken link, your website can’t fetch the image, or when the embed code is incorrect or incomplete.

Here are actionable steps to check linked and embedded images for your e-commerce website:

1. Inspect image links: Examine all the broken links to verify that the image URLs are accurate, complete, and properly formatted. Ensure they lead to the correct location of the image file.

2. Review embed codes: If using embed codes, check that they are correctly implemented in the HTML and contain all necessary parameters. Ensure that the code corresponds to the intended image.

Also, always test links and codes. Manually click on image links or test embed codes to ensure that they lead to the correct image file and can be accessed by the browser.

Troubleshooting Cache Issues: Clearing Cache for Updated Image Display

Outdated or corrupted cached versions of images might be displayed by your website instead of fetching the updated files from the server.

To check for cache issues, follow these tips:

• Clear browser cache: In your computer’s browser settings, locate the option to clear the cache. This step ensures that the browser fetches the latest versions of images from the server.

• Check server-side caching: If your server employs caching mechanisms, clear the server-side cache to ensure it serves updated images to users.

• Use cache-busting techniques: Implement cache-busting methods like appending version numbers or timestamps to image URLs. This tells browsers to recognize updated files and bypass cached versions.

Caching mechanisms enhance website performance by storing copies of files locally, but when these cached versions become problematic, it can result in images not loading correctly.

Responsive Design Considerations: Resolving Image Display Issues on Different Devices

Nowadays, your e-commerce websites are being displayed in a wide variety of screen sizes and resolutions. In the Philippines, smartphone users are expected to reach 90 million in 2023, with more than half of e-commerce sales happening on mobile.

Your website’s images might appear broken if they’re unoptimized for different devices and screen types.

Here are some tips to implement:

• Cross-device testing: View your website on various devices, including desktops, laptops, tablets, and smartphones, to identify any inconsistencies in image displays. You can also automate this through tools like Lambda Test.

• Media queries examination: Review the CSS media queries in your stylesheet that control image responsiveness. Ensure they are correctly implemented to adapt image styles based on device characteristics.

Images not appropriately scaled or positioned can lead to distortions, overlapping, or incomplete displays.

Accessibility Considerations: Providing Alternative Text for Broken Images

Even when you have broken images on your site, it shouldn’t hinder people of all abilities from access. Having an accessibility plan for when your site can’t display images is a vital fallback for you and an important touchpoint for users with visual impairments or disabilities.

Accessibility considerations improve inclusivity and comply with web accessibility standards, such as the Web Content Accessibility Guidelines (WCAG), promoting a user-friendly and universally accessible online environment.

To ensure accessibility when dealing with broken images, consider the following suggestions:

• Alt text: Always include descriptive alternative text using the “alt” attribute in the image tag, providing a textual representation of the image’s content or function.

• Contextual descriptions: Ensure that the alternative text provides sufficient context to convey the image’s purpose or information, aiding users in understanding its relevance to the content.

• Decorative images: If an image is purely decorative and adds no meaningful content, use empty alt text (alt= “”) to indicate its insignificance to screen readers.

• Link descriptions: If the broken image serves as a link, incorporate descriptive text within the link to maintain context and assist users in understanding the linked destination.

Also, consider the text-based alternatives suggestion. Consider providing text-based alternatives or captions adjacent to the broken image, offering users an additional means of accessing the conveyed information.

Cross-Domain Resource Sharing (CORS): Addressing Access-Control-Allow-Origin Errors

CORS, or Cross-Domain Resource Sharing, is a security feature implemented by web browsers to control requests from one domain to another to enhance web application security.

This restriction originally prevents potential security vulnerabilities, but malfunctions could result in broken images. The user’s browser restricts the loading of resources, including images, from domains other than the one where the web page originated.

To address CORS errors related to broken images, follow these steps:

• Server configuration: Configure the server hosting the images to include the appropriate CORS headers, notably the “Access-Control-Allow-Origin” header, specifying which domains can access the resources.

• Wildcard usage: If applicable, use a wildcard (*) as the value for “Access-Control-Allow-Origin” to allow access from any domain. Note that this option should be used cautiously, considering security implications.

Another thing to consider is the CORS middleware. Employ CORS middleware or plugins if using a web framework or content management system. These tools can streamline the process of handling CORS headers and mitigate errors.

Image Backup and Recovery: Restoring Missing or Corrupted Images

Images on your website can go missing because of accidental deletions, server issues, or external factors. Your images can also get corrupted because of file damaged or incomplete uploads.

Here are actionable steps you can follow:

• Identify the issue: Determine whether the images are missing or corrupted. This initial assessment guides your approach to recovery.

• Check backups: If you have regular backups of your website, access them to retrieve the missing or original versions of corrupted images.

• Server logs: Examine server logs for any information on missing images or potential causes. This step aids in understanding the root of the problem.

• Re-upload images: For missing images, re-upload them to the correct directories on your server, ensuring the file paths are accurate.

• File integrity checks: If corruption is suspected, run file integrity checks or use error-free backup copies. Replace corrupted images with their intact versions.

These two are common culprits of broken images, regardless of how it happens. But they’re also some of the easiest to fix.

Final Thoughts

Broken images and links can be a headache to fix — and if you’re a small business in the Philippines with no in-house IT team, the problem might just be minor enough not to warrant a call with your IT guy.

This article discusses everything you need to know to find and fix broken images on your site yourself — with steps that the non-technical can follow. Save this as a reference for your website maintenance, and never lose customers again because of broken images.