Troubleshooting Image Errors

There are two main types of errors that can cause problems with images:

(1) Not keeping your webpage files and images all in the same folder.

(2) Not publishing the image file with the webpage file.

(3) Linking to an image locally on your computer.

(4) Using an image file that is the wrong size.

Here are some notes about how to fix those common errors:

(1) All Files MUST Be Together

You must create a folder on your computer for ALL your webpage files and image files. If you did not do that before, do that now. Close any files you have open in Composer and move your webpage files and images into the folder. If you did create a folder, check to make sure all the webpage files and image files are in there. Then, when you have everything in the folder, use Composer to open the webpage file with the broken image  and insert the image again, following the instructions for inserting an image. Save the revised page, and publish it again - and don't forget to close the file after you publish! You can see if the solution worked by going to the Internet, looking at your page (click refresh in your browser to make sure you are looking at the newest version of the page) - you should be able to see the image now.

(2) Publish Image Files with Pages

When you publish a webpage with Composer, you get a green checkmark for the webpage file, plus an additional green checkmark for each image that you are using on that page. if you get only one green checkmark, that means you are not publishing your image files. This is probably because you have not accidentally unchecked the box that tells Composer to publish the image files together with the webpage.

When you publish, you need to make sure the "include image files" box is checked. So, close any webpage files you have open in Composer, then open the page with the problem image. Publish the page again - and this time make sure the "include image files" option is checked, and publish your webpage again. You should see green checkmarks for both the webpage file and the image file(s) you are using on that page. You can see if the solution worked by going to the Internet, looking at your page (click refresh in your browser to make sure you are looking at the newest version of the page), and then click on the link. The link should work now.

(3) Local Image File

Are you using a local image file? A local image file is sometimes hard to detect, because the image will work for others - but it will not work for you. You can see if you have a local image file by right-mouse clicking on the image and checking its properties. In particular, you want to see the address of the image:

If the address starts with file:// instead of http:// then you are using a local image file on our computer - which means the image will not be visible to anyone else, only to you.

Here is how that happened! This error almost always results from continuing to edit a file after you have published it. To make sure you don't run into problems with your webpages, make sure you CLOSE your webpage file after your publish it. About 90% of the problems people have with their webpages results from not closing the file after it is published. So please - PLEASE - make sure that after you publish the file, you CLOSE THE FILE. Then, if you want to edit it some more, open the file again, edit, save, publish, and CLOSE THE FILE. If you do not close the file, but just keep on editing, you are editing the remote copy, not the local one. This means you will lose all your edits AND you will end up with broken images, both of which are very frustrating things to have happen.

Here is how to fix the error. Close any webpage files you have open in Composer. Then, use Composer to open the webpage file with the broken image  and insert the image again, following the instructions for inserting an image. Save the revised page, and publish it again - and don't forget to close the file after you publish! You can see if the solution worked by going to the Internet, looking at your page (click refresh in your browser to make sure you are looking at the newest version of the page), and then right-mouse click on the image. The address of the image should start with http:// now.

(4) Image Size

It is EXTREMELY important that you resize the image before you insert it into your webpage. Most people do not ever have a browser that is wider than 1200 pixels (even if their screen is wider than that, it is hard to read anything that is more than 1200 pixels in length). So, you should probably never have an image that is more than 800 pixels wide. If your image is bigger than that, RESIZE the image first; you can learn how to resize images for a Tech Tip! You don't need to alter your original file; just resize the file, and save it with a new name (you can just add the width in pixels to the name of the file so that you will remember how big it is - something like mypiano800.jpg, for example, if you take your image mypiano.jpg and resize it to be 800 pixels wide).

If you already published a super-huge image in your OU webspace, you may run into quota problems later on. It is not uncommon for a large image file (like one from a digital camera that you have not resized) to be 2MB or even bigger in size. This will almost completely fill up your OU webspace. If you get an error message about "quota exceeeded" when you try to publish your webpages, that is what has happened. To fix that, you will need to use an FTP program to remove the image from your OU webspace; you can learn how to use an FTP program for a Tech Tip!