Image Display Problem Checklist

If your images fail to display, check the following:

  1. Extension (1): Check that your image file uses a browser-friendly extension: .jpg or .png for photographic images or images with many colors, .gif or .png for drawings or images with fewer colors.
  2. Orthography: There should be no blank spaces or caps in the name of any of your images. Calling an image "pic2.jpg" is fine. Calling an image "Pic2.jpg" (with a cap) or "pic 2.jpg" (with a blank space) is not good and will cause problems.
  3. Permissions: Check that the permissions for the "img" folder and for each separate image are set to "755."
  4. Location: Check that your images are in the "img" folder and not somewhere else and that the src attribute in your img tag specifies the correct location for the image. For example, if the pic2.jpg is in the "img" folder and your HTML file is not in that folder, then src="img/pic2.jpg" will find the image but src="pic2.jpg" will not.
  5. Spelling: Check that you have spelled the name of the image file correctly. This is a VERY common source of error. Instructing the browser to look for "pick2.jpg" when the image file is named "pic2.jpg" (no k) will not work.
  6. Extension (2): Check the CASE of the image file extension (.gif, .jpg, .png, etc.). Extensions should always be LOWERCASE. Image file names and the extensions that follow them are case sensitive. That means, if your image is saved as "pic2.JPG" and your browser is looking for an image named "pic2.jpg" (no caps), it will not find the image. Again, as a rule, always save images with lowercase names and extensions. If you're using an image with an uppercase ("old style) extension, RENAME the file using the same extension in lowercase. Again, NEVER use uppercase extensions.