Debugging Your Image Problems: Help for New Website Admins

Learning about "bugs" and debugging.

Learning about “bugs” and debugging. Image courtesy of the Library of Congress.

Since joining W&M’s IT department in 2008, I have seen a lot of messed up websites. Some of them are beyond help — old Web applications developed more than a decade ago that need the attention of a dedicated developer. But most errors on William & Mary’s websites are relatively easy to fix even if you don’t have much experience with, patience for, or a desire to learn, HTML.

Finding and fixing these errors doesn’t have to be complicated. There are three basic steps:

  1. Figure out what the browser thinks it should be doing and what you want it to be doing.
  2. Identify what is actually going on.
  3. Make these two things match.

Why a Website Might “Break”

While there are many different ways to “break” a website, one of the most common issues I see at William & Mary has to do with URLs. While this oversimplifies how the Web works, here is the basic idea: when you load a website, your browser combines different resources to create the final result that you see. If one of these resources isn’t where the browser thinks it should be, then your page can not work as you planned.

The most basic form of this error is when you insert a link. If the link is wrong, your users won’t get sent to the appropriate page. Keep in mind that the owner of the page you’ve linked to may have changed the link address, and so this may be part of the problem.

Similarly, if you insert an image into your webpage and get a broken image icon, something is not right. Either the image is in the proper place on your server and the URL that you used to access the image is wrong, or your URL is correct and the image isn’t where you think it is.

Using Developer Tools to Identify Your Problem

For me, the first stop for identifying problems on a specific site is Chrome’s Developer Tools. (I use Chrome, but other browsers also have their own sets of tools for doing this type of thing.) Open up Developer Tools under the View Menu (View>Developer>Developer Tools), click on the console tab, then refresh the page.

You can check an image's URL in WordPress by navigating to the image in the media tab.

You can check an image’s URL in WordPress by navigating to the image in the media tab. ┬áSee the “File URL” in the box on the right-hand side of the page to find and double-check your URL.

In the console, you will see any errors or warnings that your browser runs into when loading the page. If you have a broken image, you will see something along the lines of a message saying that the browser “Failed to load [a] Resource.” If you are investigating a broken image, double check to make sure that that the URL listed in the error message is what you think it should be. (Many times, people have a typo in a URL or to have used the wrong file name for an image.)

If the URL looks all right to you, make sure the image is where you think it should be. If you are one of W&M’s many WordPress users, you can do this by signing into your site, and making sure the image is listed under the media tab. If you see it, click on it and find the “File URL” and see if it matches the URL your browser tried to load. Keep in mind that I am using WordPress as an example because so many people use it at W&M. You might have to do some sleuthing to find an image on a different content management system.

Quick Review:

If your images are not displaying properly make sure:

  1. Your browser is using the correct URL to retrieve the image and
  2. The image is located at that URL.
About Evan Cordulack

Evan Cordulack is a Web Applications Specialist for Academic Technology. He helps faculty members with Web-based projects related to their research and teaching. He earned his PhD in American Studies at William & Mary in 2013. Find him at http://cordulack.net/