Science, Tech, Math › Computer Science Adding Images to Your Web Pages Getting images to display properly Print Alistair Berg/Digital Vision/Getty Images Science, Tech, Math PHP Programming Perl Python Java Programming Javascript Programming Delphi Programming C & C++ Programming Ruby Programming Visual Basic View More By Jennifer Kyrnin Jennifer Kyrnin Writer University of California University of Washington Jennifer Kyrnin is a professional web developer who assists others in learning web design, HTML, CSS, and XML. Learn about our Editorial Process Updated on February 20, 2020 Any images that you want to link in your website's HTML should first be uploaded to the same place you send the HTML for the web page, whether the site is hosted on a web server that you reach by FTP or you use a web hosting service. If you use a web hosting service, you probably use an upload form provided by the service. These forms are typically in the administration section of your hosting account. Uploading your image to the hosting service is only the first step. Then you need to add a tag in the HTML to identify it. Uploading Images to the Same Directory as the HTML Your photos may be located in the same directory as the HTML. If that is the case: Upload an image to the root of your website.Add an image tag in your HTML to point to the image.Upload the HTML file to the root of your website.Test the file by opening the page in your web browser. The image tag takes the following format: Assuming you are uploading a photo of the moon with the name "lunar.jpg," the image tag takes the following form: The height and width are optional but recommended. These default values are in pixels but may also be expressed as percentages: The image tag does not require a closing tag. If you are linking to an image in another document, use anchor tags and nest the image tag inside. Uploading Images in a Subdirectory It is more common to store images in a sub-directory, usually called Images. In order to point to images in that directory, you need to know where it is in relation to the root of your website. The root of your website is where the URL, without any directories on the end, displays. For example, for a website named "MyWebpage.com," the root follows this form: http://MyWebpage.com/. Notice the slash at the end. This is how the root of a directory is usually indicated. Subdirectories include that slash to show where they sit in the directory structure. The MyWebpage example site might have the structure: http://MyWebpage.com/ — the root directoryhttp://MyWebpage.com/products/ — the products directoryhttp://MyWebpage.com/products/documentation/ — the documentation directory under the products directoryhttp://MyWebpage.com/images/ — the images directory In this case, when you point to your image in the images directory, you write: This is called the absolute path to your image. Common Problems With Images That Don't Display Getting images to show up on your web page can be challenging at first. The two most common reasons are that the image was not uploaded where the HTML is pointing, or the HTML is written incorrectly. The first thing to do is to see if you can find your image online. Most hosting providers have some type of management tool that you can use to see where you uploaded your images. After you think you have the correct URL for your image, type it into your browser. If the image shows up, then you have the correct location. Then check that your HTML is pointing to that image. The easiest way to do that is to paste the image URL that you just tested into the SRC attribute. Re-upload the page and test. The SRC attribute of your image tag should never start with C:\ or file: These will appear to work when you test your web page on your own computer, but everyone who visits your site will see a broken image. This is because C:\ points to a location on your hard drive. Since the image is on your hard drive, it displays when you view it, but it won't for anyone else. Cite this Article Format mla apa chicago Your Citation Kyrnin, Jennifer. "Adding Images to Your Web Pages." ThoughtCo, Sep. 18, 2021, thoughtco.com/adding-images-and-uploading-to-pages-3466470. Kyrnin, Jennifer. (2021, September 18). Adding Images to Your Web Pages. Retrieved from https://www.thoughtco.com/adding-images-and-uploading-to-pages-3466470 Kyrnin, Jennifer. "Adding Images to Your Web Pages." ThoughtCo. https://www.thoughtco.com/adding-images-and-uploading-to-pages-3466470 (accessed April 25, 2024). copy citation